整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
生手游市場(chǎng)已是紅海，騰訊、網(wǎng)易等寡頭獨(dú)霸天下，H5游戲市場(chǎng)或?qū)⒊蔀橄乱粋€(gè)風(fēng)口。據(jù)筆者所知，很多H5游戲開(kāi)發(fā)團(tuán)隊(duì)由于選擇引擎不慎導(dǎo)致項(xiàng)目甚 至團(tuán)隊(duì)夭折。如何選擇適合團(tuán)隊(duì)和項(xiàng)目的引擎，筆者通過(guò)學(xué)習(xí)和項(xiàng)目實(shí)踐，總結(jié)微薄經(jīng)驗(yàn)，供大家參考，非技術(shù)人員也可以將本篇內(nèi)容作為引擎選擇的重要關(guān)注點(diǎn)。
選擇H5游戲引擎的思考維度
1、開(kāi)發(fā)語(yǔ)言的支持
2、2D、3D、VR的支持
3、性能
4、引擎的應(yīng)用廣度
5、設(shè)計(jì)理念
6、工作流支持力度
7、商業(yè)化成熟案例
8、學(xué)習(xí)資源與技術(shù)支持能力
首先，我們要知道，當(dāng)前主流的游戲引擎有哪些。由于H5引擎有很多，筆者在這里進(jìn)行了精心的篩選，過(guò)濾掉不支持webGL的引擎，以及封裝了第三方渲染內(nèi)核的JS框架，和不能直接在瀏覽器中運(yùn)行的JS引擎。
為什么要過(guò)濾掉這幾種呢，首先，沒(méi)有自己的渲染內(nèi)核，僅僅是基于第三方的內(nèi)核作的API封裝，筆者很擔(dān)心可持續(xù)的性能優(yōu)化和維護(hù)能力。另外，不能在 瀏覽器中直接運(yùn)行的JS引擎，將限制H5游戲跨平臺(tái)的交互能力。還有， 筆者非常看好webGL模式，認(rèn)為webGL模式才是H5引擎的未來(lái)。原因有幾 點(diǎn)：
第一、性能，webGL模式遠(yuǎn)超Canvas數(shù)倍。DOM模式就不適合用于真正的游戲開(kāi)發(fā)，更不用提。
第二、3D方向，webGL模式理論上可以制作2D和3D游戲，Canvas和DOM模式下只能制作2D游戲。
第三、普及率，webGL的普及率已經(jīng)非常高了，尤其是支持webGL的騰訊TBS-Blink內(nèi)核已在4月19日發(fā)布，并逐步在微信、QQ空間、QQ瀏覽器、手機(jī)QQ等APP中采用靜默安裝方式全面升級(jí)。這個(gè)普及率在國(guó)內(nèi)帶來(lái)的影響，;你懂的……
1、選擇H5游戲開(kāi)發(fā)語(yǔ)言
擁有廣泛開(kāi)發(fā)者的H5游戲開(kāi)發(fā)語(yǔ)言共有三種，分別為Flash AS3、TypeScript、JavaScript。其中Flash AS3、 TypeScript均屬于面向?qū)ο蟮母呒?jí)腳本語(yǔ)言，通過(guò)編譯器將原項(xiàng)目代碼編譯成JavaScript代碼文件運(yùn)行于瀏覽器之中，面向?qū)ο蟮母呒?jí)語(yǔ)言無(wú) 論是項(xiàng)目開(kāi)發(fā)管理，還是項(xiàng)目開(kāi)發(fā)的工具環(huán)境的成熟度都明顯優(yōu)于JavaScript腳本語(yǔ)言，尤其是中大型項(xiàng)目方面，AS3等高級(jí)語(yǔ)言的效率會(huì)更高。
從上圖看出，支持JavaScript語(yǔ)言的引擎更多，由于AS3語(yǔ)言的編譯器為L(zhǎng)ayabox引擎推出的，因此采用AS3作為開(kāi)發(fā)語(yǔ)言的僅有 Layabox引擎。筆者建議在開(kāi)發(fā)中大型游戲項(xiàng)目的時(shí)候，采用TypeScript或者是Flash AS3語(yǔ)言進(jìn)行開(kāi)發(fā)。如果是小型游戲，任選其一即 可。
2、引擎的未來(lái)延續(xù)能力
選擇一個(gè)引擎，并不是簡(jiǎn)單的認(rèn)為，滿足眼前夠用就可以了，引擎的未來(lái)延續(xù)能力也是很重要的，這個(gè)項(xiàng)目是2D，下個(gè)項(xiàng)目想開(kāi)發(fā)3D，如果引擎不支持怎 么辦？去換個(gè)引擎？如果VR的機(jī)會(huì)來(lái)了，再想發(fā)布VR版本，這個(gè)引擎不支持，需要重新開(kāi)發(fā)嗎？等等問(wèn)題，作為開(kāi)發(fā)者盡可能要提前想好。
通過(guò)上圖，可以看出，即便是在支持webGL的H5引擎里，有只面向2D游戲的，也有只面向3D游戲的，同時(shí)支持2D、3D、VR的H5引擎，從目前看只有Layabox與Egret引擎。
3、性能是核心需求
性能是H5游戲面臨的核心門檻，也是很多H5游戲不被專業(yè)玩家認(rèn)可的重要原因之一。游戲卡頓，不流暢，這樣的產(chǎn)品體驗(yàn)很難在激烈競(jìng)爭(zhēng)中生存下來(lái)。
H5產(chǎn)業(yè)早期的普及階段即將過(guò)去，游戲品質(zhì)在迅速提高，品質(zhì)中包括精細(xì)的美術(shù)和炫酷的動(dòng)畫等。在復(fù)雜的游戲項(xiàng)目面前，上述種種元素，其流暢體驗(yàn)度對(duì)游戲引擎是極大的考驗(yàn)。所以選擇性能優(yōu)秀的引擎是保證品質(zhì)的最重要基礎(chǔ)，一定要謹(jǐn)慎。
在游戲項(xiàng)目研發(fā)開(kāi)始時(shí)，一定要先對(duì)復(fù)雜的模塊做DEMO測(cè)試，特別是帶背景滾動(dòng)的游戲。比如橫屏卷軸游戲，對(duì)幀數(shù)穩(wěn)定性要求極高，如果滿足不了性能上的需求，可能會(huì)帶來(lái)眩暈、眼花、疲倦等不良體驗(yàn)。
在webGL的2D渲染性能方面，pixi.js的性能處于當(dāng)前的頂級(jí)。在webGL的3D渲染性能方面，Three.js非常優(yōu)秀。在 runtime方面Cocos2d-js也有著原生級(jí)的表現(xiàn)，經(jīng)過(guò)對(duì)比，筆者認(rèn)為L(zhǎng)ayabox性能的綜合實(shí)力最強(qiáng)，在各個(gè)渲染領(lǐng)域都保持在HTML5引 擎的頂級(jí)水平。當(dāng)然，上圖僅作為參考，對(duì)于任何號(hào)稱某個(gè)引擎性能最牛的論調(diào)，一定要親自進(jìn)行性能DEMO的測(cè)試對(duì)比，而不要輕易采信。
由于性能是游戲最核心的需求，筆者這里再多說(shuō)一句，大型項(xiàng)目在系統(tǒng)復(fù)雜度、UI復(fù)雜度、動(dòng)畫顯示數(shù)量和種類等方面與小型游戲項(xiàng)目完全不在一個(gè)量級(jí)。 會(huì)涉及到比小游戲更復(fù)雜的性能優(yōu)化、內(nèi)存管理、資源管理等需求，如果選擇了小馬拉大車的低性能引擎，項(xiàng)目夭折可能性非常大，除非最后項(xiàng)目開(kāi)發(fā)者花大量時(shí)間 自己優(yōu)化引擎。所以性能差一點(diǎn)，就會(huì)導(dǎo)致結(jié)果差很多，不可主觀想象。
4、與引擎的應(yīng)用廣度
隨著H5游戲品質(zhì)提升，在其他領(lǐng)域也具備一定的競(jìng)爭(zhēng)力和價(jià)值，一次開(kāi)發(fā)可發(fā)行各個(gè)領(lǐng)域版本，已成為日漸明確的需求，這里面包括發(fā)行原生APP手游和 PC的flash頁(yè)游需求，大統(tǒng)一的引擎時(shí)代即將來(lái)領(lǐng)。目前最火爆的H5游戲《傳奇世界H5》據(jù)說(shuō)有40%的收入來(lái)自PC網(wǎng)頁(yè)。
發(fā)布PC頁(yè)游時(shí)，由于PC瀏覽器目前對(duì)HTML5兼容性不足70%，用戶損耗很大，頁(yè)游聯(lián)運(yùn)平臺(tái)可能會(huì)拒絕或放量很少，只有采用能同時(shí)發(fā)布Flash版本的引擎，才能解決這個(gè)問(wèn)題。
5、設(shè)計(jì)理念與定位
設(shè)計(jì)理念是個(gè)比較大的話題，也是個(gè)很重要的引擎選擇因素，比如引擎是要專注移動(dòng)端，還是要面向全平臺(tái)多端游戲市場(chǎng)。是注重性能，還是注重工具鏈等等。深入了解不同引擎的理念與定位，才能更好的與游戲產(chǎn)品進(jìn)行結(jié)合。
上圖內(nèi)容僅作參考，詳情建議去各引擎官網(wǎng)深入了解。
6、工作流支持力度
作為商業(yè)級(jí)開(kāi)源引擎，工具鏈的提供與支持也是一種選擇考量要素，比如UI編輯器、粒子編輯器、骨骼編輯器、場(chǎng)景編輯器等等，如果引擎方直接提供或支持，那么將會(huì)較大的提升研發(fā)效率。本文中提到的7個(gè)引擎，只有Egret、Layabox、Cocos2d-JS這三個(gè)引擎，在工具鏈方面提供足夠全面的支撐。
7、是否有成熟的商業(yè)案例
怎么證明引擎是成熟的？一定要有成熟的商業(yè)案例，一般引擎的官網(wǎng)上都會(huì)有游戲案例介紹，我們?cè)谶x擇引擎之前要進(jìn)行深入體驗(yàn)，包括：商業(yè)案例的數(shù)量、 商業(yè)案例的種類、穩(wěn)定性、流暢度（要在低端機(jī)里體驗(yàn)）、項(xiàng)目復(fù)雜度、項(xiàng)目相似度等。如果有一些大型成功案例背書會(huì)相對(duì)安全可靠些。從目前的行業(yè)案例來(lái)看，Layabox引擎的MMORPG《醉西游》、重度動(dòng)作游戲《獵刃2》、大型模擬經(jīng)營(yíng)游戲《夢(mèng)幻家園》等無(wú)疑是H5引擎技術(shù)的最高 水準(zhǔn)代表作。但是從卡牌、掛機(jī)等類型的付費(fèi)游戲總體數(shù)量來(lái)看，Egret引擎明顯占優(yōu)，充分說(shuō)明該引擎的市場(chǎng)宣傳力度更勝一籌。
8、學(xué)習(xí)資源與技術(shù)支持能力
能提供什么樣的學(xué)習(xí)資源，以及技術(shù)支持，對(duì)于開(kāi)發(fā)者也是重要因素，如果你是技術(shù)大牛，只想使用輕量的第三方渲染內(nèi)核。那么2D游戲，pixi.js 無(wú)疑是首選。3D游戲，筆者推薦Three.js。但是這兩種引擎的學(xué)習(xí)資料都比較稀少。筆者認(rèn)為學(xué)習(xí)資料的完善，以及在學(xué)習(xí)過(guò)程中的技術(shù)支持力度，將會(huì) 很大的幫助你解決引擎使用中的問(wèn)題。所以，API完善，DEMO完善，文檔完善，社區(qū)的響應(yīng)速度，交流氛圍，以及QQ技術(shù)支持等，都可以作為你選擇引擎的 因素考量之一。
9、頁(yè)游移植產(chǎn)品的引擎選擇
目前像《醉西游》等優(yōu)秀H5產(chǎn)品是Flash頁(yè)游或手游移植而成，移植類的產(chǎn)品在選用引擎時(shí)要注意，代碼是否可以直接移植？如果可以，那將節(jié)省大量 的開(kāi)發(fā)成本。比如Flash AS3開(kāi)發(fā)的2D或3D頁(yè)游或手游，可以把邏輯與算法代碼直接拷貝移植到Layabox引擎項(xiàng)目中，開(kāi)發(fā)速度提高數(shù)倍。
寫在最后：最后提醒一下，千萬(wàn)不要相信某些引擎的單方宣傳，一定要花一點(diǎn)時(shí)間去研究實(shí)踐，親自制作DEMO去作一作對(duì)比，動(dòng)手體驗(yàn)到的才是真理。
針對(duì)DEMO測(cè)試筆者有幾點(diǎn)建議：
1、采用一個(gè)復(fù)雜的UI，特別是復(fù)雜列表，比如說(shuō)沒(méi)有分頁(yè)的背包列表，背包里放上不同的道具圖片，測(cè)試滑動(dòng)時(shí)的流暢度，這塊比較考驗(yàn)性能，元素越復(fù)雜，數(shù)據(jù)越多，尤其能對(duì)比出來(lái)性能上的差異。
2、包含最復(fù)雜戰(zhàn)斗部分，不要寫戰(zhàn)斗邏輯代碼，不然會(huì)花的時(shí)間太長(zhǎng)，只需要把戰(zhàn)斗相關(guān)的動(dòng)畫和復(fù)雜的元素放在場(chǎng)景中模擬即可，因?yàn)镠5游戲性能瓶頸通常在于畫面的顯示。
3、 測(cè)試主要目的是看項(xiàng)目在引擎中性能，這是最至關(guān)重要的，所以，硬件上，我們要選擇低端安卓手機(jī)（比如紅米）進(jìn)行測(cè)試。軟件環(huán)境建議使用微信環(huán)境測(cè)試，首 先，因?yàn)槲⑿殴娞?hào)是H5的主要渠道之一，其次，微信當(dāng)前的H5性能低于chrome瀏覽器，在惡劣的環(huán)境下更能測(cè)試引擎的優(yōu)劣。
HTML（HyperText Markup Language，超文本標(biāo)記語(yǔ)言）是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言，它不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言。
HTML5是構(gòu)建Web內(nèi)容的一種語(yǔ)言描述方式，HTML5是互聯(lián)網(wǎng)的下一代標(biāo)準(zhǔn)，是構(gòu)建以及呈現(xiàn)互聯(lián)網(wǎng)內(nèi)容的一種語(yǔ)言方式，被認(rèn)為是互聯(lián)網(wǎng)的核心技術(shù)之一。HTML產(chǎn)生于1990年，1997年HTML4成為互聯(lián)網(wǎng)標(biāo)準(zhǔn)，并廣泛應(yīng)用于互聯(lián)網(wǎng)應(yīng)用的開(kāi)發(fā)。
HTML5是Web中核心語(yǔ)言HTML的規(guī)范，用戶使用任何手段進(jìn)行網(wǎng)頁(yè)瀏覽時(shí)看到的內(nèi)容原本都是HTML格式的，在瀏覽器中通過(guò)一些技術(shù)處理將其轉(zhuǎn)換成為了可識(shí)別的信息，HTML5在從前HTML4.01的基礎(chǔ)上進(jìn)行了一定的改進(jìn)。
由于HTML5只是在HTML的基礎(chǔ)上進(jìn)行了新增或者廢棄一些標(biāo)簽或者特性，本文默認(rèn)均為HTML5語(yǔ)法，被廢棄的部分就不再提起，HTML一般用于描述網(wǎng)頁(yè)的結(jié)構(gòu)，所以一些樣式和腳本方面的標(biāo)簽和屬性以及關(guān)于JavaScript部分的特性也不再提及，重點(diǎn)在于梳理常用標(biāo)簽體系。
現(xiàn)今瀏覽器的許多新功能都是從HTML5標(biāo)準(zhǔn)中發(fā)展而來(lái)的。目前常用的瀏覽器有IE、火狐、谷歌、Safari和Opera等等，通過(guò)對(duì)這些主流web瀏覽器的發(fā)展策略調(diào)查，發(fā)現(xiàn)它們都支持HTML5上采取了措施。
（1）IE瀏覽器
2010年3月16日，微軟MIX10技術(shù)大會(huì)上宣布其推出的IE9瀏覽器已經(jīng)支持HTML5。同時(shí)還聲稱，隨后將會(huì)更多的支持HTML新標(biāo)準(zhǔn)和CSS3新特性。
（2）FireFox瀏覽器
2010年7月，Mozilla基金會(huì)發(fā)布了即將推出的Firefox4瀏覽器的第一個(gè)早期測(cè)試版，該版本中Firefox瀏覽器中進(jìn)行了大幅改進(jìn)，包括新的HTML5語(yǔ)法分析器，以及支持更多的HTML5語(yǔ)法分析器，以及支持更多的HTML5形式的控制等。從官方文檔來(lái)看，F(xiàn)irefox4對(duì)HTML5是完全級(jí)別的支持。目前，包括在線視頻，在線音頻在內(nèi)的多種應(yīng)用都已經(jīng)在版本中實(shí)現(xiàn)。
（3）Google瀏覽器
2010年2月19日，谷歌Gears項(xiàng)目經(jīng)理通過(guò)微博宣布，谷歌將放棄對(duì)Gears瀏覽器插件項(xiàng)目的支持，以重點(diǎn)開(kāi)發(fā)HTML5項(xiàng)目。據(jù)費(fèi)特表示，目前在谷歌看來(lái)，Gears應(yīng)用用于HTML5的諸多創(chuàng)新非常相似，并且谷歌一直積極發(fā)展HTML5項(xiàng)目。因此只要谷歌不斷以加強(qiáng)網(wǎng)絡(luò)標(biāo)準(zhǔn)的應(yīng)用功能為工作重點(diǎn)，那么為Gears增加新功能就無(wú)太大意義了。另外，Gears面臨的需求也在日益下降，這也是谷歌做出吊證的重要原因。
（4）Safari瀏覽器
2010年6月7日，蘋果在開(kāi)發(fā)者發(fā)布會(huì)公布Safari5，這款瀏覽器支持10個(gè)以上的HTML5新技術(shù)，包括全屏幕播放、HTML5視頻、HTML5地理位置、HTML5切片元素、HTML5的可拖動(dòng)屬性、HTML5的形式驗(yàn)證、HTML5的Ruby、HTML5的Ajaxl.ishi和WebSocket字幕。
（5）Opera瀏覽器
2010年5月5日，Opera軟件公司首席技術(shù)官，號(hào)稱“CSS之父”的Hakon Wium Lie認(rèn)為，HTML5和CSS3，將會(huì)是全球互聯(lián)網(wǎng)發(fā)展的未來(lái)趨勢(shì)，包括目前Opera在內(nèi)的諸多瀏覽器廠商，紛紛研發(fā)HTML5的相關(guān)產(chǎn)品，web未來(lái)屬于HTML5。
綜上所述，目前這些瀏覽器紛紛朝著HTML5的方向邁進(jìn)，HTML5的時(shí)代即將來(lái)臨。
●Notepad++
●Visual Studio Code
●HBuilderX
●Dreamweaver
●Sublime Text
●Webstorm
Webstorm為本文使用的工具，請(qǐng)自行購(gòu)買激活，也可以使用以上的免費(fèi)工具，安裝步驟都較為簡(jiǎn)單，在此省略！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
單標(biāo)簽：
<標(biāo)簽名 [屬性名=屬性值,...]>
成對(duì)標(biāo)簽：
<標(biāo)簽名 [屬性名=屬性值,...]></標(biāo)簽名>
<h1>這是一級(jí)標(biāo)題</h1>
<h2>這是二級(jí)標(biāo)題</h2>
<h3>這是三級(jí)標(biāo)題</h3>
<h4>這是四級(jí)標(biāo)題</h4>
<h5>這是五級(jí)標(biāo)題</h5>
<h6>這是六級(jí)標(biāo)題</h6>
<p>這是一個(gè)段落</p>
使用示例：
<a href="百度一下，你就知道">打開(kāi)百度，你就知道！</a>
常見(jiàn)屬性：
屬
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度LOGO">
<table border="1px" cellpadding="0px" cellspacing="0px">
<tr>
<th>表頭一</th>
<th>表頭二</th>
<th>表頭三</th>
<th>表頭四</th>
</tr>
<tr>
<td>單元格一</td>
<td>單元格二</td>
<td>單元格三</td>
<td>單元格四</td>
</tr>
</table>
無(wú)序列表：
<ul>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
</ul>
有序列表：
<ol>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
</ol>
自定義列表：
<dl>
<dt>+</dt><dd>列表項(xiàng)</dd>
<dt>+</dt><dd>列表項(xiàng)</dd>
<dt>+</dt><dd>列表項(xiàng)</dd>
</dl>
<div>具體內(nèi)容</div>
<span>具體內(nèi)容</span>
常見(jiàn)標(biāo)簽：
基本布局：
常見(jiàn)標(biāo)簽：
案例演示：
1、form、input、label演示
<form action="" method="get">
<p>
<label for="username">賬戶：</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="password">密碼：</label>
<input type="password" name="password" id="password">
</p>
<p><input type="submit"></p>
</form>
2、textarea演示
<form action="" method="post">
<textarea name="mycontext" cols="30" rows="10"></textarea>
<input type="submit">
</form>
3、fieldset、legend、select、optgroup、option演示
<form action="" method="post">
<fieldset>
<legend>請(qǐng)選擇你的愛(ài)好：</legend>
<select name="myhobby" id="myhobby">
<optgroup label="運(yùn)動(dòng)">
<option value="籃球">籃球</option>
<option value="足球">足球</option>
</optgroup>
<optgroup label="電子">
<option value="看電影">看電影</option>
<option value="看電視">看電視</option>
</optgroup>
</select>
</fieldset>
</form>
4、datalist演示
<form action="" method="post">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
5、單選框演示
<form action="" method="post">
<input type="radio" name="sex" id="male" value="male" checked>
<label for="male">Male</label>
<input type="radio" name="sex" id="female" value="female">
<label for="female">female</label>
</form>
6、復(fù)選框演示
<form action="" method="post">
<input type="checkbox" name="vehicle" id="bike" value="bike">
<label for="bike">I have a bike</label>
<input type="checkbox" name="vehicle" id="car" value="car">
<label for="car">I have a car</label>
</form>
<iframe src="百度一下，你就知道" frameborder="0" width="500px" height="500px"></iframe>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支持 Audio 標(biāo)簽。
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持 Video 標(biāo)簽。
</video>
水平線：<hr>
換行：<br>
<b>粗體文本</b>
<code>計(jì)算機(jī)代碼</code>
<em>強(qiáng)調(diào)文本</em>
<i>斜體文本</i>
<kbd>鍵盤輸入</kbd>
<pre>預(yù)格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr>縮寫詞或者首字母縮略詞</abbr>
<address>聯(lián)系信息</address>
<bdo>文字方向</bdo>
<blockquote>從另一個(gè)源引用的部分</blockquote>
<cite>工作的名稱</cite>
<del>刪除的文本</del>
<ins>插入的文本</ins>
<sub>下標(biāo)文本</sub>
<sup>上標(biāo)文本</sup>
HTML標(biāo)簽可以設(shè)置屬性，屬性總是以名稱/值對(duì)的形式出現(xiàn)，比如：name=“value”，它的主要作用是控制或修飾標(biāo)簽。
HTML事件可以觸發(fā)瀏覽器中的行為，比方說(shuō)當(dāng)用戶點(diǎn)擊某個(gè) HTML 元素時(shí)啟動(dòng)一段 JavaScript。
由窗口觸發(fā)該事件 (同樣適用于 <body> 標(biāo)簽)：
表單事件在HTML表單中觸發(fā) (適用于所有 HTML 元素，但該HTML元素需在form表單內(nèi))：
通過(guò)鍵盤觸發(fā)事件，類似用戶的行為：
通過(guò)鼠標(biāo)觸發(fā)事件，類似用戶的行為：
通過(guò)視頻（videos），圖像（images）或音頻（audio） 觸發(fā)該事件，多應(yīng)用于HTML媒體元素比如：<embed>，<object>，<img>，<audio>和<video>。
課件資料?騰訊文檔
月4日，由9秒社區(qū)和騰訊玩吧合作主辦的HTML5游戲開(kāi)發(fā)者大會(huì)在京召開(kāi)，各路游戲精英相聚一堂，會(huì)上嘉賓就H5游戲的現(xiàn)狀和未來(lái)發(fā)展進(jìn)行了接地氣、有干貨的分享。
如果不是制作精良的，或者有著很好IP的產(chǎn)品，在現(xiàn)在的移動(dòng)游戲市場(chǎng)中是難以存活的。近年來(lái)羽翼漸滿的H5游戲則是一個(gè)新的市場(chǎng)延伸，并且有著越來(lái)越多的像白鷺、騰訊玩吧這樣投入自身資源支持H5游戲開(kāi)發(fā)者的公司出現(xiàn)，用自己的平臺(tái)的資源，去助力推動(dòng)這個(gè)行業(yè)的發(fā)展。
龍圖游戲CEO楊圣輝表示，在自己不久前的日本之行中觀察到，日本的H5游戲市場(chǎng)十分活躍，以H5游戲產(chǎn)品上市，或者成為核心業(yè)務(wù)板塊的公司并不稀奇，并且收入規(guī)模非常之大，營(yíng)收達(dá)到了上億美金。H5游戲首先是一款游戲，所以核心玩法才是玩家的訴求。開(kāi)發(fā)者需要思考的是如何在玩法上做出較大創(chuàng)新。而技術(shù)上的差別會(huì)為H5游戲帶來(lái)更新的特色，對(duì)游戲本身有深刻理解、對(duì)核心玩法有深入研究的團(tuán)體未來(lái)在該領(lǐng)域會(huì)有很大的作為。楊圣輝稱，H5游戲更適合輕玩法，即使是重度玩家也需要有碎片化或者輕量的游戲，只有針對(duì)玩家訴求去做產(chǎn)品才是有效的途徑。
QQ空間技術(shù)副總經(jīng)理石玉磊在會(huì)上表示，今年4月騰訊玩吧的單款H5游戲已經(jīng)超過(guò)200萬(wàn)月流水，雖然與傳統(tǒng)手游相比在一定程度上還有些微不足道，但已經(jīng)讓很多人打消了H5游戲沒(méi)有盈利的看法。這其中核心的數(shù)據(jù)每個(gè)月都會(huì)有20%以上的增漲，并且4個(gè)月就會(huì)翻倍。相比之下現(xiàn)在的傳統(tǒng)手游市場(chǎng)，已是一片紅海，“增長(zhǎng)率不用說(shuō)每個(gè)月增長(zhǎng)20%，一年增長(zhǎng)都不會(huì)有那么高，由此可以看出H5的確是一個(gè)藍(lán)海。”
在綜合了近年平臺(tái)中的游戲數(shù)據(jù)后，騰訊玩吧發(fā)現(xiàn)了H5游戲的四大趨勢(shì)：游戲品質(zhì)逐步提升；游戲類型在多元化的發(fā)展；女性玩家市場(chǎng)巨大；社交渠道幫助拉新。并且梳理了游戲類型的數(shù)據(jù)變化，數(shù)據(jù)顯示養(yǎng)成、對(duì)戰(zhàn)、學(xué)習(xí)、休閑這四個(gè)游戲類型或?qū)?huì)是未來(lái)的爆款類型，石玉磊也表示騰訊玩吧將會(huì)加大對(duì)這四種類型游戲的扶持。
對(duì)于H5游戲開(kāi)發(fā)者而言，社交渠道成為了獲取用戶的重要來(lái)源，所以H5游戲必須滿足社交性，社交性是原生文化做到的能獲取用戶最大化的有效手段。
很多游戲需要通過(guò)廣告來(lái)獲得用戶，但成本較高。相比之下社交渠道則是一個(gè)高質(zhì)量低成本的好選擇，“如果有一個(gè)好友在和你玩同一款游戲，那么通過(guò)QQ或微信給他發(fā)送游戲的情況，會(huì)起到較好的拉動(dòng)作用，充分利用這樣的渠道，對(duì)開(kāi)發(fā)者來(lái)說(shuō)將是一個(gè)高質(zhì)量的低成本的，拉動(dòng)新用戶的好渠道。”石玉磊表示，為了提升次留存率和提升率，騰訊平臺(tái)將向開(kāi)發(fā)者開(kāi)放包括登錄體系、關(guān)系鏈數(shù)據(jù)、支付體系，以實(shí)現(xiàn)H5游戲的社交化，以此刺激玩家去支付，這個(gè)也是微信對(duì)關(guān)系鏈的一個(gè)很大的支持。
在會(huì)上DataEye的CEO汪祥斌還公布了《HTML5游戲Q2數(shù)據(jù)報(bào)告》報(bào)告中顯示，2014年到2015年，移動(dòng)游戲市場(chǎng)的整體收入規(guī)模增速在放緩，增速保持在10%至20%之間。數(shù)據(jù)表明，APP游戲的成本越來(lái)越高，未來(lái)的渠道也趨于飽和，已有達(dá)到天花板之勢(shì)。而在移動(dòng)用戶增長(zhǎng)方面，緣于H5本身具備入口寬泛、易推廣等特征，未來(lái)H5游戲?qū)⑹且粋€(gè)爆發(fā)點(diǎn)，2015年H5游戲用戶將達(dá)到1.71億。
在H5游戲Q2數(shù)據(jù)情況方面， Q2跟Q1相比整體數(shù)值差額不大。次日留存上，Q2為12.14%，比Q1的10.01%提高2.13個(gè)百分點(diǎn)。七日留存走勢(shì)上，HQ2七日留存平均為4%左右，比Q1的3.02%的增加1.69個(gè)百分點(diǎn)。跳出率穩(wěn)定在40%左右，40%就是比之前在2014年監(jiān)測(cè)到就明顯的好轉(zhuǎn)，當(dāng)時(shí)跳出率非常高，說(shuō)明整個(gè)內(nèi)容方面對(duì)玩家的吸引是相當(dāng)不夠的。ARPPU走勢(shì)上，Q1約13.27元，Q2約14.11元，略有提升，但相對(duì)來(lái)說(shuō)仍有提升空間。
對(duì)于此組數(shù)據(jù)，汪祥斌認(rèn)為H5游戲首要解決的問(wèn)題是高付費(fèi)，“現(xiàn)有的H5游戲整體的付費(fèi)情況是達(dá)不到要求的，高付費(fèi)才能帶來(lái)渠道對(duì)H5的一些推動(dòng)，高付費(fèi)是首先要解決的問(wèn)題。”目前H5游戲的付費(fèi)率相對(duì)偏低，Q1平均付費(fèi)率大概1.35%，Q2為1.61%，數(shù)據(jù)相差不大。其中三個(gè)品類游戲在APP游戲里面屬于高吸費(fèi)的品類：角色扮演、棋牌以及模擬經(jīng)營(yíng)。模擬經(jīng)營(yíng)類游戲可以在最大限度發(fā)揮社交性，棋牌類游戲無(wú)論在原生還是H5，都是長(zhǎng)期話題、受眾廣，“這三個(gè)品類值得H5游戲制作團(tuán)隊(duì)去關(guān)注。”
目前的H5還有著很大的掘金空間，但同時(shí)也面臨著一些挑戰(zhàn)。傳統(tǒng)手游也好H5游戲也罷，只有對(duì)在游戲模式上超強(qiáng)的創(chuàng)新能力和以不斷邁向精細(xì)化為目標(biāo)，才可以成功。而這也正是如今游戲行業(yè)中所面臨的最大的挑戰(zhàn)，任何行業(yè)在發(fā)展過(guò)程中都存在機(jī)遇與巧戰(zhàn)，在激烈的市場(chǎng)競(jìng)爭(zhēng)中狹路相逢，只有“智”者才能生存。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
