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

Html5 how to develop ping-pong Ping Pong games, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

Headerandfooter

Html5 introduces many new features and improvements, one of which is semantics. Html5 adds new elements to enhance semantics. We only use two now, header and footer. The tag defines the header (introduction) of the document, and the tag defines the footer of the section or document. In a typical case, this element contains the name of the creator, the date the document was created, and / or contact information.

[semantic tags provide meaningful information in HTML, not just define visual effects.]

The best place to place JavaScript code

There is a reason why we put the JavaScript code after all the contents of the page before the tag, rather than into the area.

Typically, browsers load and render content from top to bottom. If you place the JavaScript code in the head area, the contents of the Html document will not be loaded until all the JavaScript code has been loaded. In fact, all loads and renderings are blocked if the browser loads the JavaScript code in the page. This is why we put the JavaScript code at the end of the document so that we can provide higher performance.

At the time of translation of this book, the latest jQuery version is 1.7 (the original word is: Atthetimeofwritingthisbook,thelatestjQueryversionis1.4.4. JQuery is available in both min and development versions, and you can choose what you want. This is why the name of the jQuery file in our code example is jquery-1.7.min.js. This version number may not work with your version, but the usage is the same unless there are major changes to jQuery so that the new version is no longer backward compatible.

Run our code when the page is ready

We need to make sure the page is ready before running our JavaScript code. Otherwise, we get an error when we try to access an unloaded element. JQuery provides us with a way to ensure that the page is loaded. The code is as follows:

The code is as follows:

JQuery (document) .ready (function () {

/ / codehere.

});

In fact, all we need to do is write:

The code is as follows:

$(function () {)

/ / codehere.

});

This $tag is an abbreviation for jQuery. When we calling (the word means to call, zhuangbility) $(something), we are actually in callingjQery (something).

Function_callback is another abbreviation for readyevent (event).

It is the same as the following code:

The code is as follows:

(document) .ready (function_callback)

Again, the same as the following:

The code is as follows:

JQuery (ducument) .ready (function_callbak)

Quiz

1. Which location is the most suitable for placing JavaScript code?

a. Before the label

b. Insert into the middle of the element.

c. After the label

d. Before the label

Create elements of a PingPong game

We are ready to create PingPong games.

Move.

1. We will continue our jQuery installation example and open index.html in the editor.

2. Then, create a game platform with a DIV node in body, where there are two rackets and a ball:

The code is as follows:

3. Now that we have built the objects of the game, we now give them styles. Place the code in the head element:

The code is as follows:

# playground {

Background:#e0ffe0

Width:400px

Height:200px

Position:relative

Overflow:hidden

}

# ball {

Background:#fbb

Position:absolute

Width:20px

Height:20px

Left:150px

Top:100px

Border-radius:10px

}

.paddle {

Background:#bbf

Left:50px

Top:70px

Position:absolute

Width:30px

Height:70px

}

# paddleB {

Left:320px

}

In the last part, we put the JavaScript logic after the jQuery reference. We write it in a separate file because our code will get bigger and bigger. Therefore, we need to create a file named html5games.pingpong.js in the js folder.

5. After we have prepared the JavaScript files, we need to connect them to our Html files. Place the following code before the label of the index.html file:

The code is as follows:

[translator's friendly Tip: try

The code is as follows:

You will find that writing according to the rules will avoid a lot of trouble.]

6. We put the logic of the game into html5games.pingpong.js. Here is our only logic now, initializing the racket:

The code is as follows:

/ / codeinside$ (function () {} willrunaftertheDOMisloadedand)

Ready

$(function () {)

("# paddleB") .css ("top", "20px")

("# paddleA") .css ("top", "60px")

});

Now let's test our results in a browser. When we open the index.html file in the browser, we should see a screenshot similar to the following:

What happened?

There are two rackets and one ball in our game. We also initialized the positions of two rackets using jQuery.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

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.