Html5 PingPong game development example (1) _ html5 tutorial skills-

It is a ping-pong game with two players playing a keyboard. In this section we will: 1. prepare development tools 2. build our first game-PingPong3. learn to use the JqueryJavaScript library for basic positioning 4. get keyboard input 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://www.jb51.net/jiaoben/58.html.

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:

The Code is as follows:

Ping Pong

Ping Pong


This is an example of creating a Ping Pong Game.

8. Reference The jQuery file before the body end tag

The Code is as follows: