Comment: It is a ping-pong game with 2 players using a keyboard competition; in this chapter we will: 1. Prepare the development tool 2. Build our first game - Ping Pong 3. Learn to use the Jquery JavaScript library for basic positioning 4. Get keyboard input
In this chapter we will:
Prepare development tools
Build our first game - Ping Pong
Learn to use Jquery JavaScript library for basic positioning
Get keyboard input
Creating the Ping Pong game with scoring
The following screenshots of the game are the results of our study in this chapter. It is a ping pong game with 2 players playing on a keyboard.
So, let's start creating our game now.
Prepare for the development environment
HTML5 game development and website development are similar. We need a web browser and an excellent text editing tool.
Many text editing tools are excellent, just use what you like. If you don't have one, I recommend you to use Notepad++, a small and fast editing tool. Regarding browsers, we need a browser that supports HTML5, CSS3 features and can be provided with debugging tools.
There are several browsers to choose from: Apple Safari (), Google Chrome (), Mozilla Firefox (), and Opera (), all of which support the features we need.
Prepare HTML Documents
Every website, page, and HTML5 game starts with the default HTML document. And this HTML document starts with basic HTML code. We will also start our HTML5 game development with index.html.
Action time
We will create our HTML5 ping pong game from scratch. It sounds like we have to prepare everything ourselves, and luckily at least we were able to help us with the JavaScript library. Jquery is such a JavaScript library we will use it in all our examples. This will help simplify our JavaScript logic:
1. Create a new folder called pingpong
2. Create another folder called js in the folder
3. Download jQuery.
4. Select Production and click DownloadJquery.
5. Save jquery-1.7.1.min.js in the folder we created 2
6. Create a new file named index.html and save it to the folder created by 1.
7. Open the index.html file with a text editor and insert an empty HTML template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ping Pong</title>
</head>
<body>
<header>
<h1>Ping Pong</h1>
</header>
<footer>
This is an example of creating a Ping Pong Game.
</footer>
</body>
</html>
8. Refer to jQuery file before body end tag
<script src=js/jquery-1.7.1.min.js></script>
9. Finally, we want to make sure that Jquery is loaded successfully. We usually place the following code to check after the JQuery file before the body end tag:
<script>
$(function(){
alert(Welcome to the Ping Pong battle.);
});
</script>
10. Save index.html and open it with your browser. We should see the following prompt window. This means that our jQuery is set correctly:
what happened?
We just created a basic HTML5 page with JQuery and made sure jQuery is loaded correctly.
New HTML5 doctype
Both DOCTYPE and meta tags are simplified in HTML5.
In Html4.01, we declare that doctype requires the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
It's long, right? However, in HTML5, doctyp declaration is much simpler:
<!DOCTYPE html>
We haven't even declared the HTML version, which means that HTML5 will be compatible with previous HTML versions and future HTML versions will also support HTML5 versions.
Meta tags have also been simplified. We now use the following code to define the HTML character set:
<meta charset=utf-8>