1.WebSocket是HTML5標准的一部分，Web頁面可以用它來持久連接到socket服務器上。該接口提供了浏覽器與服務器之間的事件驅動型連接，這意味著客戶端不必再每隔一個時間段就需要向服務器發送一次新的數據請求。當有數據需要更新時，服務器就可以直接推送數據更新給浏覽器。該功能的好處之一就是玩家之間可以實時進行交互。當一個玩家做了些事，就會向服務器發送數據，服務器將廣播一個事件給其他已連接的所有浏覽器，讓它們知道玩家做了什麼。這樣就使得制作HTML5網絡游戲成為可能。
2.隨著現代浏覽器對HTML5元素的原生支持，將不再需要用戶預裝第三方插件就可以玩游戲了。
3.我們把JavaScript代碼放置在body結束標簽之前且在頁面所有內容之後。下面介紹把代碼放在這個位置，而不是以前的兩個標簽之間的原因。
4.通常，浏覽器是自上而下加載和渲染內容的。如果JavaScript代碼放置在head部分裡，會導致JavaScript代碼已加載完，而文檔內容可能還沒有加載完的情況出現。事實上，如果浏覽器在頁面中間加載JavaScript代碼，就會中斷正在進行的渲染和加載。這就是盡可能把JavaScript代碼放到頁面底部的原因。通過這種方式，可以提升加載內容的性能。
5.jQuery為我們提供了在頁面加載完成後才執行代碼的方法，如下：
jQuery（document）.ready（function （）
{
//這裡是代碼
}）；
$(function ()
{
//這裡是代碼
});
6.使用jQuery比單純使用JavaScript有如下幾個優勢：
使用jQuery可以用更短的代碼來選擇DOM節點並對其進行修改。
短代碼更有利於代碼的閱讀，這對游戲開發至關重要，因為游戲開發往往包含大量的代碼。
寫短代碼可以加快開發速度。
使用jQuery庫可以讓代碼無須做額外的調整就可以支持所有主流浏覽器；jQuery對純JavaScript代碼進行包裝以達到自身實現跨浏覽器的能力。
7.給鍵盤上的每一個按鍵都分配了一個數字，通過獲取數字，我們可以找到是哪個鍵被按下。通過監聽jQuery的keydown事件監/聽/器，在事件觸發時event對象會包含按鍵代碼（key code）。可以通過調用按鍵event對象的which函數來獲得按鍵代碼。
$(document).keydown(function (e)
{
console.log(e.which);
switch(e.which)
{
case 38: //按下向上鍵的處理
}
});
8.在大多數情況下，可以通過像100px這樣的格式給DOM元素left和top屬性設置CSS樣式。在設置屬性時指定單位，而在獲取屬性值時，返回的也會是帶單位的值。比如，當調用$("#paddleA").css("top")時，所得到的值是100px而不是100.這樣在對這個值執行數學運算時就會遇到問題。
$("#paddleA").css("top") + 5，返回的將是100px5，而不是我們想要的結果。
9.parseInt（string, radix）需要解析的字符串；可選參數，用一個數字來指示需要使用什麼進制的系統。
parse ( "5cm" )返回5； parse ( "FF" , 16 )返回255
10.由於全局變量在整個文檔都有效，因此在集成了不同的JavaScript庫到Web頁面中時會增加變量名沖突的概率。更好的做法是，將使用的全局變量放入一個對象中。
11.在介紹背面可見性前，頁面上的所有元素應該只呈現它們的前面。以前，元素沒有正面或背面的概念，因為它只有一個選擇。現在，當CSS3引入三軸旋轉概念後，可以對元素進行3D旋轉，這樣它就有了背面。
12.CSS3引用了一個叫backface-visibility（背面可見性）的屬性，用於定義是否能看到元素的背面。默認情況下，它是可見的。
13.對齊
$( "#cards" ).children ().each ( function ( index )
{
//讓紙牌以4×3的形式對齊
$( this ).css (
{
" left " : ( $( this ).width() + 20 ) * ( index % 4),
" top ": ( $( this ).height() + 20 ) * Math.floor ( index / 4)
});
});
“%”在JavaScript中叫模數操作符，它返回被除數的余數。余數用來作為列的計數；除法的結果--商，可以用來作為行的計數。
以索引值3為例，3%4等於3，所以索引值為3的紙牌位於第4列。而3/4等於0，所以它位於第1行。
14.CSS3彈性盒布局模塊
display : -webkit-box;
-webkit-box-pack : center;
-webkit-box-align : center;
彈性盒模塊定義了當元素的容器還有多余空間時元素的對齊方式。我們可以這樣設置元素的行為為彈性盒容器：將display（一個CSS2屬性）的值設置為box（一個CSS3新屬性值）。box-pack和box-align是兩個屬性，用於定義在水平和垂直方向上如何對齊和使用額外的可用空間。可以通過設置兩個屬性為center來使元素居中。
15.通過自定義數據屬性，可以將自定義數據保存進DOM元素中。我們可以創建以data-為前綴的自定義屬性名並給它賦值。
< li data-chapter = "2" data-difficulty = "easy" > Ping-Pong < /li >
< li data-chapter = "3" data-difficulty = "medium" > Matching Game < /li >
這是HTML5標准中提出的一個新功能。據W3C透露，自定義數據屬性的目的是保存頁面或應用程序的私有自定義數據，目前，沒有其他屬性和元素比它更合適這個目的了。
W3C還表示，這個自定義數據屬性是“僅供網站自己的腳本使用而不是公用元數據的一種通用擴展機制”。
$( this ).attr ( " data-pattern " , pattern );
對於HTML5自定義數據屬性，jQuery提供了另一個函數來訪問HTML5自定義屬性屬性，那就是data函數。
data函數最先用於給HTML元素的jQuery對象嵌入自定義數據。後來用來訪問HTML5自定義數據屬性。
.data ( key );
.data ( key, value );
< div id = " target " data-custom-name = " HTML5 Games " > < /div >可以調用jQuery的data函數訪問data-custom-name屬性
$( " #target " ).data( " customName " ) 它將返回“HTML5 Games”
16.HTML5的一個最重要功能就是Canvas元素。我們可以把Canvas元素看做一個能夠用腳本在裡面繪制圖像和圖形的動態區域。
17.在Canvas中執行路徑繪制的操作
var canvas = document.getElementById( " game " );
var ctx = canvas.getContext( " 2d " );
ctx.fillStyle = " red ";
ctx.arc ( 100 , 100 , 50 , 0 , Math.PI * 2 , true );
ctx.fill();
ctx.arc ( 200 , 100 , 50 , 0 , Math.PI * 2 , true );
ctx.fillStyle = " green ";
ctx.fill();
當調用arc函數或其他路徑繪制函數時，不會在Canvas上立即繪制出路徑。相反，只是將它加入一個路徑列表中。這些路徑在執行繪制命令前不會繪制出來。
Canvas的API中有兩條繪制執行命令，一條命令用於填充路徑，另一條用於繪制描邊。可以通過fill函數來填充路徑，還可以通過調用stroke函數來對路徑進行描邊。
fill和stroke函數負責在Canvas上填充和繪制路徑，但是它不負責清除路徑列表。上面的例子在用紅色填充圓之後，就添加另一個圓並給它填充綠色，執行結果卻是兩個圓都填充了綠色。因為當調用第2條fill命令時，Canvas中的路徑列表還包含兩個圓。因此，fill命令用綠色填充這兩個圓，也就是重新填充用來紅色的圓。
為了解決這個問題，需要確保在每次繪制一個新形狀前都調用beginPath。beginPath清空路徑列表，所以下次調用fill和stroke命令時，它將只應用上次調用beginPath之後的所有路徑。closePath函數將會從最新路徑的終點到路徑的起點之間繪制一條直線，用於閉合路徑。
18.在JavaScript中，可以使用Math.random（）函數生成隨機數。
random函數沒有參數，它總是返回0~1之間的一個浮點數，這個數大於等於0且小於1。有兩種常用的方式來使用random函數。一種是在給定范圍內生成隨機數。另一種是生成true或false布爾值。
Math.floor( Math.random() * B ) + A; //Math.floor()函數捨掉給定數的小數。Math.floor( Math.random() * 10 ) + 5是5~14之間的一個整數；
( Math.random() > 0.495 ); //獲取一個隨機布爾值，意味著會有50%返回false和50%返回true。
19.值得注意的是，在Canvas中繪制的文本會被視為位圖圖像數據，這就意味著浏覽者不能選擇這些文本；同時，搜索引擎也不能索引這些文本；同樣，也不能搜索它們。由於這個原因，我們應該仔細想想，是將文本繪制在Canvas裡還是直接把它們放到DOM裡。
20.播放聲音。可以通過調用getElementById函數來獲取audio元素的引用。接著，再調用play函數來播放它。
< audio id = " buttonactive " >
< source src = " media / button_active.mp3 " />
< source src = " media / button_active.ogg " />
< /audio >
< script >
document.getElementById( " buttonactive " ).currentTime = 3.5;
document.getElementById( " buttonactive " ).play();
document.getElementById( " buttonactive " ).pause();
< /script >
play函數將從當前播放時間的位置開始播放音頻，它存儲於currentTime屬性中。currentTime的默認值是0。上面的代碼將會從3.5秒的位置開始播放音頻；還可以通過使用pause函數來暫停一個audio元素的播放。
21.JavaScript的parseInt函數的第二個參數是可選的。它定義了解析數字的基數。默認情況下，它使用十進制，但是當字符串以零開始時，parseInt將以八進制來解析字符串。比如，parseInt( " 010 " )會返回8作為結果而不是10.
22.通過本地存儲技術保存和加載數據。可以使用localStorage對象的setItem函數來保存數據。
localStorage.setItem ( key, value );鍵是記錄的名稱，用它來標識對應的實體；值是將保存的任何數據。
localStorage.getItem ( key );該函數返回給定鍵的存儲值。當試圖獲取不存在的鍵時它會返回null。
23.本地存儲的大小限制。每個域名通過localStorage存儲數據時會有大小的限制。這個大小的限制在不同的浏覽器中可能會略有不同。通常，大小限制為5MB。當設置一個鍵-值對到localStorage中時，如果超出限制，浏覽器會拋出一個QUOTA_EXCEEDED_ERR異常。
24.使用setItem和getItem
localStorage.setItem( " last-elapsed-time" , elapsedTime );
var lastElapsedTime = localStorage.getItem( " last-elapsed-time " );
作為數組形式訪問localStorage，代碼如下：
localStorage[ " last-elapsed-time " ] = elapsedTime;
var lastElapsedTime = localStorage[ " last-elapsed-time " ];
25.現代Web浏覽器都原生支持JSON，使用stringify函數可以很容易就將任何JavaScript對象編碼成JSON，代碼如下：JSON.stringify ( anyObject );
26.localStorage.removeItem ( key );使用該函數來刪除給定鍵的記錄的用法；
27.localStorage.clear();使用該函數可以刪除所有的記錄。
28.WebSocket允許創建基於事件驅動的服務器-客戶端架構，讓所有連接的浏覽器可以相互間實時傳遞消息。
29.向所有已連接的浏覽器廣播消息。每當服務器觸發一個新的connection事件，就會向所有客戶端廣播連接數的更新。向客戶端廣播一條消息非常容易，只需要調用server實例的broadcast函數，並將string類型的廣播消息作為參數傳入該函數就可以了。
下面的代碼段用於向所有已連接的浏覽器廣播一條服務器消息：
var message = " a message from server ";
server.broadcast( message );
30.在服務器與客戶端之間發送和接收的消息只能是字符串類型的，而不能直接發送對象。因此，可以在傳送前將數據轉換成JSON格式的字符串。
31.可以使用如下CSS樣式將這些圖像標簽資源位置移出HTML的顯示范圍以達到隱藏它們的目的。我們不使用display:none來做這件事，因為浏覽器無法獲取未顯示元素的長度和高度。而在物理世界裡，卻需要長度和高度來正確定位圖像：
#asset
{
position:absolute;
top:-99999px;
}