Прыгающий мячик

Используйте технику requestAnimationFrame из глав 13 и 15 для рисования прямоугольника с прыгающим внутри мячом. Мяч двигается с постоянной скоростью и отскакивает от сторон прямоугольника при соударении.

<canvas width="400" height="400"></canvas>

<script>

  var cx = document.querySelector("canvas").getContext("2d");

  var lastTime = null;

  function frame(time) {

    if (lastTime != null)

      updateAnimation(Math.min(100, time - lastTime) / 1000);

    lastTime = time;

    requestAnimationFrame(frame);

  }

  requestAnimationFrame(frame);

  function updateAnimation(step) {

    // Ваш код

  }

</script>