Javascript Pong
Sat, May 14, 2011
When I was younger, I loved making games. They were all half finished of course, but the passion was there, first on the C64, then the Amiga… but then I got a PC (and a job) and took a left-turn into a career doing commercial software development and never did get to finish any of my games.
I really enjoy my day job, but I still think about building games. Well, this week I decided no more procrastinating - I am going to ship a finished game!
Since it would have to be a spare-time weekend project I figured I should pick something easy… and what better way than to start at the beginning?
Yes. It’s the moment you have all been waiting for…
HERE IS PONG!
I broke the game out into 5 sections, with a demo for each…
The Game Runner
In part1, I introduce the GameRunner. A minimal framework for creating canvas games, it provides a
60fps double buffered canvas game loop, allowing the game itself to concentrate on updating its game state whenever the update()
method is called and rendering itself every time the draw() method is called.
Bouncing Balls
In part2, I use the GameRunner framework to display a simple bouncing ball example, showing the separation of the GameRunner from the Pong game itself.
The Game Loop
In part3, I introduce the game loop. Starting with a basic menu, waiting for user input to start a game, running the game until there is a winner, or the user abandons it, and then going back to the menu (and repeat).
Collision Detection
In part4, I get to the meat of the game itself, implementing the collision detection between paddle and ball makes the game playable for the first time. There is no computer AI, but a 2 player game is now possible.
Computer AI
In part5, I implement a rudimentary AI for the computer player. Allowing us to run single player games or even watch the computer playing itself.
Conclusion
Pong is a fairly trivial game, but still requires a little infrastructure to do right. This is a slightly over-engineered version, but still there is more that could have been added:
-
Touch events - for mobile browsers we need a different design for our user input, perhaps we could support touch events for the paddle movements.
-
CSS @media queries - we should probably scale the pong game canvas based on the users screen real estate. (UPDATE: this was added at the last minute, play around with your browser window size and see what happens)
-
requestAnimationFrame - even double buffered and locked at 60fps there is still a little stutter in the animation, this might be down to garbage collection, or vsync issues beyond our control, but also using a low fidelity timing mechanism such as setInterval is not going to work for serious games. Modern browsers are starting to implement requestAnimationFrame to allow us to get finer grain control over our game loops… but its not quite ready for prime time yet.
-
Err, Fun? - its just pong, but we could probably spruce it up a bit - how about multi-ball pong ? or pong with lazers ?
This implemetation gives us a base framework with which to grow into other simple games in the future. I would like to develop a couple more little games over the coming months. Assuming that I’m most likely to finish something if its pretty small, I imagine I could make a canvas version of some older classic games like breakout, snakes, tetris, hero, thrust, boulderdash etc.
But for now, its just Pong!