-------------------------------------------------------
<div class="lewy" id="lewy1">
<canvas id="adam" width="400" height="320"></canvas>
<script>var weronika = document.getElementById("adam");var c = weronika.getContext("2d");
//tworzenie obszaru przemieszczania się piłek
var zakres = {x: 0,y: 0,width: 400,height: 320};
var pilka = [{x: 50, y: 100,r: 10,vx: 10,vy: 7,color: 100}, ];
function ruszaj() {
//tworzenie animacji - ruchu
c.fillStyle = "#ff33aa"; c.fillRect(zakres.x, zakres.y, zakres.width, zakres.height);
//wyświetlanie połozenia kolejnych piłek
for (var z = 0; z < pilka.length; z++) {
c.fillStyle = 'hsl(' + pilka[z].color +', 50%, 20%)';c.beginPath();
c.arc(pilka[z].x, pilka[z].y, pilka[z].r, 0, Math.PI * 2, true);
c.fill()
if (pilka[z].x - pilka[z].r + pilka[z].vx < zakres.x || pilka[z].x + pilka[z].r + pilka[z].vx >
zakres.x + zakres.width) {
pilka[z].vx = -pilka[z].vx;}
if (pilka[z].y + pilka[z].r + pilka[z].vy > zakres.y + zakres.height ||
pilka[z].y - pilka[z].r + pilka[z].vy < zakres.y) {
pilka[z].vy = -pilka[z].vy;}
pilka[z].x +=pilka[z].vx
pilka[z].y += pilka[z].vy
}
requestAnimationFrame(ruszaj);
}
requestAnimationFrame(ruszaj);
</script>
</div>
