Pong - a simple game with HTML5, CSS3 and JQuery - part (1/2)
This article explains how to use HTML5, CSS3 and JQuery to create a simple web browser game
Enter article metadata as described below. Note that this template can be placed anywhere in the article.
In this article we will create a simple game of Pong, or "Ping Pong", using HTML5, CSS3 and with the help of JQuery library.
For the game we first create a subdirectory, "game", under which all the game files will be located.
After you have downloaded it, place the file under the "game" subdirectory.
The main game HTML file starts with the DOCTYPE setting that in HTML5 will only need to be the following as the doctype is simplified in HTML5.
<title>HTML5 Game Example - Pong game</title>
<h1>HTML5 Game Example - Pong game</h1>
The BODY tag and after that comes all the game content.
Actually, what we just used is the following codes:
// code here.
<div id="gamepadA" class="gamepad"></div>
<div id="gamepadB" class="gamepad"></div>
After this we will need some styling and will put the following styles within the head element.