戲葡萄原創(chuàng)專稿，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載

HTML5游戲有哪些做法？在很多人眼里，H5游戲?qū)τ谒麄兛赡苓€只是像《圍住神經(jīng)貓》那樣簡(jiǎn)單的樣子——產(chǎn)品形態(tài)簡(jiǎn)單、推廣方式簡(jiǎn)單、盈利模式也很簡(jiǎn)單。

在白鷺時(shí)代（Egret）今天主辦的HTML5游戲大會(huì)上，來(lái)自全國(guó)各地大大小小的廠商，給出了不同的答案。

關(guān)于推廣方式（入口），現(xiàn)在有了QQ瀏覽器、QQ空間、360手機(jī)助手、百度貼吧、獵豹瀏覽器等；關(guān)于盈利模式，也有廣告變現(xiàn)、游戲內(nèi)購(gòu)等；我們會(huì)在其他文章中盤點(diǎn)各路觀點(diǎn)。

這里先介紹現(xiàn)在HTML5游戲研發(fā)上的一些“進(jìn)化形態(tài)”。

消除游戲《開(kāi)心豆豆》

《開(kāi)心豆豆》于5月上線，墨麟旗下魚(yú)之樂(lè)研發(fā)，已在騰訊玩吧平臺(tái)上面運(yùn)營(yíng)了半年。基本上兩周一個(gè)迭代。

《開(kāi)心豆豆》針對(duì)12-65歲的女性用戶，風(fēng)格是日系Q版，核心玩法有三個(gè)：消除、闖關(guān)、手勢(shì)效果，后者是玩法上的一個(gè)小小的創(chuàng)新。這個(gè)游戲看上去很像傳統(tǒng)的三消類游戲，例如《糖果粉碎傳奇》、《開(kāi)心消消樂(lè)》，但實(shí)際上它是一款連線消除游戲。闖關(guān)模式有主線過(guò)關(guān)、大關(guān)套小關(guān)、三星完美闖關(guān)等設(shè)定。手勢(shì)效果是新版本的設(shè)定，在同樣的消除不同的連線方式可以產(chǎn)生不同的特效惡搞。此外游戲還設(shè)置了一些障礙物，比如巧克力奶油冰塊等等。

該游戲在社交環(huán)節(jié)中也做了一些嘗試。首先是好友邀請(qǐng)，好友之間可以互相贈(zèng)送體力和道具。到5月23日為止有近400萬(wàn)的玩家，其中80%的活躍用戶是女性玩家。未來(lái)還會(huì)加入主角系統(tǒng)，以美食為主題。主角可以在闖關(guān)的過(guò)程中收集食材，然后在甜品屋里制做甜品，再參加美食競(jìng)技。

卡牌對(duì)戰(zhàn)《口袋江湖》

墨麟魚(yú)之樂(lè)今天展示的第二款游戲，之前的形態(tài)叫做《Q將水滸》，最早出現(xiàn)在QQ瀏覽器的游戲平臺(tái)上。當(dāng)時(shí)這款游戲是一款策略養(yǎng)成類游戲，混雜了社交、建設(shè)等元素。現(xiàn)在的《口袋江湖》是在《Q將水滸》基礎(chǔ)上，把策劃的數(shù)值和體系移植過(guò)來(lái)，把IP從水滸改為武俠題材，再?gòu)?qiáng)化了休閑策略的設(shè)定而成的。游戲里面是標(biāo)準(zhǔn)的武俠設(shè)定，玩家可以建設(shè)門派、招募弟子，稱霸武林等。

游戲的界面不像傳統(tǒng)卡牌，而是有著自己的主城。主城里面所有的建筑都有自己的功能，需要玩家自己去升級(jí)。游戲的戰(zhàn)斗是回合制的，雙方各出5個(gè)人，進(jìn)行復(fù)雜的戰(zhàn)斗，而不是撞卡式的。所有的英雄有自己的行軍速度、攻擊范圍、攻擊招數(shù)等。游戲還設(shè)定了資源戰(zhàn)、擂臺(tái)賽等體系，玩家之間還可以互相占領(lǐng)主城，而不是像《刀塔傳奇》、《我叫MT》等類似于單機(jī)的設(shè)定。這樣就突出了玩家之間互動(dòng)，仇人和仇人之間有互動(dòng)，鄰居和鄰居之間有互動(dòng)。

冰河工作室《少女戰(zhàn)機(jī)》

《少女戰(zhàn)機(jī)》是一款純HTML5游戲。人設(shè)方面，游戲以機(jī)娘為中心，將少女的萌和機(jī)甲的燃相結(jié)合，讓眾多的宅男得以找到自己喜歡的那一款機(jī)娘。戰(zhàn)斗模式方面，游戲保留的經(jīng)典的關(guān)卡模式，通過(guò)設(shè)置出一些無(wú)盡關(guān)卡，讓老玩家們得以延續(xù)他們的挑戰(zhàn)。游戲也打造了一個(gè)斬首模式，在里面，玩家需要通過(guò)自己對(duì)關(guān)卡的了解，運(yùn)用智慧挑戰(zhàn)實(shí)力懸殊的BOSS。當(dāng)玩家獲得一定的成長(zhǎng)之后，會(huì)需要更多的挑戰(zhàn)來(lái)證明自己的實(shí)力，逃生模式就是為此而設(shè)計(jì)的。在逃生模式中，玩家將要在如潮的彈幕中生存下來(lái)。

《萌呆了三國(guó)》

指上繽紛研發(fā)一款三國(guó)題材的卡牌游戲。將策略游戲的玩法規(guī)則和Q版畫(huà)風(fēng)的幽默詼諧深度融合。

《覺(jué)醒》

中娛在線研發(fā)，一款橫版動(dòng)作卡牌角色扮演類游戲。“我們精心設(shè)計(jì)了近百種不同的武器和技能，讓玩家在游戲里面能非常自由的收集技能，體驗(yàn)組合搭建技能的樂(lè)趣。然后再圍繞著這個(gè)核心創(chuàng)新點(diǎn)，我們采用情感體驗(yàn)式的設(shè)計(jì)理念，精心開(kāi)創(chuàng)了一個(gè)相關(guān)的成長(zhǎng)體系以及相關(guān)的一個(gè)玩法。然后再配上我們由頂級(jí)美術(shù)打造的一個(gè)一流的遠(yuǎn)古游戲世界，能讓玩家從視角到其他游戲體驗(yàn)都能獲得一流的游戲享受。最后我再確定以及肯定的告訴大家，這就是H5游戲。”

《刀塔戰(zhàn)神》

未來(lái)人科技研發(fā)，橫版回合制戰(zhàn)斗，九宮格策略布陣的游戲。“其實(shí)玩法上說(shuō)白了沒(méi)有什么太大的創(chuàng)新，但是我們?cè)诿佬g(shù)風(fēng)格上確實(shí)做了很用心的一些設(shè)定。”“我們的核心的玩法，簡(jiǎn)單來(lái)說(shuō)就是讓玩家去積累一定的游戲內(nèi)資源，然后去獲取，去購(gòu)買更多的武將，然后更高星別的武將。核心玩法的策略性上主要體現(xiàn)在九宮格布陣。”“訓(xùn)練場(chǎng)稍微給玩家開(kāi)放了一點(diǎn)點(diǎn)類似于掛機(jī)類的玩法。你可以不用在線，你把它掛在上面，它就會(huì)慢慢的升級(jí)。然后這是每天會(huì)開(kāi)的一個(gè)Boss戰(zhàn)。”

《狂掛傳奇》

夢(mèng)啟科技的一款放置類RPG游戲，也就是掛機(jī)游戲。核心玩法上，游戲有仇殺這種創(chuàng)新，也引進(jìn)來(lái)類似傳奇的紅名機(jī)制，用這種新的交互方式來(lái)增加活躍。在掛機(jī)的過(guò)程中，玩家還可以通過(guò)PK來(lái)爆掉其他玩家的裝備，游戲也會(huì)在之后增加爆裝的機(jī)會(huì)和條件。爆掉別人的裝備之后也會(huì)產(chǎn)生紅名，上惡人排行榜，吸引別人PK。第二個(gè)系統(tǒng)是美人。不同的美人有不同的屬性，有的美人適合打裝備，有的美人適合PK，有的美人適合大BOSS。多個(gè)美人可以組成美人陣法，對(duì)玩家屬性是一個(gè)很大的提升。最后一個(gè)核心是跨服。現(xiàn)有的掛機(jī)類游戲可以看到，出現(xiàn)了頁(yè)游之前的快速開(kāi)服、快速洗服的現(xiàn)象。這樣會(huì)造成當(dāng)服的用戶活躍度不高，跨服就用來(lái)緩解這種問(wèn)題。

《海國(guó)戰(zhàn)紀(jì)》

山水地科技的一款重度策略類游戲，采用F2P加道具收費(fèi)的模式。開(kāi)發(fā)周期前后陸續(xù)加起來(lái)將近一年。這款游戲13年初已經(jīng)初見(jiàn)成品，但當(dāng)時(shí)的硬件無(wú)法支撐，因此項(xiàng)目停滯了一段時(shí)間。到了今年年中，游戲重新進(jìn)行了一些開(kāi)發(fā)，并且已經(jīng)在手Q空間上線。

游戲的核心玩法與其他策略游戲類似，但也有航海題材的一些特色，包括航海、冒險(xiǎn)、貿(mào)易、國(guó)戰(zhàn)、占領(lǐng)城市等等。首先，游戲擁有一張非常巨大的地圖，玩家可以在擁有180座城市的世界地圖里航行，在航行的過(guò)程中還會(huì)遇到風(fēng)暴等各種隨機(jī)探險(xiǎn)事件。游戲界面左下角的舵用來(lái)控制航行方向，玩家靠扔骰子的結(jié)果確定在海上航行的天數(shù)。

其次，游戲針對(duì)不同的地區(qū)設(shè)計(jì)了不同的建筑風(fēng)格，如果玩家在加勒比誕生，那么建筑風(fēng)格就為海盜風(fēng)，此外還有英格蘭、奧斯曼、華夏等風(fēng)格。并且這些建筑風(fēng)格還會(huì)發(fā)生變化，玩家的游戲行為會(huì)影響城市的發(fā)展度，發(fā)達(dá)的地區(qū)建筑風(fēng)格也會(huì)相應(yīng)的更加華麗。

再次，航海題材離不開(kāi)航海貿(mào)易，每個(gè)城市都擁有自己的特色商品，這與另外兩個(gè)系統(tǒng)相配合。第一，每個(gè)城市的商品除了可以低買高賣用來(lái)盈利以外，這些商品本身可以作為材料制造裝備和恢復(fù)體力的食物。而這個(gè)制造系統(tǒng)又與游戲中重要的國(guó)戰(zhàn)系統(tǒng)相聯(lián)系，游戲中一共有四個(gè)國(guó)家，四個(gè)國(guó)家之間會(huì)因?yàn)闋?zhēng)奪資源而產(chǎn)生沖突，如果城市被敵對(duì)國(guó)占領(lǐng)，玩家就無(wú)法購(gòu)買這座城市的特色材料。

游戲的PVE基礎(chǔ)系統(tǒng)為探險(xiǎn)模式，呈現(xiàn)為第一人稱視角的推圖模式。探險(xiǎn)過(guò)程中玩家會(huì)遇到包括戰(zhàn)斗、好友互動(dòng)、獲得寶箱物品等多種事件。玩家可以在每個(gè)城市中參與到主線任務(wù)、日常任務(wù)和不同的隨機(jī)委托等多種形式的任務(wù)。

PVP方面游戲提供多種戰(zhàn)斗模式：海上劫掠遭遇戰(zhàn)、城市切磋戰(zhàn)、城市占領(lǐng)、競(jìng)技場(chǎng)天梯戰(zhàn)與陣型戰(zhàn)斗策越。

游戲中最重要的就是異步實(shí)時(shí)多人國(guó)戰(zhàn)，每個(gè)國(guó)家的玩家不管等級(jí)高低可以隨時(shí)航行到正在發(fā)生國(guó)戰(zhàn)的城市進(jìn)行戰(zhàn)斗，每個(gè)人都可以做出自己的貢獻(xiàn)。國(guó)戰(zhàn)又與游戲中的選舉與官職系統(tǒng)相結(jié)合，尤其是當(dāng)玩家被選舉為國(guó)王時(shí)，他會(huì)產(chǎn)生強(qiáng)烈的社交付費(fèi)需求。

游戲中還包括卡牌抽取，并且進(jìn)行了一定的創(chuàng)新。卡牌抽取分為很多類，通過(guò)人民幣、紅水晶、黃水晶等不同材料抽取，獲得的英雄具有不同的功能，紅水晶抽取的英雄善于PVE，黃水晶抽取的英雄善于貿(mào)易，每一種水晶都與玩家的游戲行為相結(jié)合，戰(zhàn)斗時(shí)獲得黃水晶，貿(mào)易獲得紅水晶等等。此外，每張卡牌都有自己的技能系統(tǒng)，并且可以互相繼承，解決了傳統(tǒng)卡牌游戲的缺陷。

《小鳥(niǎo)情人》

山水地科技一款休閑社交游戲，包含寵物養(yǎng)成、牧場(chǎng)捕捉、戰(zhàn)斗策略、配對(duì)交互四大系統(tǒng)，女性用戶占60%以上。

游戲有以下核心玩法：一、配對(duì)，玩家可以為自己的小鳥(niǎo)向朋友的小鳥(niǎo)提親、接受提親、共同孵化新的小鳥(niǎo)。二、訓(xùn)練，玩家可以對(duì)小鳥(niǎo)進(jìn)行訓(xùn)練和留學(xué)。三、入侵，玩家可以入侵獵場(chǎng)或幫助好友反抗。

游戲擁有很強(qiáng)的社交性，具有公會(huì)和結(jié)婚的功能，有利于增加收入和提高用戶留存率。

游戲的盈利模式為通過(guò)群體PVP副本、群體PVE副本以及個(gè)人天梯賽等模式刺激玩家不斷提升小鳥(niǎo)的戰(zhàn)斗力。

《全民掛機(jī)》

有愛(ài)互動(dòng)的一款放置類RPG網(wǎng)游，是由文字MUD游戲演化而成，具有實(shí)時(shí)RPG離線系統(tǒng)與離線掛機(jī)訓(xùn)練系統(tǒng)。游戲玩法包括競(jìng)技PVP、商城道具、裝備強(qiáng)化、多人團(tuán)戰(zhàn)以及工會(huì)等，游戲中打怪、經(jīng)驗(yàn)升級(jí)、獲得金幣、掉落裝備都是自動(dòng)的，游戲行為會(huì)在玩家離線后繼續(xù)進(jìn)行。

端工作都是從創(chuàng)建一個(gè)網(wǎng)頁(yè)文件開(kāi)始的，一個(gè)最小的網(wǎng)頁(yè)文件應(yīng)該總是包含一些東西。

聲明文檔類型

• <!doctype html>- HTML5。

網(wǎng)頁(yè)標(biāo)題

• <title></title>-標(biāo)題。

定義字符編碼

• <meta charset="utf-8">- UTF8。

定義視口的寬度

• <meta name="viewport" content="width=device-width, initial-scale=1"> 針對(duì)移動(dòng)設(shè)備進(jìn)行優(yōu)化并防止縮放或水平滾動(dòng)。

包含指向自定義 CSS 和 JavaScript 的鏈接

• css/style.css 樣式文件 和 js/scripts.js js文件。

使用最新的 Internet Explorer 渲染模式（可選）

• <meta http-equiv="x-ua-compatible" content="ie=edge">-不是強(qiáng)制性的，但可能會(huì)有所幫助。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>標(biāo)題</title>
    <link rel="stylesheet" href="css/main.css" />
    <link rel="icon" href="images/favicon.png" />
  </head>
  <body>
    <script src="js/scripts.js"></script>
  </body>
</html>

其中，head 主要包含，提供有關(guān)頁(yè)面的元信息標(biāo)簽 <meta>，比如 針對(duì)搜索引擎 ，關(guān)鍵詞和描述及編碼類型等，網(wǎng)頁(yè)標(biāo)題，css樣式文件。

一般建議，script 標(biāo)簽寫(xiě)在body 結(jié)束之前。

是不是很簡(jiǎn)單，這是一個(gè)網(wǎng)頁(yè)的基本框架，要想制作一個(gè)內(nèi)容豐富，漂亮的網(wǎng)頁(yè)，還需要學(xué)習(xí)很多知識(shí)。

需要重點(diǎn)學(xué)習(xí)的幾個(gè)點(diǎn)

• meta 標(biāo)簽，這個(gè)標(biāo)簽類型很多，可以參考這里以下：

https://www.w3school.com.cn/tags/tag_meta.asp

https://www.haorooms.com/post/html_meta_ds

• 在HTML中使用css樣式的方法有：行內(nèi)式、內(nèi)嵌式、外聯(lián)式，而外聯(lián)式又分：鏈接式（link）和導(dǎo)入式（@import）
• script 腳本文件

到此，你基本已經(jīng)了解了如何制作一個(gè)網(wǎng)頁(yè)，建議能夠親手練習(xí)下，這樣加深理解。

接下來(lái)，我會(huì)大概講下，網(wǎng)頁(yè)如何布局并填充內(nèi)容，感謝您的關(guān)注。