溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹Html5怎樣開發乒乓Ping Pong游戲，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
用jQuery操作游戲元素
我們已經用jQuery初始化了球拍。現在我們做一個如何使用jQuery安置游戲元素的實驗。
動起來-使用jQuery修改元素的位置
讓我們用網格背景來檢查我們游戲的元素位置：
1、我們繼續使用PingPong示例。
2、從這里下載我們需要的網格背景圖片。
3、在練習目錄下創建一個名字叫images的文件夾。
4、將下載的圖片放置到jimages文件夾里。這個圖片將有助于我們以后檢查像素的位移。
5、接下來，在編輯器里打開index.html.
6、修改playground DIV的background屬性如下，使它包含像素網格圖片。
代碼如下:
#playground{
background: #e0ffe0 url(images/pixel_grid.jpg);
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
7、 現在在瀏覽器里打開index.html，我們應該看到的應是：一個網格覆蓋在游戲背景上，我們現在能看到所有元素的位置了
發生了什么？
為方便調試，我們放置了一個叫pixel_grid.jpg的圖片到背景上。這張圖片有許多小網格，每10x10個網格組成一個100x100像素的大塊。通過這張圖像，我們就有了一把尺子，讓我們能衡量元素在屏幕上的位置。
關于Html5怎樣開發乒乓Ping Pong游戲就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
