Keyboard

We're going to control the paddle by using the left and right arrow keys from the keyboard.

To do this, we need to do two things: 1) find out when the left and right arrow keys have been pressed and 2) move the paddle when they have.

In order to receive key events, we'll create one function called on_key_up and another called on_key_down, then use a bit of jQuery magic to bind them to the appropriate events.

Then, on our way through the draw function, we'll check to see if either arrow is pressed down, and move the paddle accordingly.

var game;
var ball;
var paddle;

var right_down = false;
var left_down = false;

//set right_down or left_down to true
// if the right or left arrow keys are down
function on_key_down(evt) {
  if (evt.keyCode == 39) right_down = true;
  else if (evt.keyCode == 37) left_down = true;
}

//and unset them when the same key is released
function on_key_up(evt) {
  if (evt.keyCode == 39) right_down = false;
  else if (evt.keyCode == 37) left_down = false;
}

// jQuery magic
$(document).keydown(on_key_down);
$(document).keyup(on_key_up);

// relevant change for the Paddle

Paddle.prototype.move = function() {
  if (left_down) {
    this.x -= 5;
    if (this.x < 0) {
      this.x = 0;       // make sure it stays within bounds
    }
  }
  else if (right_down) {
    this.x += 5;
    if (this.x + this.width > game.width) { // make sure it
      this.x = game.width - this.width; // stays within bounds
    }
  }
}

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;

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.draw = function(){
    this.ctx.beginPath();
    this.ctx.rect(this.x, this.y, this.width, this.height);
    this.ctx.closePath();
    this.ctx.fill();
  }
}

And we have a game!

:-)

Well ... we do have a few more things to do, but we are getting there.

previous next

Reeborg

Programming tutorials

And we have a game!