Html5 game development example (3)

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 desired mesh background image from http://gamedesign.cc/html5games/pixel_grid.jpg.

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.

# 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.

[I have no time to roll over these two days. I will be here]