Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Ошибка в коде при анимации в canvas-е (https://javascript.ru/forum/misc/29491-oshibka-v-kode-pri-animacii-v-canvas-e.html)

Hekumok 30.06.2012 00:39

Ошибка в коде при анимации в canvas-е
 
Помогите найти ошибку в коде... Здесь шарик каждый раз должен отскакивать от стены, а он делает это только пока не долетит до левой или верхней стены, а потом начинает дергаться...не пойму я что-то где ошибка...
<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>

Hekumok 30.06.2012 01:19

хм...жму 'Посмотреть!', и почему-то не работает, если у кого-то тоже, то работу кода можно посмотреть >>ТУТ<<

Hekumok 30.06.2012 10:29

так-с, оказывается, дергаться он начинает при достижении верхней или левой стены...

vadim5june 30.06.2012 12:11

Цитата:

Сообщение от Hekumok (Сообщение 185341)
так-с, оказывается, дергаться он начинает при достижении верхней или левой стены...

исправте
if (a-x <= 10) {x = -x} ;if (b-y <= 10) {y = -y} ;
на
if (a+x <= 10) {x = -x} ;if (b+y <= 10) {y = -y} ;

Hekumok 30.06.2012 15:48

блин, спасибо, vadim5june! точно, ведь там же и так отрицательные те числа!


Часовой пояс GMT +3, время: 00:18.