Experiments in HTML5: canvas 2

So after knocking out a quick example yesterday of an HTML5 canvas app, I ended up making pong. This is the typical "hello world" game to make, and I've done them before so I was familiar with the already pretty simple logic.

Here is the high level breakdown:

• has two "classes", paddleObj and ballObj
• there are two instances of the paddleObj, one for each side
• the objects will keep track of the location and has helper functions clear, draw
• the ballObj acts much like a controller, in that is can reset the board, performs collision detection and all the logic involved, and maintains its own automatic movements with a move function
• the move function drives the game, it is set on interval of 100ms
• has a toggleGame function to start and stop the interval when needed
• use a direction variable as negative or positive and a change variable for each axis (x and y)
• reverse appropriate direction on collision, increase change variables on paddle collision
• if ball is past either paddle, reset board, increase score, toggleGame to pause
• W, S control player 1 (left) and up, down control player2 (right), click or space control toggleGame

There isn't too much to a pong game. Regardless of the language, the "objects" will remain the same, the rules are the same, etc. Some helper notes: 

• store x,y,width and height for sprites
• make (x+width) and (y+height) your best friends
• you need an "engine" to drive motion
• remember to check the y's on the paddle for collision detection

Some of the more customizable things I have found:

• How to handle paddle bounce backs (include paddle momentum, increase speed each time?)
• How fast should everything move?
• How to track score and what is a winning score?
• Graphics, incentives, etc

Unfortunately, I only have weekends to really work on these projects, so it was more important for me to get something up and working than to make it polished. I hate to pass out my "work" when it is hardly ideal, but then again when is a program ever really "ideal" and I am still learning this stuff. So keep in mind that this is not optimized, fully debugged, browser tested, source cleaned up, fully commented, etc, but it DOES WORK! (in all non-IE browsers, except maybe 9) 

Have a look at the source code here.

And the demo here.

I also thought it was pretty funny that I used plain old javascript (POJS) for the entire game, but used jquery for the show/hide form. I gotta get that out of there haha.

I am also working on an iPhone version that was pretty much complete, but doesn't seem to like running on the server like it did running locally. If anyone has any iPhone dev experience and knows what I'm missing (for example evt.preventDefault() doesn't work), I'm initially guessing its a cross-script thing? But I am also having an issue with the graphics not getting cleared entirely, leaving a "frame-trail", like the outline of the object being left behind where it moves.

Hope you like and come on people leave me some comments, I'm dying for feedback here!