Shulou(Shulou.com)06/03 Report--

This article introduces Html5 how to develop ping-pong Ping Pong games, the content is very detailed, interested friends can refer to, hope to be helpful to you.

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

What we are learning is a ping-pong game in which two players play a keyboard game.

So, let's start creating our game now.

Prepare the development environment

HTML5 game development is similar to website development. We need a web browser and a good text editing tool.

Many text editing tools are excellent, just use what you like. If you don't, I recommend that you use Notepad++, a small and fast editing tool. With regard to browsers, we need a browser that supports HTML5,CSS3 features and provides 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), all of which support the features we need.

Prepare the HTML document

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 our HTML5 game development from index.html.

Action time

We will create our HTML5 ping-pong game from scratch. It sounds like we have to prepare everything ourselves, but fortunately at least we can use the JavaScript library to help us. Jquery is such a JavaScript library and we will use it in all the 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, https://www.yisu.com/jiaoben/58.html.

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 called 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:

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 end tag of body

The code is as follows:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.