Creating the Ping Pong game with scoring下面的游戲截圖就是我們本章學習后的成果。它是一款乒乓游戲,有2個玩家使用一個鍵盤比賽。那么,現在就讓我們開始創建我們的游戲。準備開發環境HTML5游戲開發和網站開發是相似。我們需要一個web瀏覽器和一個優秀的文本編輯工具。文本編輯工具很多都很優秀,使用你喜歡的就好。如果你沒有,我推薦你使用Notepad++這款體積小,速度快的編輯工具。關于瀏覽器,我們需要一款支持HTML5,CSS3特性和能過提供給我們調試工具的瀏覽器。這有幾個可供選擇的瀏覽器:Apple Safari (http://apple.com/safari/), Google Chrome (http://www.google.com/chrome/),Mozilla Firefox (http://mozilla.com/firefox/), and Opera (http://opera.com),這幾款瀏覽器都支持我們需要的特性。準備HTML文檔每一個網站、頁面和Html5游戲都是從默認的HTML文檔開始。而這個HTML文檔是從基本的HTML代碼開始的。我們也將從index.html開始我們的HTML5游戲開發。行動時間我們將從頭開始創建我們的HTML5乒乓游戲。這聽起來是要我們自己準備所有的事情,幸運的是至少我們能夠使用JavaScript庫幫助我們。Jquery 就是這樣的JavaScript庫我們將在所有的例子中使用它。這將有助于簡化我們的JavaScript邏輯:1、 創建一個叫pingpong的新文件夾2、 在文件夾里再創建一個叫js的文件夾3、 下載jQuery,http://www.phpstudy.net/jiaoben/58.html。4、 選擇Production并點擊DownloadJquery.5、 將jquery-1.7.1.min.js保存在我們新創建的2的文件夾里6、 創建一個名叫index.html的新文件并保存到1創建的文件夾里。7、 用文本編輯器打開index.html文件并插入空的HTML模版:
復制代碼代碼如下: !DOCTYPE html html lang="en" head meta charset="utf-8" title Ping Pong /title /head body header h1 Ping Pong /h1 /header footer This is an example of creating a Ping Pong Game. /footer /body /html