Breakout: Adding a paddle

...

<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 move_ball(){
  var delta;     /* the variable used to keep
            track of the correction mentioned above */
  BALL_x += BALL_dx;
  BALL_y += BALL_dy;

//horizontal bounce
  if (BALL_x - BALL_r <= 0){
    delta = BALL_x - BALL_r;
    BALL_x = BALL_r - delta;
    BALL_dx = -BALL_dx;
  }
  else if (BALL_x + BALL_r >= CANVAS_WIDTH){
    delta = BALL_x + BALL_r - CANVAS_WIDTH;
    BALL_x = CANVAS_WIDTH - BALL_r - delta;
    BALL_dx = -BALL_dx;
  }

// vertical bounce
  if (BALL_y - BALL_r <= 0){
    delta = BALL_y - BALL_r;
    BALL_y = BALL_r - delta;
    BALL_dy = -BALL_dy;
  }
  else if (BALL_y + BALL_r >= CANVAS_HEIGHT){
    delta = BALL_y + BALL_r - CANVAS_HEIGHT;
    BALL_y = CANVAS_HEIGHT - BALL_r - delta;
    BALL_dy = -BALL_dy;
  }
}

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.

Stuff

Your notebook