HTML5遊戲開發實戰--小心

時間 2019-11-19

標籤 html5 html 遊戲開發實戰小心欄目 HTML5 简体版

原文原文鏈接

1.WebSocket它是HTML5該標準的一部分。Web頁面能夠用它來鏈接到持久socketserver在。該接口提供一個瀏覽器和server與事件驅動的鏈接。這意味着client每次須要時再也不server發送一個新的數據請求。css

當有須要更新數據，server就可以直接推送數據更新給瀏覽器。該功能的優勢之中的一個就是玩家之間可以實時進行交互。web

當一個玩家作了些事，就會向server發送數據，server將廣播一個事件給其它已鏈接的所有瀏覽器。讓它們知道玩家作了什麼。這樣就使得製做HTML5網絡遊戲成爲可能。canvas

2.隨着現代瀏覽器對HTML5元素的原生支持，將再也不需要用戶預裝第三方插件就可以玩遊戲了。數組

3.咱們把JavaScript代碼放置在body結束標籤</body>以前且在頁面所有內容以後。瀏覽器

如下介紹把代碼放在這個位置，而不是曾經的<head></head>兩個標籤之間的緣由。服務器

4.一般，瀏覽器是自上而下載入和渲染內容的。假設JavaScript代碼放置在head部分裏。會致使JavaScript代碼已載入完，而文檔內容可能尚未載入完的狀況出現。網絡

其實。假設瀏覽器在頁面中間載入JavaScript代碼，就會中斷正在進行的渲染和載入。這就是儘量把JavaScript代碼放到頁面底部的緣由。經過這樣的方式。可以提高載入內容的性能。架構

5.jQuery爲咱們提供了在頁面載入完畢後才運行代碼的方法，例如如下：dom

jQuery（document）.ready（function （）socket

{

//這裏是代碼

}）；

$(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函數可以很是easy就將不論什麼JavaScript對象編碼成JSON，代碼例如如下：JSON.stringify ( anyObject );

26.localStorage.removeItem ( key );使用該函數來刪除給定鍵的記錄的使用方法；

27.localStorage.clear();使用該函數可以刪除所有的記錄。

28.WebSocket贊成建立基於事件驅動的server-client架構。讓所有鏈接的瀏覽器可以相互間實時傳遞消息。

29.向所有已鏈接的瀏覽器廣播消息。

每當服務器觸發一個新的connection事件，就會向所有client廣播鏈接數的更新。向client廣播一條消息很easy，僅僅需要調用server實例的broadcast函數，並將string類型的廣播消息做爲參數傳入該函數就可以了。

如下的代碼段用於向所有已鏈接的瀏覽器廣播一條server消息：

var message = " a message from server ";

server.broadcast( message );

30.在server與client之間發送和接收的消息僅僅能是字符串類型的。而不能直接發送對象。

所以，可以在傳送前將數據轉換成JSON格式的字符串。

31.可以使用例如如下CSS樣式將這些圖像標籤資源位置移出HTML的顯示範圍以達到隱藏它們的目的。

咱們不使用display:none來作這件事。因爲瀏覽器沒法獲取未顯示元素的長度和高度。而在物理世界裏。卻需要長度和高度來正肯定位圖像：

#asset

{

position:absolute;

top:-99999px;

}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。