Breakout: Pause

previous next

In this section, I have implemented a "pause" functionality for the game. After clicking on the "Pause" button once, clicking on it again, or clicking on the "Play" button will resume the game. I've also added information about the state of the game when it is paused or stopped. In a real game, erasing the screen when pausing the game is often done to prevent players from "cheating" by pausing a fast moving game to see what they should do next. Here, as we are developping the game, I avoid doing this so as to better see what is happening with the ball.

var PAUSED = false;
var STOPPED = true;

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);
  }
}

Understand the code!

Take some time to read the code and understand why I change the values of the flags STOPPED and PAUSED in various places. In programming, a flag is the general name of a variable used to indicate the state of a program.

Explore further

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 smaller values. You can also change the animation frame rate, or the initial position of the ball.

Get ahead of me!

Next, I will make the ball bounce on the canvas "walls", keeping it inside the canvas. Perhaps you can do this yourself first, right now, by adding some code within the html editor window.

previous next

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.