點評：它是一款乒乓遊戲，有2個玩家使用一個鍵盤比賽;在這一章節我們將:1.準備開發工具2.建立我們的第一個遊戲-Ping Pong 3.學習使用Jquery JavaScript庫做基本定位4.獲取鍵盤輸入
在這一章節我們將：
準備開發工具
建立我們的第一個遊戲-Ping Pong
學習使用Jquery JavaScript庫做基本定位
獲取鍵盤輸入
Creating the Ping Pong game with scoring
下面的遊戲截圖就是我們本章學習後的成果。它是一款乒乓遊戲，有2個玩家使用一個鍵盤比賽。
那麼，現在就讓我們開始創建我們的遊戲。
準備開發環境
HTML5遊戲開發和網站開發是相似。我們需要一個web瀏覽器和一個優秀的文本編輯工具。
文本編輯工具很多都很優秀，使用你喜歡的就好。如果你沒有，我推薦你使用Notepad++這款體積小，速度快的編輯工具。關於瀏覽器，我們需要一款支持HTML5，CSS3特性和能過提供給我們調試工具的瀏覽器。
這有幾個可供選擇的瀏覽器：Apple Safari (), Google Chrome (),Mozilla Firefox (), and Opera ()，這幾款瀏覽器都支持我們需要的特性。
準備HTML文檔
每一個網站、頁面和Html5遊戲都是從默認的HTML文檔開始。而這個HTML文檔是從基本的HTML代碼開始的。我們也將從index.html開始我們的HTML5遊戲開發。
行動時間
我們將從頭開始創建我們的HTML5乒乓遊戲。這聽起來是要我們自己準備所有的事情，幸運的是至少我們能夠使用JavaScript庫幫助我們。 Jquery 就是這樣的JavaScript庫我們將在所有的例子中使用它。這將有助於簡化我們的JavaScript邏輯：
1、 創建一個叫pingpong的新文件夾
2、 在文件夾裡再創建一個叫js的文件夾
3、 下載jQuery，。
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>
8、在body結束標籤前引用jQuery文件
<script src=js/jquery-1.7.1.min.js></script>
9、 最後，我們要確保Jquery載入成功.我們通常在body結束標籤前JQuery文件之後放置以下代碼檢查：
<script>
$(function(){
alert(Welcome to the Ping Pong battle.);
});
</script>
10、保存index.html並用瀏覽器打開它。我們應該看到以下的提示窗口。這意味著我們的jQuery是正確設置的：
發生了什麼？
我們只是用JQuery創建了一個基本的HTML5頁面，並確保正確加載了jQuery。
新的HTML5 doctype
在HTML5中DOCTYPE和meta tags都得到了簡化.
在Html4.01，我們聲明doctype需要以下代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
它很長，對吧？然而在HTML5，doctyp聲明就簡單了許多：
<!DOCTYPE html>
我們甚至沒有聲明HTML的版本，這意味這HTML5將兼容以前的HTML版本而未來的HTML版本也同樣會支持HTML5的版本。
Meta標籤也同樣的到了簡化，我們現在使用以下的代碼定義HTML的字符集：
<meta charset=utf-8>