In this section, we will:
Prepare development tools
Build our first game-Ping Pong
Learn how to use the Jquery JavaScript library for basic positioning
Get keyboard input
Creating the Ping Pong game with scoring
The following games are what we learned in this chapter. It is a ping-pong game with two players playing on one keyboard.
Now let's start creating our game.
Prepare the development environment
HTML5 game development is similar to website development. We need a web browser and an excellent text editing tool.
Many text editing tools are excellent. You can use what you like. If you don't have one, I recommend you use Notepad ++, a small and fast editing tool. For browsers, we need a browser that supports HTML5, CSS3, and debugging tools.
There are several available browsers: 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 support the features we need.
PreparationHTMLDocument
Every website, page, and Html5 game starts with the default HTML document. This HTML document starts with the basic HTML code. We will also start developing our HTML5 games from index.html.
Action time
We will create our HTML5 ping-pong game from scratch. It sounds like we have to prepare everything ourselves. Fortunately, at least we can use the JavaScript library to help us. Jquery is such a JavaScript library that we will use in all examples. This will help simplify our JavaScript logic:
1. Create a new folder named pingpong
2. Create another js folder in the folder.
3. Download jQuery, http://jquery.com.
4. Select Production and click DownloadJquery.
5. Save the jquery-1.7.1.min.js in the folder of our new 2.
6. Create a new file named index.html and save it to the folder created in 1.
7. Open the index.html file with the render 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
</Header>
<Footer>
This is an example of creating a Ping Pong Game.
</Footer>
</Body>
</Html>
8. Reference The jQuery file before the body end tag
<Script src = "js/jquery-1.7.1.min.js> </script>
9. Finally, make sure that Jquery is loaded successfully. We usually put the following code check after the JQuery file before the body ends the tag:
<Script>
$ (Function (){
Alert ("Welcome to the Ping Pong battle .");
});
</Script>
10. Store index.html and open it in a browser. We should see the following prompt window. This means that jQuery is correctly set:
What happened?
We just used JQuery to create a basic HTML5 page and ensure that jQuery is loaded correctly.
New HTML5 doctype
In HTML5, DOCTYPE and meta tags are simplified.
In Html4.01, the following code is required to declare doctype:
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/
TR/html4/strict. dtd ">
It's long, right? However, in HTML5, The doctyp statement is much simpler:
<! DOCTYPE html>
We didn't even declare the HTML version, which means that HTML5 will be compatible with the previous HTML version, and the future HTML version will also support the HTML5 version.
Meta Tags are also simplified. Now we use the following code to define the HTML character set:
<Meta charset = UTF-8>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
