debugger;

Make the world a better place, one bug at a time.

HTML5 Game: PONG

HTML5 Game: PONG
Tuesday, 15 July 2014 by @giancarlo84

The Game

The Code

Initialization

Defining some constants in the beginning will help us to easily tweek the game if needed. MAXW and MAXH hold the game resolution, MAXVX is the maximum ball velocity. I will be using j5g3, my game engine.

Inline Resources

This is where we define the Spritesheet. A neat trick is to include assets using data URLs. This should probably only be done with smalls images since the strings can get pretty long.

We also cut our spritesheet and setup the game sprites and text.

The World

Here we extend the j5g3.Map to define our World class. This will render the game background.

Game Mechanics

The update function will take care of updating the ball position and resolving collissions.

AI

This is our AI function. It will basically follow the ball, and move the paddle using an accelaration factor.

What's next

The complete source code is hosted at github. Check out my other games here.

html5 game pong