Mouse controls

previous next

We are now ready to control the paddle by the mouse.

To do this, we need to do the following:

Check to see if the mouse has moved; we do this by binding a function to a mouse event
Check to see if the mouse is within the canvas boundaries.
If it is, move the x coordinate of the paddle with that of the mouse
Make sure that the paddle stays entirely within the canvas boundaries.
For cosmetic reasons, hide the cursor when the mouse can move the paddle.

And here is the code to do it:

var game;
var ball;
var paddle;
var offset_left;
var offset_top;

offset_left = $("#game-canvas").offset().left;
offset_top = $("#game-canvas").offset().top;

function on_mouse_move(evt) {

// is the mouse within the canvas ?

if (evt.pageX > offset_left
      && evt.pageX < offset_left + game.width
      && evt.pageY > offset_top
      && evt.pageY < offset_top + game.height) {

// if so, the paddle follows the mouse horizontally
    paddle.x = evt.pageX - offset_left;

// but stays within bounds
    if (paddle.x > game.width - paddle.width) {
      paddle.x = game.width - paddle.width
    }

// use jQuery to hide the cursor
    $("#game-canvas").css("cursor", "none");
  }
  else { // the mouse left the canvas
        // use jQuery to show the cursor
    $("#game-canvas").css("cursor", "auto");
  }
}

$(document).mousemove(on_mouse_move);

function init() {
  game = new Game();
  ball = new Ball(50, 150, 10, 2, 4, game.ctx);
  paddle = new Paddle(100, 5, 70, game.ctx, game.height);
  ball.draw();
  paddle.draw();
}

function update() {
  game.clear_canvas();
  ball.move(game.height, game.width);
  paddle.move();
  ball.draw();
  paddle.draw();
}

init();
game.loop(update);

var current_sound;
var right_down = false;
var left_down = false;

function on_key_down(evt) {
  if (evt.keyCode == 39) right_down = true;
  else if (evt.keyCode == 37) left_down = true;
}

function on_key_up(evt) {
  if (evt.keyCode == 39) right_down = false;
  else if (evt.keyCode == 37) left_down = false;
}

$(document).keydown(on_key_down);
$(document).keyup(on_key_up);

function play_sound(sound_id) {
  if (speaker_on) {
    current_sound = $(sound_id)[0];
    current_sound.play();
  }
}

function Game(){
  this.ctx = $('#game-canvas')[0].getContext("2d");
  this.width = $("#game-canvas").width();
  this.height = $("#game-canvas").height();
  this.time_delay = 20;

this.clear_canvas = function(){
    this.ctx.clearRect(0, 0, this.width, this.height);
  };

this.loop = function(f){
    return setInterval(f, this.time_delay);
  };
}

function Ball(x, y, r, dx, dy, ctx) {
  this.x = x;
  this.y = y;
  this.r = r;
  this.dx = dx;
  this.dy = dy;
  this.ctx = ctx;

this.move = function(height, width) {
  var delta;

if (this.x + this.dx + this.r > width) {
    delta = this.x + this.dx + this.r - width;
    this.x = width - delta - this.r;
    this.dx = - this.dx;
    play_sound("#wall_sound");
  }
  else if ( this.x + this.dx - this.r < 0) {
    delta = this.x + this.dx - this.r;
    this.x = - delta + this.r;
    this.dx = - this.dx;
    play_sound("#wall_sound");
  }
  else {
    this.x += this.dx;
  }

if (this.y + this.dy + this.r > height) {
    // collision with paddle?
    if (this.x >= paddle.x &&
        this.x <= paddle.x + paddle.width){
        delta = this.y + this.dy + this.r - height;
        this.y = height - delta - this.r;
        this.dy = - this.dy;
        play_sound("#paddle_sound");
    }
    else{
      this.dx = 0;   // game over
      this.dy = 0;
    }
  }
  else if ( this.y + this.dy - this.r < 0) {
    delta = this.y + this.dy - this.r;
    this.y = - delta + this.r;
    this.dy = - this.dy;
    play_sound("#wall_sound");
  }
  else {
    this.y += this.dy;
  }
};

this.draw = function() {
    var c = this.ctx;
    c.beginPath();
    c.arc(this.x, this.y, this.r, 0, Math.PI*2, true);
    c.closePath();
    c.fill();
  };
}

Paddle = function(x, height, width, ctx, canvas_bottom){
  this.x = x;
  this.height = height;
  this.width = width;
  this.ctx = ctx;
  this.y = canvas_bottom - height;

this.move = function() {
    if (left_down) {
      this.x -= 5;
      if (this.x < 0) {
        this.x = 0;
      }
    }
    else if (right_down) {
      this.x += 5;
      if (this.x + this.width > game.width) {
        this.x = game.width - this.width;
      }
    }
  }

this.draw = function(){
    this.ctx.beginPath();
    this.ctx.rect(this.x, this.y, this.width, this.height);
    this.ctx.closePath();
    this.ctx.fill();
  }
}

Question for you

Why do we only check to see if the paddle stays within bounds on the right hand side of the canvas?

Experiment!

Comment out some lines of code to better see their effect. For instance, you can comment out the lines of code that ensure that the paddle stay within the canvas boundaries, or those that hide and show the cursor.

previous next

Reeborg

Programming tutorials

Question for you

Experiment!