Breakout: Bouncing correctly

previous next

Suppose you are moving 7 units of distance at each step. You are at unit 95. The next step, you would normally move to unit 102. However, there is a wall in your way at unit 100. So, instead of getting to unit 102 (and passing the wall by 2 units) you bounce back (the same 2 units) to 98. This is the kind of calculation that is taken into account by the code below, remembering that the position of the ball is that of its centre.

Note that, the way we had done the calculation previously would correspond to stopping at the wall (unit 100) rather than bouncing back.

Get ahead of me!

Next, we add a paddle; this will be a simple rectangle drawn near the bottom on the screen. Can you do this now?

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.