I've been experimenting with the Javascript port of processing by John Resig and it seems like it could be quite good for rapidly prototyping games on the web. One of the great things about it is that it doesn't require any plugins or proprietary technologies like Flash, relying instead on the canvas element. There are some awesome demos of it in action on the website. I made a little fork which is optimised for the task of writing object oriented game code, which you can see in action below. Try clicking on the spinning asteroids.
My fork implements a basic mainloop into which you can inject new game entities with the function addEntity(); and a bunch of convenience methods which you can implement to draw your entities, or capture events like mouse clicks. As per processingjs, you can use processing's Java style syntax, or Javascript syntax instead. Here's the source to the above example:
size(400, 225);
function Asteroid(radius, x, y) {
// variables
this.x = x || random(0, width);
this.y = y || random(0, height);
this.angle = random(0, PI);
this.radius = radius || 40;
// velocities
this.angleV = random(-0.1, 0.1);
this.xV = random(-0.5, 0.5);
this.yV = random(-0.5, 0.5);
// structure of this shape
this.points = [];
this.randomPoint = function() {
return random(-this.radius/2, this.radius/2);
}
for (i=0; i<round(this.radius / 5); i++)
this.points.push([this.radius * Math.sin(i * PI / round(this.radius / 10)) + this.randomPoint(),
this.radius * Math.cos(i * PI / round(this.radius / 10)) + this.randomPoint()]);
this.poly = [];
this.collisionPoly = function() {
return this.poly;
}
this.mouseDown = function() {
if (this.radius > 25) {
addEntity(new Asteroid(this.radius / 3 * 2, this.x + this.randomPoint(), this.y + this.randomPoint()));
addEntity(new Asteroid(this.radius / 3 * 2, this.x + this.randomPoint(), this.y + this.randomPoint()));
}
delEntity(this);
}
this.update = function() {
// update all our state variables
this.angle += this.angleV;
this.x = (this.x + this.xV + width) % width;
this.y = (this.y + this.yV + height) % height;
// update our shape definition
for (n=0; n<this.points.length; n++) {
this.poly[n] = [this.points[n][0] * cos(this.angle) - this.points[n][1] * sin(this.angle) + this.x,
this.points[n][0] * sin(this.angle) + this.points[n][1] * cos(this.angle) + this.y];
}
}
this.draw = function() {
stroke(255);
noFill();
beginShape();
for (n=0; n<this.poly.length; n++) {
vertex(this.poly[n][0], this.poly[n][1]);
}
endShape(CLOSE);
}
}
addEntity(new Asteroid());
addEntity(new Asteroid());
addEntity(new Asteroid());
addEntity(new Asteroid());
addEntity(new Asteroid());
I you want to check out all of the code, including my modified version of processingjs, I've put my bzr repository online and you can get it like this:
bzr co http://mccormick.cx/dev/gameprocjs/
Or you can click here to download a zipfile of the source.
The main thing to be aware of is that any object added with addentity() should have an update() method, which will get called once per game loop to update your object's state, and a draw() method where you should put the code to draw your object. Other useful methods which you can implement include mouseDown() and mouseUp(), both of which require that you provide a method called collisionPoly() which returns a list of points that define a collision polygon for your game entity. Later I hope to add my Javascript recursive dimensional clustering implementation which will make it really simple to detect in-game collisions and will also require a method called getBoundingBox() which will make the collision detection and mouse-click-detection much more efficient.
Anyway, if you're interested in using this I'd love to hear from you!
