Tip 2. Then, use the DIV node in the body to create a game platform. There are two beats and one ball on the game platform. Let's not talk about the code.
Headerandfooter
Html5 introduces many new features and improvements, one of which is semantics. Html5 adds new elements to enhance semantics. We only use two headers and footer. The Header (description) of the tag definition document ), The label defines the footer of a section or document. In typical cases, this element includes the Creator's name, document creation date, and/or contact information.
[Semantic tags provide meaningful information in HTML, instead of defining visual effects.]
Best place to place JavaScript code
We place the JavaScript code inTag, insteadThe region is justified.
Generally, the content loaded and rendered by the browser is from top to bottom. If JavaScript code is placed in the head area, the content of the Html document will not be loaded until all JavaScript code is loaded. In fact, all loading and rendering are blocked if the browser loads JavaScript code in the page. This is why we put JavaScript code at the end of the document, so that we can provide higher performance.
When translating this book, the latest jQuery version is 1.7 (originally: Atthetimeofwritingthisbook, thelatestjQueryversionis1.4.4. JQuery has the min version and the development version. You can choose either ). That's why the jQuery file name in our code example is jquery-1.7.min.js. This version number may be different from what you use, but its usage is the same, unless jQuery has a large modification to make the new version no longer backward compatible.
Run our code after the page is ready
Before running our JavaScript code, make sure that the page is ready. Otherwise, we will get an error when trying to access the element that has not been loaded. JQuery provides a method to ensure that the page is loaded. The Code is as follows:
The Code is as follows:
JQuery (document). ready (function (){
// Codehere.
});
In fact, we only need to write as follows:
The Code is as follows:
$ (Function (){
// Codehere.
});
This $ tag is short for jQuery. When we call (the word is called, zhuangbility) $ (something), we are actually in callingjQery (something ).
$ (Function_callback) is another abbreviation of readyevent.
It is the same as the following code:
The Code is as follows:
$ (Document). ready (function_callback );
Similarly, it is the same as the following:
The Code is as follows:
JQuery (ducument). ready (function_callbak );
Quizzes
1. Which location is most suitable for storing JavaScript code?
A.Before tag
B. insertElement.
C.Label
D.Before tag
Create PingPong game elements
We are ready to create the PingPong game.
Get started
1. We will continue our jqueryinstallation example and open index.html in the editor.
2. Create a game platform using a DIV node in the body. The game platform has two beats and one ball:
The Code is as follows:
3. Now we have built the game objects and now give them a style. Place the code in the head element:
The Code is as follows:
4. In the last part, we place the JavaScript logic after jQuery reference. We write it into a separate file, because our code is getting bigger and bigger. Therefore, we need to create a file named html5games. pingpong. js in the js folder.
5. After we have prepared JavaScript files, we need to connect them to our Html files. Place the following code in the index.html FileBefore tags:
The Code is as follows:
Script
Script
[Translator friendly reminder: Try
The Code is as follows:
You will find that writing according to specifications will avoid a lot of trouble]
6. Put the game logic in html5games. pingpong. js. The following is our only logic. initialize the racket:
The Code is as follows:
// Codeinside $ (function () {}willrunafterthedomisloadedand
Ready
$ (Function (){
$ ("# PaddleB" ).css ("top", "20px ");
$ ("# PaddleA" ).css ("top", "60px ");
});
7. Now let's test our results in the browser. To open the index.html file in the browser, we should see the following picture:
What happened?
We have two rackets and one ball in our game. We also used jQuery to initialize the positions of two rackets.
[This is the end of today. I will be immediately following the jQuery selector and CSS functions. If you have any errors or questions, please leave a message.]
Seeing your comments is my greatest motivation!
