Html5 game development Ping Pong game example (3)_html5 tutorial skills

Introduction to jQuery
[I won’t go through this part, there are many on the Internet. If you don’t understand anything, please contact me]
Use jQuery to operate game elements
We have initialized the racket with jQuery. Now let's do an experiment on how to use jQuery to place game elements.
Move it - use jQuery to modify the position of elements
Let's use the grid background to check the position of elements in our game :
1. Let's continue to use the PingPong example.
2. Download the grid background image we need from here.
3. Create a folder named images in the exercise directory.
4. Place the downloaded images into the jimages folder. This image will help us later check the displacement of pixels.
5. Next, open index.html in the editor.
6. Modify the background attribute of the playground DIV as follows so that it contains a pixel grid image.

Copy code

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 the following screenshot: a grid is overlaid on the game background, and we can now see the positions of all elements

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