本節書摘來自異步社群《html5遊戲程式設計核心技術與實戰》一書中的第1章，第1.1節,作者： 向峰 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
從時間上來計算，遊戲行業從誕生到現在還不到100年曆史，跟其他傳統的行業相比，它甚至就像襁褓中的嬰兒一樣小，但正是這嬰兒，正逐漸挑戰着衆多的傳統行業。現在，很多人都會在不同的時刻玩着不同的遊戲，也許你正在虛拟的網絡遊戲中熱血澎湃地戰鬥，也許你正在電子遊戲競技中展現你的人生價值，也許你在忙碌的工作後，玩着切水果遊戲不停地發洩，總之，你會感受到，它正在悄然融入到我們的生活當中，正在成為你生活的一部分。
随着新一代web開發标準——html5誕生，各大浏覽器廠商和軟體廠商都不遺餘力地支援html5标準，加入到html5的陣營，網際網路時代的新一輪革命即将展開，當遊戲碰上html5将會産生怎樣的激烈火花，真是讓人感到期待。
1.1.1 網頁遊戲簡介
從電子遊戲載體來說，電子遊戲現在基本上分成了3個主要的陣營：第一部分是以電視遊戲為主，第二部分以個人電腦遊戲為主，第三部分是以手機和平闆為主。而從遊戲的玩家數量來說，遊戲經曆了從單機遊戲時代到現在的網絡遊戲時代。随着網際網路的普及，以及電腦硬體的飛速發展，網際網路遊戲正處于高速發展的時期，特别是網頁遊戲得到了空前的發展。
網頁遊戲也稱web game，是一種無端網遊，和《魔獸》系列、《星際》系列等傳統的網絡遊戲相比，網頁遊戲不需要下載下傳用戶端，玩家隻需要通過電腦打開浏覽器即可進行遊戲，與傳統的大型網遊比起來，其優點是無需安裝、占據空間小、使用友善等，對于開發人員來說，比開發傳統的網絡遊戲更容易。
網頁遊戲從最早的mud（multiple user domain，多使用者虛拟空間遊戲，玩家愛稱“泥巴遊戲”）發展而來，早期的mud遊戲限于技術條件，幾乎是純文字網遊，沒有圖形，全部用文字和字元畫來構成。根據維基百科記載，世界上第一款真正意義上的實時多人互動網絡mud遊戲“mud1”，是在1978年，由英國埃塞克斯大學的羅伊·特魯布肖用dec-10編寫的。随着internet的和html語言的飛速發展，純文字類的遊戲淡出曆史舞台，豐富多彩的帶圖像的webgame逐漸興起。現在的一些2d網頁遊戲幾乎能和傳統的網絡遊戲媲美，比如《可樂吧》、《彈彈堂》、《第九城市》、4399遊戲平台、91wan遊戲平台、1wan遊戲平台等。
由于網頁遊戲運作的環境在浏覽器中，是以常見的開發語言，在用戶端主要使用html、css樣式以及javascript語言，伺服器可以使用諸如c/c++、c#、java、php等傳統的伺服器端語言。在html4時代，html語言受到諸如缺乏高效的圖像渲染方法、缺乏實時的網絡通信方法等技術支援，加上javascript運作效率相對一些常用的遊戲程式設計語言c/c++、java低，是以目前比較成熟的網頁技術都需要在浏覽器中安裝一些特殊的插件（flash player、applet、activex、unity web player等）以幫助web game能夠高效地運作。就目前來說，web game使用的最廣泛的用戶端技術主要還是以flash平台為主，從1995年到現在經過了近20多年的時間，各種關于動畫、遊戲方面的技術已經非常成熟，是以flash通常作為web game首選的開發平台。但随着html新标準的釋出，也就是html5的橫空出世，也就注定了flash的路将不會長久。flash的研發公司adobe已經于2011年宣布停止flash後續研發工作，而轉向新的html5。
1.1.2 html5簡介
自從html5新标準釋出以來，就引起了網際網路技術的新一輪風暴，作為新一代的web技術的領航者，它受到了各大廠商的追捧，幾乎所有的it大廠商都全力提供對html5規範的支援。相對于html4.x版本而言，html5提供了許多令人激動的新特性，這些新的特性将為html5開創新的web時代提供了堅強的基石。
html（hypertext markup language，超文本标記語言）是專門在internet上傳輸多媒體的一種語言，正是有了html語言的出現，現在的網際網路世界才顯得豐富多彩，從1993年第一個版本的html語言誕生以來，共經曆了以下幾個重要的釋出版本。
（1）html（第一版），這是一個非正式的工作版本，于1993年6月作為ietf（internet engineering task force，ietf）草案釋出。
（2）html2.0，1995年11月作為rfc1866（request for comments）釋出，rfc是由ietf釋出的備忘錄。
（3）html3.2，1997年1月14日，成為w3c（world wide web consortium，w3c）推薦标準。
（4）html4.0，1997年12月18日，w3c推薦标準。
（5）html4.01，1999年12月24日，w3c推薦标準。
（6）web applications1.0，2004年作為html5草案的前身由whatwg（web hypertext application technology working group，以推動html5标準而建立的組織）提出，2007年被w3c組織準許。
（7）html5草案，2008年1月22日，第一份草案正式釋出。
（8）html5.1，2012年12月17日，w3c的首份規範草案釋出。
事實上到現在為止，html5還處于發展和完善時期，但諸多html5中新增加的功能已經讓各大軟體廠商鼎立支援。從html5前身的名稱（web application）我們可以看出html5的決心，html不再隻是單純的網站制作語言，而是作為web應用程式的開發語言應運而生，為了能夠承擔web應用程式所能夠完成的功能，在不需要安裝任何插件的情況下，html5中提供了以下激動人心的功能。
（1）canvas畫布元素，canvas元素的誕生為html5能夠支援較高性能的動畫和遊戲提供了條件。canvas可以直接使用硬體加速完成像素級别的圖像渲染，不僅可以完成2d圖形渲染，使用weggl以及shader語言還可以完成較高性能的3d圖形渲染。
（2）多媒體元素，html5中提供了專門的audio元素和video元素，用于播放網絡音頻檔案和視訊檔案，有了這兩個多媒體元素，将不再需要單獨安裝插件就可以進行影音的播放，減少浏覽器的污染程度。
（3）地理資訊服務，通過html5的地理資訊服務api我們可以擷取到用戶端所在的經度和緯度，利用這些資訊可以向這個坐标附近的區域提供服務，可應用于地理交通資訊查詢、基于lbs（location based services）的社交遊戲等。
（4）本地存儲服務，相對于傳統的cookie微量的本地存儲技術，html5推出了新的本地存儲規範，提供了容量更大，更安全和更易于使用的本地存儲方案。
（5）websocket通信，彌補了傳統的web應用程式缺乏實時通信的功能，使用websocket技術可以在web應用程式中實作類似于傳統的c/s結構應用程式的通信功能，使得在web環境中建構實時的通信程式提供了可能。
（6）離線存儲，html5的離線緩存應用的功能，使用戶端即使沒有連接配接到網際網路絡，也可以在用戶端正常使用本地功能。有了這個強大的功能，使用者可以更加靈活地控制緩存資源的加載，可以在沒有網絡信号的情況下使用本地應用。
（7）多線程，html5中提供了真正意義上的多線程解決方案，在html4的使用過程中，如果遇到用戶端需要在背景執行耗時方法，則頁面會處于“假死”狀态，而在html5中可以使用多線程解決類似問題。
（8）裝置，為了能夠适應多種平台（pc、手機、平闆），html5提供了device元素，可以讓應用程式通路諸如攝象頭、麥克風等硬體裝置。
總之，這些新增加的特性無疑都是沖着本地應用程式而來，盡管html5還處于發展階段，但已經成為下一代web開發的标準。
1.1.3 html5浏覽器工具
原則上，html5應用程式可以在目前任何主流的浏覽器（ie、chrome、opera、firefox、safari等）中執行，但由于html5規範目前正處于發展階段，是以，現今的各種主流浏覽器對html5規範支援的程度不太一樣。根據國際權威的html5測試網站釋出最新一期測試資料來看，目前，對html5支援度最高的浏覽器是maxthon 4.0和chrome 26。這裡所指的支援度是通過對html5的各項新特性諸如canvas、video/audio、新的form元素、webgl等綜合的一個相容性支援，圖1-1顯示了各個主流版本浏覽器在pc上對html5的支援程度。
https://yqfile.alicdn.com/40d3a59e55c40ee15e0d4f0eeb374d6688c9543a.png" >
從相容性來看，目前maxthon4.0（傲遊）對html5的各項支援度最高，但從實際web頁面運作效果來看，綜合javascript運作速度、dom渲染速度、動畫渲染速度、安全性、綜合性能等因素，chrome是目前較好的選擇。同時，由于javascript是唯一的web應用程式的用戶端語言（使用帶插件的as和activex等除外），而chrome擁有最快的javascript執行引擎v8，這樣就大大提高了web應用程式用戶端的運作效率。是以，從遊戲開發的角度來看，目前chrome無疑也是較好的選擇，本書中的所有案例都在chrome中測試通過。
html5test.com 網站主要是針對html5相容性測試，另外一個對html5綜合性能檢測權威的網站可以針對浏覽器進行全方位的測試，從檢測結果來看，目前綜合性能最高的也是chrome浏覽器，圖1-2顯示了peacekeeper的檢測結果。
在peacekeeper首頁以漫畫的形式展示了目前浏覽器的綜合評論，打出的智語是“google chrome king of the hill since 2011-09-19 windows pc”，當然，也可以單擊“test your browser go”來檢測本地浏覽器的綜合性能，圖1-3是筆者機器的檢測分數（為準确測試，最好隻打開一個浏覽器tab頁，關閉其他耗時的程序）。
https://yqfile.alicdn.com/b281eefb6614c399b7b6e9e2dada9be60b1e56c4.png" >
1.1.4 html5開發工具
原則上來說，使用任何文本編輯工具都可以完成html5代碼的編寫工作，編輯好html5代碼後儲存為.htm或者.html的檔案即可，然後可以使用支援html5的浏覽器檢視效果。
工欲善其事，必先利其器。盡管可以直接使用notepad編寫html5應用程式，但為了能夠提高代碼的編寫效率和減少出錯機率，我們可以使用一些比較常用的ide工具完成相關程式開發，這裡提供幾種輕量級和重量級的ide工具。
1．輕量級開發工具
editplus
editplus是一個輕量級的、可替代notepad的文本編輯工具，最新的3.51的版本執行檔案隻有2 mb大小。麻雀雖小，五髒俱全，editplus功能強大，界面簡潔美觀，啟動速度快；中文支援比較好；支援文法高亮；支援代碼折疊；支援代碼自動完成（但其功能比較弱），不支援代碼提示功能；配置功能強大，且比較容易，擴充也比較強，預設支援html、css、php、asp、perl、c/c++、java、javascript和vbscript等文法高亮顯示，通過定制文法檔案，可以擴充到其他程式語言。editplus内置了與internet的無縫連接配接，可以在editplus的工作區域中直接打開internet浏覽視窗。本書的所有示例代碼都是使用該軟體編寫，圖1-4是editplus工具的界面。
和editplus類似的輕量級的工具還有emedit、ultraedit-32等。
1st javascript editor pro
從名字上可看出，該軟體号稱第一的javascript編輯工具，因為web應用程式主要依靠html、css以及javascript語言，是以javascript的重要性可見一斑。由于之前介紹的文本編輯工具雖然支援各種語言的高亮文法顯示，但都缺乏語言智能感覺功能，對于編寫較大型的程式而言不太友善。而本款軟體則專門針對javascript提供了開發、校驗和調試功能，除了針對javascript有優化外，也可針對其他語言（javascript、html、css、vbscript、php、asp.net）提供文法加亮顯示，也提供了完整的html标記、屬性、事件以及javascript事件、對象、函數等。目前最新的版本是5.1，完整的安裝包隻有7 mb多，也是一款不可多得的輕量級的javascript編輯器。圖1-5是javascript editor pro工具的界面。
https://yqfile.alicdn.com/2136de0e3abaa8aef2eec7e8f82addd43e9f3d78.png" >
類似的javascript編輯工具還有 javascript menu master、javascript editor等。
2．重量級開發工具
輕量級工具的特點是免費、體積小、執行速度快，缺點是缺乏完善的編輯環境、完整的項目生命周期管理、版本管理、團隊協作管理等，是以在個人制作小型程式上具有一定優勢，但在完整的大型軟體開發過程中，商業化的重量級的ide才是首選。以下介紹幾款常用的重量級開發工具。
eclipse
不用多說了，著名的跨平台開源內建開發環境，由于其優秀的靈活性、高擴充性，加上開源免費，成為了j2ee領域和android領域開發工具首選的開發平台。eclipse支援多個作業系統平台，如windows、linux、ios等，最初的版本隻是為了用于java平台開發，但是在基于eclipse強大的插件機制下，除了開發java應用程式，eclipse也提供了對c/c++（cdt）、php、perl、ruby、python、telnet和資料庫的開發，成為名副其實的多平台、多語言的程式開發內建環境。
圖1-6是eclipse juno版本工具的界面，這是eclipse标準版本的免費ide工具，如果需要專門針對html5和javascipt開發，可以直接使用基于eclipse的開發工具aptana。相對于标準版本的eclipse內建環境，aptana幾乎就是專為web2.0定制的內建開發環境，提供了非常強大的javascript編輯和調試功能，支援最新的各種javascript架構（jquery、dojo、prototype、aflax等）的智能感覺功能。
webstorm
如果覺得eclipse太過龐大，或者隻想針對web前端進行開發，webstorm則是另一個非常不錯的選擇，完整的webstorm 5.0的安裝版本隻有90 mb左右。
同上述的其他優秀的內建開發環境一樣，webstorm提供了對javascript和html的強有力的支援，号稱“the smartest javascript ide”，由此可見webstorm的功能之強大，隻是該內建平台隻支援web前端的開發，事實上webform是另一個優秀的java開發平台intellij的簡化版。webstorm開發界面如圖1-7所示。
可以通過官網下載下傳最新的webstorm工具，需要注意的是這款優秀的javascript ide是需要收費的。
visual studio
毫無疑問，windows平台下最佳的開發工具就是microsoft的vistual studio系列，從visual studio 10 sp1開始，vs系列提供了對html5以及javascript部分的智能感覺功能。就web前端開發來說（除開發asp.net程式外），相對于其他的web開發功能稍弱。圖1-8是visual studio 2008開發界面。
關于常用的html5開發工具就介紹到這裡，相信大家會根據自己的需要而選擇适當的工具進行開發。