Html5 game development-Ping Pong game example (3)

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.