Html5 game development-Ping Pong game example (3)

Comments: We have initialized the racket with jQuery. Now let's create an experiment on how to use jQuery to place game elements and use grid backgrounds to check the element positions of our games. If you are interested, let us know and wish you a happy game development experience.JQuery Introduction
[This part will not be turned over. There are many online websites. If you do not understand some of them, find du Niang]
Operate game elements with jQuery
We have initialized the racket with jQuery. Now let's do an experiment on how to use jQuery to place game elements.
Get started-use jQuery to modify the element location
Let's use the grid background to check the location of our game's Elements:
1. We will continue to use the PingPong example.
2. Download the grid background image from here.
3. Create a folder named images in the exercise directory.
4. Place the downloaded image in the jimages folder. This image will help us to check the pixel displacement later.
5 seconds later, open index.html in the editor.
6. Modify the background attribute of playground DIV to include a Pixel Grid image.

The Code is as follows:
# Playground {
Background: # e0ffe0 url (images/pixel_grid.jpg );
Width: 400px;
Height: 200px;
Position: relative;
Overflow: hidden;
}

7. Now index.html is opened in the browser. We should see the following: a grid covers the game background. Now we can see the location of all elements.

What happened?
For convenience, we place an image named pixel_grid.jpg on the background. This image has many small grids. Each 10x10 grids constitute a large block of X pixels. With this image, we have a ruler that allows us to measure the position of elements on the screen.