溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Html5怎樣開發(fā)乒乓Ping Pong游戲

發(fā)布時間：2021-10-08 15:05:59 來源：億速云 閱讀：110 作者：柒染 欄目：web開發(fā)

這篇文章給大家介紹Html5怎樣開發(fā)乒乓Ping Pong游戲，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

用jQuery操作游戲元素
我們已經(jīng)用jQuery初始化了球拍?，F(xiàn)在我們做一個如何使用jQuery安置游戲元素的實驗。
動起來-使用jQuery修改元素的位置
讓我們用網(wǎng)格背景來檢查我們游戲的元素位置：
1、我們繼續(xù)使用PingPong示例。
2、從這里下載我們需要的網(wǎng)格背景圖片。
3、在練習(xí)目錄下創(chuàng)建一個名字叫images的文件夾。
4、將下載的圖片放置到j(luò)images文件夾里。這個圖片將有助于我們以后檢查像素的位移。
5、接下來，在編輯器里打開index.html.
6、修改playground DIV的background屬性如下，使它包含像素網(wǎng)格圖片。

代碼如下:


#playground{
background: #e0ffe0 url(images/pixel_grid.jpg);
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}


7、 現(xiàn)在在瀏覽器里打開index.html，我們應(yīng)該看到的應(yīng)是：一個網(wǎng)格覆蓋在游戲背景上，我們現(xiàn)在能看到所有元素的位置了

發(fā)生了什么？
為方便調(diào)試，我們放置了一個叫pixel_grid.jpg的圖片到背景上。這張圖片有許多小網(wǎng)格，每10x10個網(wǎng)格組成一個100x100像素的大塊。通過這張圖像，我們就有了一把尺子，讓我們能衡量元素在屏幕上的位置。

關(guān)于Html5怎樣開發(fā)乒乓Ping Pong游戲就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手