The goal of this project is to develop a ping pong game based on the next requirements:
- the game should be played by two human players using the same keyboard
- the game must have an options panel to modify the ball speed, the paddle speed and the score limit for game over
- the players should have the possibility to start/pause the game
Also, we’ll use CSS3 style properties to style the HTML elements and jQuery framework, to create the game engine.
This is how the result of the project looks:
Files needed
First, we create a folder named pingpong in which the index.html and style.css files will be stored. Inside the pingpong folder another two folders will be created, images which will store the images needed (just a few, for the background) and js where the JavaScript file with the game engine will be placed (and eventually the jQuery library, if no alternative is used). Having these, we can start developing the project.
Content of the index.html file
In HTML5 syntax, the Document Type declaration is very simple:
|
1 |
<!DOCTYPE HTML> |
With this the UAs will know that the semantics of HTML5 (and previous versions of HTML) will be used. After this statement we can declare the root element html and its descendents head and body.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html lang="en">
<head>
<title>Ping Pong Battle - a game example using HTML5, CSS3 and JavaScript</title>
<base href="http://localhost/pingpong/">
<meta charset="utf8">
<meta name="generator" content="Notepad ++">
<meta name="author" content="Cristian Nistor">
<link href="style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js" type="text/javascript"></script>
</head>
<body>
<script src="js/html5game.pingpong.js" type="text/javascript"></script>
<script src="js/jquery.timers-1.2.js" type="text/javascript"></script>
</body>
</html> |
Inside the head element the title element should come first. After this, some metadata for the page is added: character set, the name of the author, the application’s name used to generate the page etc. The
base element allows authors to specify the document base URL for the purposes of resolving relative URLs, and the name of the default browsing context for the purposes of following hyperlinks. The element does not represent any content beyond this information.
A custom font will be used to style some text inside the page, thus the link element which points to a storage location for this custom font-type. After this, the jQuery library is loaded. Note that the JavaScript file with the game engine and a jQuery plugin are loaded after all HTML elements are declared (placed just before the ending body tag), due to the fact that undefined elements are not desired.
The body element will have the following content:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<div id="content">
<div id="stuff">
<div id="scoreboard">
<div class="score float-left tooltip">Player A: <span id="scoreA">00</span><span class="tool">To move paddle use <span class="green">W</span> key for going UP and <span class="green">S</span> key for going DOWN.</span></div>
<div class="float-left" id="startgame">
<form class="tooltip" id="startbutton">
<button id="start" type="button" class="button" name="start">Start/Resume</button>
<span class="tool">Press button to Start the game and use <span class="green">Space bar</span> to Pause the game.</span>
</form>
</div>
<div class="score float-right tooltip">Player B: <span id="scoreB">00</span><span class="tool">To move paddle use <span class="green">UP</span> key for going UP and <span class="green">DOWN</span> key for going DOWN.</span></div>
</div>
<div id="game">
<div id="playground">
<div id="paddleA" class="paddle"></div>
<div id="paddleB" class="paddle"></div>
<div id="ball"></div>
<div id="pausegame">
<p>The game is paused.<br /> Click the <span class="red">Start/Resume</span> button to resume the game</p>
</div>
<div id="gameover">
<p><span class="red">GAME OVER!</span></p>
</div>
<div class="clear-both"></div>
</div>
</div>
<div id="options">
<form id="saveoptions">
<label for="ballspeed">Ball Speed: </label> <input id="ballspeed" class="short" type="text" maxlength="1" name="ballspeed" value="5">
<label for="maxscore">Max Score: </label><input id="maxscore" class="short" type="text" maxlength="2" name="maxscore" value="09">
<label for="paddlespeed">Paddle Speed: </label><input id="paddlespeed" class="short" type="text" maxlength="1" name="paddlespeed" value="3">
<button id="save" type="button" class="button save" name="save">Save</button>
</form>
</div>
</div>
<div class="clear-both"></div>
</div> |
The container with the ID scoreboard will carry the “Start/Resume game” button and the score (which will be updated dynamically) board for the both players. In HTML5 there is an element named button which can be added to perform some action. Note the attribute type="button" which means that it does nothing if the button is clicked. If this is not specified, the page will be reloaded with every click in an undesirable loop.
The container with the ID playground will have the moving paddle for the players and the generic ball, and the container with the ID saveoptions will carry a form which based on user input will modify the “Ball Speed”, “Paddle Speed” and the value of “Max Score”.
Having this, we can now start developing the game engine.
