Comments: 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 talk a little bit 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. <Header> the label defines the header (description) of the document and <footer> the label defines the footer of the 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
There is a reason to place JavaScript code after all the page content before the </body> label, instead of in the 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. B. insert it into the middle of the C. <body> label
D. </body> before the label
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:
<Divid = "game">
<Divid = "playground">
<Divid = "paddleA" class = "paddle"> </div>
<Divid = "paddleB" class = "paddle"> </div>
<Divid = "ball"> </div>
</Div>
</Div>
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:
<Style>
# 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;
}
</Style>
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 front of the </body> label of the index.html file:
The Code is as follows:
<Scriptsrc = "js/jquery-1.7.min.js"> </script>
<Scriptsrc = "js/html5games. pingpong. js"> </script>
[Translator friendly reminder: Try
The Code is as follows:
<Scriptsrc = "js/jquery-1.4.4.js"/>
<Scriptsrc = "js/html5games. pingpong. js"/>
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!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
