Breakout: Bounce!

previous next

As mentioned at the end of last section, we want to make the ball bounce within the canvas "walls". In order to do so, it is important to remember that the position of the ball is that of its centre, and that the part that hits a wall is its edge, located a distance equal to the radius away from the centre.

Find the bug!

With the ball moving as fast as it does, it might be a bit difficult to see what is going on. If you are curious, I suggest that you change BALL_dx and BALL_dy in the html editor to larger values and change the animation frame rate, from 1000 / 60 (i.e. 60 frames per 1000 milliseconds, or 60 frames per second) to something like 10 or even only 1 frame per second.

Do it before me!

Next, I will fix the bug, making the ball bounce "correctly".

previous next

<html>
  <head>
    <meta charset="utf-8" />
    <style>
      body {background-color: #eee;}
      canvas {border: 2px solid green; background-color: white;}
    </style>
    <script>
var BALL_x, BALL_y, BALL_r, BALL_dx, BALL_dy;
var CANVAS_WIDTH, CANVAS_HEIGHT;
var NEXT_ANIMATION_FRAME;
var PAUSED = false;
var STOPPED = true;
var FPS = 40;
var ctx;

function stop(){
  if (typeof NEXT_ANIMATION_FRAME != "undefined") {
    clearTimeout(NEXT_ANIMATION_FRAME);
  }
  PAUSED = false;
  STOPPED = true;
  ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  ctx.font = "25pt Helvetica";
  ctx.fillText("Game stopped!", CANVAS_WIDTH/3, CANVAS_HEIGHT/2);
}

function pause(){
  if (STOPPED) {
    return;
  }
  if (PAUSED){
    PAUSED = false;
    update();
  }
  else{
    PAUSED = true;
  }
}

function init(){
  var $ = parent.$;
  var canvas = $('#canvas', document)[0];
  ctx = canvas.getContext("2d");
  CANVAS_WIDTH = canvas.width;
  CANVAS_HEIGHT = canvas.height;
  ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  STOPPED = false;
  PAUSED = false;
  BALL_x = 200;
  BALL_y = 200;
  BALL_r = 16;
  BALL_dx = 3;
  BALL_dy = 5;
}

function play() {
  if (PAUSED){
    PAUSED = false;
    update();
  }
  else{
    init();
    draw_ball();
    NEXT_ANIMATION_FRAME = setTimeout(update, 1000/FPS);
  }
}

function draw_ball(){
  ctx.beginPath();
  ctx.arc(BALL_x, BALL_y, BALL_r, 0, Math.PI*2, true);
  ctx.fill();
}
      JS_CODE /* replaced by the code
          in the other editor */
    </script>
  </head>
  <body>
    <canvas height="480" id="canvas" width="600"> </canvas>
    <button onClick="play();">Play</button>
    <button onClick="pause();">Pause</button>
    <button onClick="stop();">Stop</button>
  </body>
</html>

Your notebook

Keep your personal notes here. These notes are stored by your browser on your own computer, and will be available from any page on this site. You can choose to use html syntax for formatting.