本節書摘來異步社群《html5遊戲程式設計核心技術與實戰》一書中的第1章，第1.2節，作者： 向峰 責編： 楊海玲，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
html5遊戲程式設計核心技術與實戰
準備好html5開發工具之後，我都迫不急待地想看看html5給我們帶來了哪些讓人激動不已的新特性，相信，你也會和我一樣，對它感到興奮。由于html5新增加了很多元素，這裡，我們重點簡單介紹一下在遊戲中會使用到的一些元素，在介紹每一個新的元素時，我都會列舉一些小的例子。現在假定讀者有一定的html以及javascript方面的知識，如果您對這些代碼完全不清楚，沒關系，後面的章節中會詳細地解說。目前，我們隻需要知道html5能做什麼就足夠了。
canvas是html5中一個非常重要的元素，canvas元素提供了硬體加速機制，能夠讓我們實作高效的繪圖功能。第2章我們會詳細介紹canvas功能，這裡，我們先來領略一下canvas的魅力。
打開你的編輯工具，輸入以下代碼：
雖然有點長，但當你完成它的時候，我想，一定不會讓你失望的，這是一個不錯的開始，也許現在你可能還看不太懂，沒關系，第2章就會對canvas元素進行詳細介紹。以上代碼通過canvas元素完成了一個在浏覽器中使用的畫闆，可以通過chrome浏覽器打開它，看到的效果如圖1-9所示，你可以選擇不同顔色的畫筆在畫闆上進行塗鴉。
除了支援2d渲染技術外，canvas還提供了通過webgl的方式，利用硬體加速提供3d渲染技術。以下代碼使用了開源的three.js的3d引擎，完成了一個簡單的旋轉方塊，注意，該3d效果完全使用webgl技術，不需要安裝任何插件。順便說一下，three.js是一款完全免費使用的3d引擎，該引擎完全基于webgl編寫，事實上webgl也是在canvas上進行渲染，目前對webgl支援比較好的浏覽器有chrome、firefox以及safari等。
整個代碼實作了一個繞y軸旋轉的方塊，最好使用chrome浏覽器進行浏覽，運作效果如圖1-10所示。
當然，對于代碼的細節暫時可以不用去關注，目前，我們隻需要知道使用webgl能做什麼就足夠了，對于目前的html5來說，2d的遊戲将會是比3d更好的選擇。
正如我們所期待的一樣，html5中增加了兩個多媒體元素以及
<video></video>
比如，以下代碼可以直接在浏覽器中播放mp3音頻檔案。
在浏覽器中可以看到一個帶有簡單控制台的音頻播放器，如圖1-11所示。
html5提供了一組關于地理資訊的api，通過這組api我們可以擷取到用戶端所在的經度和緯度，利用這些資訊可以向這個坐标附近的區域提供服務。這些服務一般指的是基于位置的服務（lbs），lbs能夠廣泛支援需要動态地理空間資訊的應用，從尋找旅館、急救服務到導航，從社交遊戲到生活服務，幾乎可以覆寫生活中的所有方面。常見的一些lbs的應用有：位置資訊查詢、急救服務、道路輔助與導航、社交遊戲等。
借助html提供的geolocation api功能，很容易擷取到使用者目前的位置，結合這組api，我們可以編寫基于lbs的社交類遊戲。
同樣地，我們給出一段簡單的代碼，可以擷取使用者所在的位置資訊。
代碼綁定一個“擷取位置資訊”的按鈕，單擊按鈕将會調用issupportgeo方法檢測浏覽器是否支援地理資訊，如果支援的話就調用getcurrentposition擷取目前裝置的地理資訊。需要注意的是，第一次通路地理資訊的時候由于個人隐私的問題，浏覽器會彈出一個視窗詢問使用者是否允許讓浏覽器通路自己的位置，使用者可以選擇接受或者拒絕，如果拒絕的話将會得到一個錯誤。
我們知道在傳統的web應用程式開發過程中，當用戶端和伺服器進行資料互動時，遠端伺服器需要存儲用戶端的各種資料，如果需要在用戶端保留資料，可以采用“cookie”的形式，但cookie的存儲量很小，通常隻有4 kb，而且安全性和使用性都還有所欠缺。為了能夠滿足于html5本地應用的迅速發展，彌補html在本地資料持久化的弱勢，html5推出了新的本地存儲規範，提供了容量更大、更安全和更易于使用的本地存儲方案。
html5中使用web storage技術進行本地存儲，能夠在web用戶端進行資料存儲。web storage曾經屬于html5的規範，目前已經被獨立出來形成單獨的規範體系。簡單來說使用web本地存儲類似于hashmap一樣，采用鍵值對的形式儲存資料，而且儲存的資料會根據需要持久化在浏覽器所在的用戶端，具體來說web storage又可以分為以下兩種。
localstorage。将資料儲存在用戶端本地的硬體裝置（通常指硬碟，但也可以是其他硬體裝置）中，即使浏覽器被關閉了，該資料仍然存在，下次打開浏覽器通路網站時仍然可以繼續使用。
sessionstorage。将資料儲存在session對象中。session對象就是會話對象，session中存儲的資料獨立于每個客戶，該資料會随着浏覽器的關閉而消失。
這兩者的差別在于，sessionstorage為臨時儲存，而localstorage為永久儲存。localstorage提供了5 mb的存儲空間，而sessiongstorage甚至沒有限制，取決于記憶體的大小。
對于這兩種本地存儲對象都可以使用以下方法進行資料存取。
setitem(key, value)。使用鍵值對的方式儲存資料，key為鍵，value為值，鍵是一個字元串，而資料則可以是任何類型的javascript基本資料類型，包括字元串、boolean、整數和浮點數。需要注意的是，這些資料在存儲時實際上是以字元串儲存的。是以在通路資料時需要進行資料類型的轉換，也可以直接用localstorage.key = value或者localstorage[key] = value的方式設定，對于複雜的資料類型，可以使用json格式的對象轉換成字元串對象存儲。
getitem(key)。根據key鍵值來擷取資料，也可以直接用localstorage.key或者localstorage[key]擷取，需要注意的是，這些資料在取出來時實際上是字元串。是以在通路資料時需要進行資料類型的轉換。
例如，以下簡單的代碼用于記錄使用者通路頁面的總次數：
上面代碼中記錄了使用者通路頁面次數，第一次通路時，擷取的count為空，設定其為1，随後的通路中擷取資料後通過number函數轉成數字進行累加并重新設定到localstorage中。需要注意的是，即使關閉浏覽器，下次打開時，資料依然存在，因為localstorage的資料實際上持久化在本地檔案中。
一直以來，http的無狀态性和單向性作為常用的應用已經足夠，但還無法實作遊戲中需要的實時雙向通信技術，而html5中新增加的websocket通信元素則彌補了這一缺陷，使用新的web sockets技術對于實作高效的web網絡遊戲提供了基礎。
我們可以使用以下代碼連接配接支援web sockets協定的伺服器端，并發送資料。
當然，需要注意的是，以上隻是使用websocket元素的用戶端代碼，需要有支援websocket協定的伺服器端支援，在本書的第5章會詳細介紹使用websocket的用戶端以及node.js的伺服器端通信技術。
web worker技術填補了javascript中一直所缺少的多線程技術，之前的html中，進行dom元素渲染以及執行javascript腳本都是在單一的線程中執行，一旦在javascript中需要執行比較耗時間的操作，則會阻塞目前線程的執行。所帶來的效果就是，目前的浏覽器處于無響應狀态，直到浏覽器會彈出一個提示腳本運作時間過長的資訊。這裡，我們看一個簡單的例子。
在該例子中，提供了一個通過級數擷取圓周率的函數，參數n表示疊代次數，次數越高，計算越精确。然後提供一個按鈕計算圓周率在文本框中顯示，在浏覽器中運作，我們發現當疊代次數很高的時候，計算量較大，在得到計算結果之前，按鈕和文本框都是處于無法響應的狀态，這也符合實際情況，因為此時dom元素的更新被大計算量的程式給阻塞了。如果使用web worker則不會出現此情況，我們可以把計算量大的工作放到一個單獨的線程中運作，不會阻塞目前線程。
建立背景線程可以使用以下方式：
var worker = new worker（“worker.js”）
我們把計算工作放到worker.js檔案中，前台可以通過postmessage方法發送消息給worker線程，請求worker進行工作，直到worker線程工作完畢傳回結果。
對于前面計算pi的例子，我們可以修改如下，首先，建立worker.js檔案，代碼如下：
worker.js檔案中定義了計算pi的函數，我們需要定義一個onmessage函數，目前台通過調用worker對象的postmessage方法時，該回調函數被響應。
然後，把顯示結果的頁面修改如下：
這裡，首先建立了一個worker對象，然後在workder對象中注冊一個onmessage回調函數。注意，這個回調函數和workder.js檔案中的onmessage是不同的，這裡的回調函數當woker.js檔案中的onmessage函數執行完畢後響應，最後，調用worker對象的postmessage方法發送計算請求，此時，woker.js檔案中的onmessage函數就會執行。
修改成worker版本後，你會發現，當單擊按鈕得到計算結果之前，按鈕和文本框都是可以響應的，因為此時計算線程被獨立出來了。