Pong - Bouncing Balls
Sat, May 14, 2011- Introduction
- The Game Runner
- Bouncing Balls
- The Game Loop
- Collision Detection
- Computer AI
Using the GameRunner we saw in part1. We can define a Pong game object that does nothing except draw a bouncing ball. All we need to do is implement:
initialize()
update()
draw()
Pong = {
initialize: function(runner, cfg) {
this.cfg = cfg;
this.runner = runner;
this.width = runner.width;
this.height = runner.height;
this.court = Object.construct(Pong.Court, this);
this.ball = Object.construct(Pong.Ball, this)
this.runner.start();
},
update: function(dt) {
this.ball.update(dt);
},
draw: function(ctx) {
this.court.draw(ctx);
this.ball.draw(ctx);
},
Court: {
// <snip>
},
Ball: {
// <snip>
}
Pong.Court
The Pong.Court object needs to know how to draw the walls:
Court: {
initialize: function(pong) {
var w = pong.width;
var h = pong.height;
var ww = pong.cfg.wallWidth;
this.walls = [];
this.walls.push({x: 0, y: 0, width: w, height: ww});
this.walls.push({x: 0, y: h - ww, width: w, height: ww});
this.walls.push({x: 0, y: 0, width: ww, height: h});
this.walls.push({x: w-ww, y: 0, width: ww, height: h});
},
draw: function(ctx) {
ctx.fillStyle = 'white';
for(var n = 0 ; n < this.walls.length ; n++)
ctx.fillRect(this.walls[n].x, this.walls[n].y, this.walls[n].width, this.walls[n].height);
}
}
Pong.Ball
The ball object needs to know how to move and how to be drawn:
Ball: {
initialize: function(pong) {
this.pong = pong;
this.radius = pong.cfg.ballRadius;
this.minX = pong.cfg.wallWidth + this.radius;
this.minY = pong.cfg.wallWidth + this.radius;
this.maxX = pong.width - pong.cfg.wallWidth - this.radius;
this.maxY = pong.height - pong.cfg.wallWidth - this.radius;
this.x = Game.random(this.minX, this.maxX);
this.y = Game.random(this.minY, this.maxY);
this.dx = (this.maxX - this.minX) / (Game.random(1, 10) * Game.randomChoice(1, -1));
this.dy = (this.maxY - this.minY) / (Game.random(1, 10) * Game.randomChoice(1, -1));
},
update: function(dt) {
this.x = this.x + (this.dx * dt);
this.y = this.y + (this.dy * dt);
if ((this.dx > 0) && (this.x > this.maxX)) {
this.x = this.maxX;
this.dx = -this.dx;
}
else if ((this.dx < 0) && (this.x < this.minX)) {
this.x = this.minX;
this.dx = -this.dx;
}
if ((this.dy > 0) && (this.y > this.maxY)) {
this.y = this.maxY;
this.dy = -this.dy;
}
else if ((this.dy < 0) && (this.y < this.minY)) {
this.y = this.minY;
this.dy = -this.dy;
}
},
draw: function(ctx) {
var w = h = this.radius * 2;
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI, true);
ctx.fill();
ctx.closePath();
}
}
You can find a multi-ball demo here
More…
- Introduction
- The Game Runner
- Bouncing Balls
- The Game Loop
- Collision Detection
- Computer AI
You can find the final game here and the code is here