Paddle collision

previous next

There is a fair bit of new code below as I've increased the pace of change slightly, since this is much of a repeat of steps we've done before: I changed the Ball prototype to take into account collisions with the paddle (or not), added a new sound effect and prepared for having a game over result.

Take your time and go over the code and make sure you understand everything.

var game;
var ball;
var paddle;

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

Ball.prototype.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;
  }
};

function update() {
  game.clear_canvas();
  ball.move(game.height, game.width);
  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.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();
  }
}

previous next

Reeborg

Programming tutorials