This post has been migrated from an old server & blog system. Some things may look strange, such as formatting. Some links and images may be broken. I will try getting around to fixing it ASAP.
Omnomnom, Game Jam
published 27 Oct 2010
So today was the Level Up! Open Web Game Jam at Seneca@York, and it was quite the educational experience. I ended up starting to make a game before realizing I was going about it entirely the wrong way!
Before my failed game attempt, I was playing around with Processing.js and seeing what I can do with it after only a few minutes of looking at documentation. The results of my first experiment are here. Here is the P.js code I used:
[js]void setup() {
size(250, 250);
noStroke();
}
void draw() {
background(#CCCCCC);
int fColor = 50;
for(int i = 0; i <= 200; i += 50){
fill(fColor);
rect(i, i, 50, 50);
fColor += 25;
}
}[/js]
The setup() method gets called first: the size of the HTML5 canvas is set to 250 by 250 pixels, and shape borders are turned off with the noStroke() method. Then the draw() method runs, and a for loop draws 5 squares diagonally across the canvas. It was very cool to draw on the canvas so easily.
My attempt at a game can be found here. This is more of a proof-of-concept than a real game. The character, Stickguy, can be moved left and right with the left and right arrow keys. Unfortunately, he cannot stop himself from bouncing off the floor and ceiling... oh noes! The main problem with this proof-of-concept is that there is no data being manipulated in the 'game', just graphics:
[js]void setup() {
size(cWidth, cHeight);
noStroke();
frameRate(60);
}
void draw() {
// erase last positon
clear();
// re-draw level
drawLevel();
// draw new position
fill(#666666);
rect(pX, pY, pW, pH);
bounce();
keyPressed();
}
void keyPressed(){
if(keyPressed){
if (keyCode == 39){
if (pX < cWidth - pW) pX += 2;
}
else if (keyCode == 37){
if (pX > 0) pX -= 2;
}
}
}
void drawLevel(){
background(#000000);
fill(#CCCCCC);
rect(0, 0, 500, 10); // top
rect(0, 490, 500, 10); // bottom
}
void bounce(){
if(down == 0){
pY--;
if(pY <= 10) down = 1;
}
else{
pY++;
if(pY >= 490 - pH) down = 0;
}
}[/js]
As you can see, there is no real data in the program... all the arrow keys do is control where Stickguy is being drawn on the canvas. However, no 'Stickguy' exists in the program itself, so there is no real way to have him interact with the game world, something else which is exists purely as something drawn on a canvas and nowhere else. So I learned an important lesson of how not to make a game! Now that I've learned a few things, I plan on trying to make something fun and that is actually, you know... a real game. I recently came across an excellent set of links to libraries and engines that would make writing an HTML5 game much easier, and that can be found right here.
Big thanks to Andor, Cathy and Al on the interesting talks and for hosting the event. The talk about the the Audio API; I can see many possibilities on how to use it in online web games. Hopefully more people show next year!