Pong - a simple game with HTML5, CSS3 and JQuery - part (1/2)
Article Metadata
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.
Introduction
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.
As the JQuery JavaScript library is needed, it can be downloaded from here: http://jquery.com
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.
<!DOCTYPE html>
<head>
<title>HTML5 Game Example - Pong game</title>
</head>
<body>
<header>
<h1>HTML5 Game Example - Pong game</h1>
</header>
</body>
</html>.
Then, we will continue and include the jQuery JavaScript file as follows:
<script src="/jquery-1.4.4.min.js"></script>
The game JavaScript code starts after the <body> tag with all the other content for the page.
</body>
The BODY tag and after that comes all the game content.
Now we will make sure that the page is fully ready before the JavaScript code will be executed. Otherwise, we might get an error when we try to access the element that is not yet loaded. jQuery gives a possibility to execute the code after the page is ready, this is done with the following piece of code:
});
Actually, what we just used is the following codes:
$(function(){
// code here.
});
<div id="game">
<div id="playarea">
<div id="gamepadA" class="gamepad"></div>
<div id="gamepadB" class="gamepad"></div>
<div id="pong"></div>
</div>
</div>
After this we will need some styling and will put the following styles within the head element.
<style>
#playarea{
background: #e0ffe0;
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
#pong {
background: #fbb;
position: absolute;
width: 20px;
height: 20px;
left: 150px;
top: 100px;
border-radius: 10px;
}
.gamepad {
background: #bbf;
left: 50px;
top: 70px;
position: absolute;
width: 30px;
height: 70px;
}
#gamepadB {
left: 320px;
}
</style>
(no comments yet)