Html5游戲開發(fā)之乒乓Ping Pong游戲示例(三)_HTML5教程
推薦:HTML5之SVG 2D入門9—蒙板及mask元素介紹與應(yīng)用SVG支持多種蒙板特效,使用這些特性,我們可以做出很多很炫的效果,喜歡特效的朋友可不要錯過哦。至于中文中把mask叫做"蒙板"還是"遮罩"就不去區(qū)分了,這里都叫做蒙板吧,希望本文對你有所幫助
jQuery 介紹【這部分就不翻了,網(wǎng)上有很多的。如果有不懂的部分找度娘】
用jQuery操作游戲元素
我們已經(jīng)用jQuery初始化了球拍。現(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)格圖片。
復(fù)制代碼 代碼如下:hl5o.cn
#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像素的大塊。通過這張圖像,我們就有了一把尺子,讓我們能衡量元素在屏幕上的位置。
分享:利用HTML5中Geolocation獲取地理位置調(diào)用Google Map API在Google Map上定位本小菜剛開始學(xué)習(xí)HTML5,現(xiàn)在對其中的Geolocation頗感興趣,結(jié)合Google Map的API實現(xiàn)基本的地圖定位功能主要是由以下幾個步驟:獲取當(dāng)前地理位置、調(diào)用Google Map API獲取當(dāng)前位置信息
相關(guān)HTML5教程:
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開發(fā)的過程介紹
- HTML5 對各個標(biāo)簽的定義與規(guī)定:body的介紹
- 關(guān)于HTML5的安全問題開發(fā)人員需要牢記的
- 關(guān)于HTML5的22個初級技巧(圖文教程)
- 開發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫的SQL語句的使用方法
- HTML5實踐-圖片設(shè)置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略(CSP)簡介
- HTML5 Web存儲方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲案例應(yīng)用
- Bootstrap 學(xué)習(xí)分享
- input元素的url類型和email類型簡介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- html5配合css3實現(xiàn)帶提示文字的輸入框(擺脫js)
- 用HTML5實現(xiàn)手機(jī)搖一搖的功能的教程
- HTML5自定義data-* data(obj)屬性和jquery的data()方法的使用
- html5中為audio標(biāo)簽增加停止按鈕動作實現(xiàn)方法
- 如何讓IE9以下版本(ie6/7/8)認(rèn)識html5元素
- 基于Modernizr 讓網(wǎng)站進(jìn)行優(yōu)雅降級的分析
- html5 桌面提醒:Notifycations應(yīng)用介紹
- html5 web本地存儲將取代我們的cookie
- html5 Canvas畫圖教程(5)—canvas里畫曲線之a(chǎn)rc方法
- HTML5 Web存儲方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲案例應(yīng)用
- 相關(guān)鏈接:
- 教程說明:
HTML5教程-Html5游戲開發(fā)之乒乓Ping Pong游戲示例(三)
。