×
Namespaces

Variants
Actions

Pong - a simple game with HTML5, CSS3 and JQuery - part (1/2)

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: Maveric (30 Dec 2011)
Last edited: hamishwillee (04 May 2012)

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.
});
For the game elements in DOM we will need to have some
nodes created. The following code will add two paddles and one ball within the game area. Also, the game area will be within the game.
<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>

Summary

Add categories below. Remove Category:Draft when the page is complete or near complete
This page was last modified on 4 May 2012, at 04:03.
114 page views in the last 30 days.