HTML5遊戲開發實戰--注意點，html5遊戲開發實戰--
1.WebSocket是HTML5標準的一部分，Web頁面可以用它來持久串連到socket伺服器上。該介面提供了瀏覽器與伺服器之間的事件驅動型串連，這意味著用戶端不必再每隔一個時間段就需要向伺服器發送一次新的資料請求。當有資料需要更新時，伺服器就可以直接推送資料更新給瀏覽器。該功能的好處之一就是玩家之間可以即時進行互動。當一個玩家做了些事，就會向伺服器發送資料，伺服器將廣播一個事件給其他已串連的所有瀏覽器，讓它們知道玩家做了什麼。這樣就使得製作HTML5網路遊戲成為可能。
2.隨著現代瀏覽器對HTML5元素的原生支援，將不再需要使用者預裝第三方外掛程式就可以玩遊戲了。
3.我們把JavaScript代碼放置在body結束標籤</body>之前且在頁面所有內容之後。下面介紹把代碼放在這個位置，而不是以前的<head></head>兩個標籤之間的原因。
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-為首碼的自訂屬性名並給它賦值。
<ul>
< li data-chapter = "2" data-difficulty = "easy" > Ping-Pong < /li >
< li data-chapter = "3" data-difficulty = "medium" > Matching Game < /li >
</ul>
這是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;
}
html5一般是用canvas繪圖來實現，你說的引擎其實就是函數庫，封裝了一些常用的函數，至於哪個好一些，這個得根據具體情況選擇
html5遊戲開發 後台是可以用什語言開發
html5開發遊戲，後台用什麼無所謂，java,.net,php,nodejs都行，
主要是js要好，html5遊戲主要是用js與後台互動，所以js很重要。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
