скрипт задает поведение для кружка, который должен двигаться и отскакивать от стенок под углом 45 градусов. Если MoveUp истинно, то кружок двигается вверх, если ложно, то вниз, аналогично с MoveRight.
<html>
<head>
<title>Bounce</title>
<style>
canvas {
height: 600px;
width:600px;
border: 2px solid black;;
}
</style>
</head>
<body>
<canvas id='c'></canvas>
<script>
var circ = {r : 40, v : 10, h : 10};
var MoveUp = false, MoveRight = true;
var canvas = document.getElementById('c').getContext('2d');
function timer() {
canvas.fillStyle = "white";
canvas.fillRect( 0 , 0 , 600 , 600 );
canvas.fill();
//canvas.width = canvas.width;
if (MoveRight = true) {
circ.h++;
} else {
circ.h--;
};
if (circ.h <= 0) {
MoveRight = true;
};
if ((circ.h + 2*circ.r) >= 600) {
MoveRight = false;
};
///////////////////////////////////////////////
if (MoveUp = true) {
circ.v--;
} else {
circ.v++;
};
if (circ.v <= 0) {
MoveUp = false;
};
if ((circ.v + 2*circ.r) >= 600) {
MoveUp = true;
};
canvas.strokeStyle = 'black';
canvas.arc(circ.h + circ.r, circ.v + circ.r, circ.r, 0, Math.PI*2, true);
canvas.stroke();
};
setInterval(timer,1);
</script>
</body>
</html>