In this tutorial, we’ll create a clone of the classic game, Pong, in HTML5, using the EaselJS library. The game will have multiple screens, sound effects, and a (very simple) AI opponent.
Step 1: Brief Overview
Using pre-made graphics we will code an entertaining Pong game in HTML5 using the EaselJS library, which provides a Flash-like interface for the HTML5 canvas. For an introduction to EaselJS, see this Activetuts+ article.
The player will be able to control a paddle using the mouse and play against the computer-controller opponent to get points.
Step 2: Interface
A simple interface with a neo-futuristic style will be used; this involves multiple shapes, buttons, bitmaps and more.
The graphics required for this tutorial can be found in the attached download.
Step 3: Get EaselJS
The EaselJS library will be used to build our game, make sure you read the Getting Started tutorial if you’re new to this library.
You can download the latest version of EaselJS from its official website. However, this may be incompatible with the code here, so I suggest using the version of the library that is included with the source download.
Step 4: HTML Structure
Let’s prepare our HTML document. We’ll start with the very basics, just a barebones outline:
<!DOCTYPE html> <html> <head> <title>Pong</title> </head> <body> </body> </html>
Step 5: Hide Mobile Highlight
We must add a little bit of CSS too, to remove the default highlight that’s applied when you tap on an element in a mobile browser. Without this, the mobile experience would decrease drastically.
<!DOCTYPE html>
<html>
<head>
<title>Pong</title>
<style>*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style>
</head>
<body>
</body>
</html>