Помогите найти ошибку в коде... Здесь шарик каждый раз должен отскакивать от стены, а он делает это только пока не долетит до левой или верхней стены, а потом начинает дергаться...не пойму я что-то где ошибка...
<div style="width: 500; height: 500; position: absolute; left: 10; top: 10"><canvas id="can" width="500" height="500"></canvas></div>
<script>
var canvas = document.getElementById('can').getContext('2d') ;
canvas.strokeStyle = "#000";
canvas.fillStyle = "#adff2f";
var y = Math.floor(Math.random() * (10) ) + 1 ;
var x = Math.floor(Math.random() * (11) ) ;
var a = 10+x+1 ;
var b = 10+y+1 ;
var i = 0 ;
window.onload = function() {
timer = setInterval(function() {
if (a+x < 490 && a-x > 10 && b+y < 490 && b-y > 10) {
a += x ;
b += y ;
canvas.clearRect(0, 0, 500, 500) ;
canvas.beginPath() ;
canvas.arc(a, b, 10, 0, Math.PI*2, false) ;
canvas.stroke() ;
canvas.closePath() ;
canvas.beginPath() ;
canvas.arc(a, b, 9, 0, Math.PI*2, false) ;
canvas.fill() ;
canvas.closePath() ;
} else {
i += 1 ;
if (i == 0) {
if (a > 250) {
if (a+x >= 490) {a = 489} else {a += x} ;
} else {
if (a-x <= 10) {a = 11} else {a += x} ;
} ;
if (b > 250) {
if (b+y >= 490) {b = 489} else {b += y} ;
} else {
if (b-y <= 10) {b = 11} else {b += y} ;
} ;
canvas.clearRect(0, 0, 500, 500) ;
canvas.beginPath() ;
canvas.arc(a, b, 10, 0, Math.PI*2, false) ;
canvas.stroke() ;
canvas.closePath() ;
canvas.beginPath() ;
canvas.arc(a, b, 9, 0, Math.PI*2, false) ;
canvas.fill() ;
canvas.closePath() ;
} else {
if (a > 250) {
if (a+x >= 490) {x = -x} ;
} else {
if (a-x <= 10) {x = -x} ;
} ;
if (b > 250) {
if (b+y >= 490) {y = -y} ;
} else {
if (b-y <= 10) {y = -y} ;
} ;
a += x ;
b += y ;
canvas.clearRect(0, 0, 500, 500) ;
canvas.beginPath() ;
canvas.arc(a, b, 10, 0, Math.PI*2, false) ;
canvas.stroke() ;
canvas.closePath() ;
canvas.beginPath() ;
canvas.arc(a, b, 9, 0, Math.PI*2, false) ;
canvas.fill() ;
canvas.closePath() ;
i = 0 ;
} ;
} ;
canvas.beginPath() ;
canvas.moveTo(0, 1) ;
canvas.lineTo(500, 1) ;
canvas.stroke() ;
canvas.closePath() ;
canvas.beginPath() ;
canvas.moveTo(0, 499) ;
canvas.lineTo(500, 499) ;
canvas.stroke() ;
canvas.closePath() ;
canvas.beginPath() ;
canvas.moveTo(1, 0) ;
canvas.lineTo(1, 500) ;
canvas.stroke() ;
canvas.closePath() ;
canvas.beginPath() ;
canvas.moveTo(499, 0) ;
canvas.lineTo(499, 500) ;
canvas.stroke() ;
canvas.closePath() ;
}, 1) ;
} ;
</script>
