Please note: this blog has been migrated to a new location at https://jakesgordon.com. All new writing will be published over there, existing content has been left here for reference, but will no longer be updated (as of Nov 2023)

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.

read more…

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.

read more…

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).

read more…

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.

read more…

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.

read more…

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:

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!