About collisions

previous next

Collisions are fundamental for many games. One might think that they are easy to implement but, as soon as we are dealing with non-rectangular objects, things get complicated very quickly.

For collisions between the ball and the paddle, we will simplify things and assume that there is a collision if the lowest point of the ball touches (or passes through) the bottom of the paddle; otherwise, we will assume that it missed.

Run the (hidden) code to see what I mean.

// quick hack
var ctx = $('#game-canvas')[0].getContext("2d");
var ball1;
var ball2;
var ball3;
var top = 150;
var left = 100;
var width = 100;
var height = 40;
var bottom = top + height;
var right = left + width;

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

this.move = function(height, width) {
   if (this.y + this.r + this.dx == bottom && this.x >= left
   && this.x < right){
     this.dy = -dy;
  }
  this.x += this.dx;
  this.y += this.dy;
  };

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

ctx.beginPath();
    ctx.fillStyle = "#000000;";
    ctx.arc(this.x, this.y+this.r-2, 2, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
  };
}

ball1 = new Ball(0, 100, 20, 1, 1, "#FF0000;");
ball2 = new Ball(80, 100, 20, 1, 1, "#00FF00;");
ball3 = new Ball(140, 100, 20, 1, 1, "#0000FF;");

function update() {

// update the position
ball1.move();
ball2.move();
ball3.move();

// clear the entire game canvas
ctx.clearRect(0, 0, 300, 300);

ctx.beginPath();
ctx.fillStyle = "#000000;";
ctx.rect(left, top, width, height);
ctx.rect(left, bottom-3, width, 2);
ctx.closePath();
ctx.stroke();

// draw the ball at its new position
ball1.draw();
ball2.draw();
ball3.draw();
}

setInterval(update, 40);

previous next

Reeborg

Programming tutorials