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.

Manipulate game elements with jQuery

We have initialized the racket with jQuery. Now let's do an experiment on how to use jQuery to install game elements.

Move-use jQuery to change the position of the element

Let's use the grid background to check the location of the elements of our game:

1. Let's continue to use the PingPong example.

2. Download the grid background picture we need from here.

3. Create a folder called images under the exercise directory.

4. Put the downloaded pictures in the jimages folder. This picture will help us to check the pixel displacement in the future.

5. Next, open index.html in the editor.

6. Modify the background property of playground DIV as follows to make it contain pixel grid images.

The code is as follows:

# playground {

Background: # e0ffe0 url (images/pixel_grid.jpg)

Width: 400px

Height: 200px

Position: relative

Overflow: hidden

}

7. Now open index.html in the browser, what we should see is: a grid covers the background of the game, and we can now see the position of all the elements

What happened?

To facilitate debugging, we put an image called pixel_grid.jpg on the background. This image has many small grids, each 10x10 grid forming a large block of 100x100 pixels. Through this image, we have a ruler that allows us to measure the position of the elements on the screen.

About Html5 how to develop ping-pong Ping Pong games to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.