Html5游戲開發(fā)之乒乓Ping Pong游戲示例(三)_HTML5教程

推薦：HTML5之SVG 2D入門9—蒙板及mask元素介紹與應(yīng)用
SVG支持多種蒙板特效，使用這些特性，我們可以做出很多很炫的效果,喜歡特效的朋友可不要錯(cuò)過哦。至于中文中把mask叫做"蒙板"還是"遮罩"就不去區(qū)分了，這里都叫做蒙板吧，希望本文對(duì)你有所幫助

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


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

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

分享：利用HTML5中Geolocation獲取地理位置調(diào)用Google Map API在Google Map上定位
本小菜剛開始學(xué)習(xí)HTML5，現(xiàn)在對(duì)其中的Geolocation頗感興趣，結(jié)合Google Map的API實(shí)現(xiàn)基本的地圖定位功能主要是由以下幾個(gè)步驟：獲取當(dāng)前地理位置、調(diào)用Google Map API獲取當(dāng)前位置信息