Home  >  Article  >  Web Front-end  >  Html5 game development Ping Pong game example (1)

Html5 game development Ping Pong game example (1)

PHPz
PHPzforward
2016-05-16 15:50:012186browse

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.

Html5 game development Ping Pong game example (1)

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:

The code is as follows:
<!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

before the body end tag. The code is as follows:
<script src=&rdquo;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:

The code is as follows:
<script>
$(function(){
alert(&ldquo;Welcome to the Ping Pong battle.&rdquo;);
});
</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:

Html5 game development Ping Pong game example (1)

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:

The code is as follows:
<!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

Statement:
This article is reproduced at:ueexz. If there is any infringement, please contact admin@php.cn delete