Html5遊戲開發之乒乓Ping Pong遊戲範例(三)_html5教學技巧

jQuery 介紹
【這部分就不翻了，網路上有很多的。如果有不懂的部分找度娘】
用jQuery操作遊戲元素
我們已經用jQuery初始化了球拍。現在我們做一個如何使用jQuery安置遊戲元素的實驗。
動起來-使用jQuery修改元素的位置
讓我們用網格背景來檢查我們遊戲的元素位置：
1、我們繼續使用PingPong範例。
2、從這裡下載我們需要的網格背景圖。
3、在練習目錄下建立一個名字叫images的資料夾。
4、將下載的圖片放置到jimages資料夾裡。這張圖片將有助於我們以後檢查像素的位移。
5、接下來，在編輯器裡開啟index.html.
6、修改playground DIV的background屬性如下，使它包含像素網格圖片。

複製程式碼

程式碼如下:

#play{ e0ffe0 url(images/pixel_grid.jpg);
width: 400px;
height: 200px;
position: relative;
overflow: hiddend
position: relative;
overflow: hidden
; >7、 現在在瀏覽器裡打開index.html，我們應該看到的應該想以下截圖：一個網格覆蓋在遊戲背景上，我們現在能看到所有元素的位置了

發生了什麼事？
為方便調試，我們放置了一個叫pixel_grid.jpg的圖片到背景上。這張圖片有許多小網格，每10x10個網格組成一個100x100像素的大塊。透過這張圖像，我們就有了一把尺子，讓我們能衡量元素在螢幕上的位置。