Home > Article > Web Front-end > Html5 game development Ping Pong game example (1)
Html5 game development Ping Pong game example (1)
- PHPzforward
- 2016-05-16 15:50:012198browse
In this chapter we will:
Prepare development tools
Build our first game - Ping Pong
Learn to use the Jquery JavaScript library for basic positioning
Get keyboard input
Creating the Ping Pong game with scoring
The game screenshot below is the result of our study in this chapter. It is a ping pong game where 2 players compete using a keyboard.
So, let’s start creating our game now.
Prepare the development environment
HTML5 game development and website development are similar. We need a web browser and a good text editing tool.
There are many excellent text editing tools, just use the one you like. If you don't have one, I recommend you to use Notepad, a small and fast editing tool. Regarding the browser, we need a browser that supports HTML5, CSS3 features and can provide us with debugging tools.
There are several browsers to choose from: Apple Safari (http://apple.com/safari/), Google Chrome (http://www.google.com/chrome/), Mozilla Firefox (http://mozilla.com/firefox/), and Opera (http://opera.com), these browsers all support the features we need.
PrepareHTMLDocumentation
Every website, page and Html5 game is created from The default HTML document starts. And this HTML document starts with basic HTML code. We will also start our HTML5 game development with index.html.
Time for action
We will create our HTML5 ping pong game from scratch. It sounds like we have to prepare everything ourselves, but luckily at least we can use JavaScript libraries to help us. Jquery is one such JavaScript library that we will use in all examples. This will help simplify our JavaScript logic:
1. Create a new folder called pingpong
2. Create a folder called js within the folder
3. Download jQuery
4. Select Production and click DownloadJquery.
5. Save jquery-1.7.1.min.js in our newly created 2 folder
6. Create a new file named index.html and save it to the folder created in step 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. Reference the jQuery file
<script src=”js/jquery-1.7.1.min.js></script>
9. Finally, we need to ensure that Jquery is loaded successfully. We usually place the following code 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 browse with to open it. We should see the following prompt window. This means our jQuery is set up correctly:
What happened?
We just created a basic HTML5 page with JQuery and made sure jQuery loaded correctly.
New HTML5 doctype
DOCTYPE and meta tags have been simplified in HTML5.
In Html4.01, we declared that the doctype requires the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
It’s quite long, right? However, in HTML5, the doctyp declaration is much simpler:
The code is as follows:
<!DOCTYPE html>
We don’t even declare the HTML version, which means that HTML5 will be compatible with previous HTML versions Future HTML versions will also support the HTML5 version. The
Meta tag has also been simplified. We now use the following code to define the character set of HTML:
The code is as follows:
<meta charset=utf-8>
Recommended learning: 《HTML Video Tutorial》《JavaScript Video Tutorial》