Darmowe Forum

-------------------------------------------------------
<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>