整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
戲葡萄原創專稿，未經允許請勿轉載
HTML5游戲有哪些做法？在很多人眼里，H5游戲對于他們可能還只是像《圍住神經貓》那樣簡單的樣子——產品形態簡單、推廣方式簡單、盈利模式也很簡單。
在白鷺時代（Egret）今天主辦的HTML5游戲大會上，來自全國各地大大小小的廠商，給出了不同的答案。
關于推廣方式（入口），現在有了QQ瀏覽器、QQ空間、360手機助手、百度貼吧、獵豹瀏覽器等；關于盈利模式，也有廣告變現、游戲內購等；我們會在其他文章中盤點各路觀點。
這里先介紹現在HTML5游戲研發上的一些“進化形態”。
《開心豆豆》于5月上線，墨麟旗下魚之樂研發，已在騰訊玩吧平臺上面運營了半年。基本上兩周一個迭代。
《開心豆豆》針對12-65歲的女性用戶，風格是日系Q版，核心玩法有三個：消除、闖關、手勢效果，后者是玩法上的一個小小的創新。這個游戲看上去很像傳統的三消類游戲，例如《糖果粉碎傳奇》、《開心消消樂》，但實際上它是一款連線消除游戲。闖關模式有主線過關、大關套小關、三星完美闖關等設定。手勢效果是新版本的設定，在同樣的消除不同的連線方式可以產生不同的特效惡搞。此外游戲還設置了一些障礙物，比如巧克力奶油冰塊等等。
該游戲在社交環節中也做了一些嘗試。首先是好友邀請，好友之間可以互相贈送體力和道具。到5月23日為止有近400萬的玩家，其中80%的活躍用戶是女性玩家。未來還會加入主角系統，以美食為主題。主角可以在闖關的過程中收集食材，然后在甜品屋里制做甜品，再參加美食競技。
墨麟魚之樂今天展示的第二款游戲，之前的形態叫做《Q將水滸》，最早出現在QQ瀏覽器的游戲平臺上。當時這款游戲是一款策略養成類游戲，混雜了社交、建設等元素。現在的《口袋江湖》是在《Q將水滸》基礎上，把策劃的數值和體系移植過來，把IP從水滸改為武俠題材，再強化了休閑策略的設定而成的。游戲里面是標準的武俠設定，玩家可以建設門派、招募弟子，稱霸武林等。
游戲的界面不像傳統卡牌，而是有著自己的主城。主城里面所有的建筑都有自己的功能，需要玩家自己去升級。游戲的戰斗是回合制的，雙方各出5個人，進行復雜的戰斗，而不是撞卡式的。所有的英雄有自己的行軍速度、攻擊范圍、攻擊招數等。游戲還設定了資源戰、擂臺賽等體系，玩家之間還可以互相占領主城，而不是像《刀塔傳奇》、《我叫MT》等類似于單機的設定。這樣就突出了玩家之間互動，仇人和仇人之間有互動，鄰居和鄰居之間有互動。
《少女戰機》是一款純HTML5游戲。人設方面，游戲以機娘為中心，將少女的萌和機甲的燃相結合，讓眾多的宅男得以找到自己喜歡的那一款機娘。戰斗模式方面，游戲保留的經典的關卡模式，通過設置出一些無盡關卡，讓老玩家們得以延續他們的挑戰。游戲也打造了一個斬首模式，在里面，玩家需要通過自己對關卡的了解，運用智慧挑戰實力懸殊的BOSS。當玩家獲得一定的成長之后，會需要更多的挑戰來證明自己的實力，逃生模式就是為此而設計的。在逃生模式中，玩家將要在如潮的彈幕中生存下來。
指上繽紛研發一款三國題材的卡牌游戲。將策略游戲的玩法規則和Q版畫風的幽默詼諧深度融合。
中娛在線研發，一款橫版動作卡牌角色扮演類游戲。“我們精心設計了近百種不同的武器和技能，讓玩家在游戲里面能非常自由的收集技能，體驗組合搭建技能的樂趣。然后再圍繞著這個核心創新點，我們采用情感體驗式的設計理念，精心開創了一個相關的成長體系以及相關的一個玩法。然后再配上我們由頂級美術打造的一個一流的遠古游戲世界，能讓玩家從視角到其他游戲體驗都能獲得一流的游戲享受。最后我再確定以及肯定的告訴大家，這就是H5游戲。”
未來人科技研發，橫版回合制戰斗，九宮格策略布陣的游戲。“其實玩法上說白了沒有什么太大的創新，但是我們在美術風格上確實做了很用心的一些設定。”“我們的核心的玩法，簡單來說就是讓玩家去積累一定的游戲內資源，然后去獲取，去購買更多的武將，然后更高星別的武將。核心玩法的策略性上主要體現在九宮格布陣。”“訓練場稍微給玩家開放了一點點類似于掛機類的玩法。你可以不用在線，你把它掛在上面，它就會慢慢的升級。然后這是每天會開的一個Boss戰。”
夢啟科技的一款放置類RPG游戲，也就是掛機游戲。核心玩法上，游戲有仇殺這種創新，也引進來類似傳奇的紅名機制，用這種新的交互方式來增加活躍。在掛機的過程中，玩家還可以通過PK來爆掉其他玩家的裝備，游戲也會在之后增加爆裝的機會和條件。爆掉別人的裝備之后也會產生紅名，上惡人排行榜，吸引別人PK。第二個系統是美人。不同的美人有不同的屬性，有的美人適合打裝備，有的美人適合PK，有的美人適合大BOSS。多個美人可以組成美人陣法，對玩家屬性是一個很大的提升。最后一個核心是跨服。現有的掛機類游戲可以看到，出現了頁游之前的快速開服、快速洗服的現象。這樣會造成當服的用戶活躍度不高，跨服就用來緩解這種問題。
山水地科技的一款重度策略類游戲，采用F2P加道具收費的模式。開發周期前后陸續加起來將近一年。這款游戲13年初已經初見成品，但當時的硬件無法支撐，因此項目停滯了一段時間。到了今年年中，游戲重新進行了一些開發，并且已經在手Q空間上線。
游戲的核心玩法與其他策略游戲類似，但也有航海題材的一些特色，包括航海、冒險、貿易、國戰、占領城市等等。首先，游戲擁有一張非常巨大的地圖，玩家可以在擁有180座城市的世界地圖里航行，在航行的過程中還會遇到風暴等各種隨機探險事件。游戲界面左下角的舵用來控制航行方向，玩家靠扔骰子的結果確定在海上航行的天數。
其次，游戲針對不同的地區設計了不同的建筑風格，如果玩家在加勒比誕生，那么建筑風格就為海盜風，此外還有英格蘭、奧斯曼、華夏等風格。并且這些建筑風格還會發生變化，玩家的游戲行為會影響城市的發展度，發達的地區建筑風格也會相應的更加華麗。
再次，航海題材離不開航海貿易，每個城市都擁有自己的特色商品，這與另外兩個系統相配合。第一，每個城市的商品除了可以低買高賣用來盈利以外，這些商品本身可以作為材料制造裝備和恢復體力的食物。而這個制造系統又與游戲中重要的國戰系統相聯系，游戲中一共有四個國家，四個國家之間會因為爭奪資源而產生沖突，如果城市被敵對國占領，玩家就無法購買這座城市的特色材料。
游戲的PVE基礎系統為探險模式，呈現為第一人稱視角的推圖模式。探險過程中玩家會遇到包括戰斗、好友互動、獲得寶箱物品等多種事件。玩家可以在每個城市中參與到主線任務、日常任務和不同的隨機委托等多種形式的任務。
PVP方面游戲提供多種戰斗模式：海上劫掠遭遇戰、城市切磋戰、城市占領、競技場天梯戰與陣型戰斗策越。
游戲中最重要的就是異步實時多人國戰，每個國家的玩家不管等級高低可以隨時航行到正在發生國戰的城市進行戰斗，每個人都可以做出自己的貢獻。國戰又與游戲中的選舉與官職系統相結合，尤其是當玩家被選舉為國王時，他會產生強烈的社交付費需求。
游戲中還包括卡牌抽取，并且進行了一定的創新。卡牌抽取分為很多類，通過人民幣、紅水晶、黃水晶等不同材料抽取，獲得的英雄具有不同的功能，紅水晶抽取的英雄善于PVE，黃水晶抽取的英雄善于貿易，每一種水晶都與玩家的游戲行為相結合，戰斗時獲得黃水晶，貿易獲得紅水晶等等。此外，每張卡牌都有自己的技能系統，并且可以互相繼承，解決了傳統卡牌游戲的缺陷。
山水地科技一款休閑社交游戲，包含寵物養成、牧場捕捉、戰斗策略、配對交互四大系統，女性用戶占60%以上。
游戲有以下核心玩法：一、配對，玩家可以為自己的小鳥向朋友的小鳥提親、接受提親、共同孵化新的小鳥。二、訓練，玩家可以對小鳥進行訓練和留學。三、入侵，玩家可以入侵獵場或幫助好友反抗。
游戲擁有很強的社交性，具有公會和結婚的功能，有利于增加收入和提高用戶留存率。
游戲的盈利模式為通過群體PVP副本、群體PVE副本以及個人天梯賽等模式刺激玩家不斷提升小鳥的戰斗力。
有愛互動的一款放置類RPG網游，是由文字MUD游戲演化而成，具有實時RPG離線系統與離線掛機訓練系統。游戲玩法包括競技PVP、商城道具、裝備強化、多人團戰以及工會等，游戲中打怪、經驗升級、獲得金幣、掉落裝備都是自動的，游戲行為會在玩家離線后繼續進行。
onstruct 2是一款能夠幫助你制作HTML5電腦游戲的應用程序，它將為你帶來一個清晰直觀、支持“拖拽”操作的開發環境。程序中的大部分工具都可通過圖形界面來使用，完全無需寫下任何代碼，即使你沒有任何編程經驗也能擁有自己的游戲哦。
Construct 2
Construct 2旨在創建2D游戲，內置的各種資源讓游戲制作更加輕松：物理引擎使游戲中的物體支持地心引力，當然還有元件、背景、音效等各種游戲所需的圖形與聲音。另外，將媒體文件導入程序也很簡單。
Construct 2
Construct 2
簡單、直觀的視覺環境是Construct 2所信奉的哲理之一。當你拖拽元件至某個位置時，程序會使該元件與其他物體互動。例如：我的人物->撞墻->停止。很容易理解吧！
Construct 2
Construct 2
免費版允許你將作品導出至HTML5，在任何平臺的任何瀏覽器中運行，但這并不能幫你掙到一分錢。專業付費版則增加了一個導出工具，使用這個工具，你的游戲不僅能在安卓或iOS設備中運行，甚至，你還能創建一個可執行文件，在電腦中運行游戲。
Construct 2
毫無疑問，對于任何想要制作游戲，卻不懂編程的用戶來說，Construct 2都是一款不可多得的工具。簡單好用的工具搭配大量素材，絕對是你創建游戲的好選擇。
者按：今天騰訊的同學從一款HTML5小游戲《植物大戰僵尸》說起，分享一些動畫實現的知識（動畫可控性、如何兼容不同分辨率、如何識別平板手機等），附上眾多實現小技巧，來收 >>>
hello~大家好，我是黑米！ Ｏ(≧▽≦)Ｏ
今天我來跟大家分享一些動畫實現的相關知識，希望大家能夠支持（鞠躬……
我很喜歡很喜歡看動畫片，一直有做出好看動畫片的夢想……所以最近做了不少動畫效果來玩兒，也為自己以后可以做出偉大的動畫片打好基礎！
Web端動畫表現有不少辦法，我列一些常見的，然后再說說在實現上的一些小技巧。
進入正題，我要開始認真了！（嚴肅臉…… (￣ー￣〃)
嗯……首先大家先來跟我一起玩個游戲，請快速的掏出手機，打開微信，“掃一掃”下面的二維碼，通關最多的前三名同學……什么獎品都沒有！！
相信大家都認真的玩兒了游戲吧？我們這里有一位萬技師一直玩到50多關，最后體力透支，主動“自殺”，否則相信他能玩出過百關，怎么做到的？有彩蛋，不知道你有沒有發現，哈哈……
嗯……回歸正題，這個小游戲當中用到了大量的動畫效果，主要是逐幀動畫，今天的第一部分，就先來講講動畫這個事情。
我先來列一排動畫效果給大家看……
圖1
圖2
圖3
剛才上面列的動畫效果分別是 GIF 動畫、Canvas + CSS 動畫、逐幀動畫。其實說起常見的動畫實現，除了 GIF（APNG）、Flash 和 Canvas 外，其他基本都是 CSS 動畫，即使是通過 JS 實現，大部分情況下只是通過 JS 來修改 CSS 屬性而已。
而 GIF 動畫僅支持 8 位色，顏色偏少，雖然 APNG 解決了這個問題，但是存在兼容問題，同時它和 GIF 一樣，沒有可控性，所以它們一般很少用于動畫制作流程中，僅用來展示。相對來說 CSS 動畫和 Canvas 動畫的可控性更易于制作頁面效果動畫以及頁面游戲。
一、可控性
剛才說了“可控性”，那到底什么是可控性？我們先來看一個動畫效果的大概示意圖！
一段動畫一般由“開始 – 過渡 – 結束”來組成，GIF 動畫是無法通過代碼來獲取到這些狀態的，但 CSS 動畫可以！
我這里的做法是把每一組圖片合成一張“雪碧圖”，然后利用 CSS 的 animation 做逐幀動畫，寫好函數通過不同的參數來調用不同的角色。
Role（dirt）
Role（rises）
Role（cast）
Role（broken）
Role（death）
合成“雪碧圖”的逐幀動畫
像上面 圖2 和 圖3 的例子，都是由好幾個動畫銜接完成，那么它們之間如何銜接呢？有的同學可能會說用setTimeout/setInterval/requestAnimationFrame 一類的延遲功能來做銜接，但是這樣會有個問題就是在性能不同的機器上，會有誤差，而且維護繁瑣。所以，我們需要一個觸發形式的銜接方式，即上一個動畫完成了，通知下一個動畫開始。
CSS 動畫實現一般使用 animation 和 transition 來搭配其他屬性使元素產生不同變化，從而達到動畫效果。
而這兩個屬性是可以通過 JS 中的事件來監聽到“開始”和“結束”狀態。具體事件如下：
animationstart：
animationstart 事件在 CSS animation 開始時被觸發。如果有 animation-delay ，事件將在延遲時效過期之后立即觸發。 如果延遲時效是負值，事件觸發時將帶有等于延遲時效絕對值的 elapsedTime 。
animationend：
animationstart 事件在 CSS animation 完成時被觸發。
transionstart：
transionstart 事件在 CSS transition 過渡開始時被觸發。
transitionend：
transitionend 事件會在 CSS transition 結束后觸發。當 transition 完成前移除 transition 時，比如移除 CSS 的 transition-property 屬性，事件將不會被觸發。
這些事件在不同瀏覽器下需要加前綴什么的大家應該都懂得，至于 transionstart，目前僅在 IE10+ 上有效……
通過事件監聽的方式銜接，并利用分層的形式疊加多重動畫，最終實現效果：
現在，開始狀態和結束狀態獲取到了，那中間的過渡狀態要怎么辦呢？比如說我要動畫執行到 30% 的時候，執行一個回調，親一口姐姐，腫么辦？?(?ε??)
雖然沒有直接的事件可以監聽到過渡狀態，而且這個需求中也暫時用不到這個過渡狀態監聽，但是我們也可以稍微做點事情的。（不拋棄，不放棄！）
怎么做呢？比如一個動畫的執行時間是10s，那么在動畫開始的時候，跑一個 setInterval 來不斷的記錄過渡狀態，然后用當前跑到的值和總時長就能算出具體的進度了。這里要稍微注意一下，因為動畫播放控制（animation-play-state）屬性的存在，在暫停和重新播放時，需要對計時器稍微進行一下處理，否則得出的進度值會有錯誤。
這不是一個很完美的辦法，因為在不同的性能下，計時器的值可能會有微弱誤差，但如果你要求并不是很精確，還是可以嘗試這個辦法的。
二、如何 Perfect 的兼容各分辨率？
兼容各式屏幕一般有這樣的辦法：
還有這樣的辦法：
最后，還有傳說中的彈性自適應布局：∑(O_O；)
但是，在這個需求上，統統不適用！為什么？
viewport 和 media Query 在 iOS 和 Android 上識別的單位不同，在 iOS 上識別的是“設備像素”，而在 Android 上識別的是“CSS像素”，這兩個詞后面會講到。
因為這個頁面游戲上有大量的元素用到絕對定位，如果使用彈性自適應布局的話，會進行大量的布局計算，而且還不一定精準。
所以，這里的解決辦法是通過 discrimina.appVersion 獲取 UA 信息中的關鍵字來判斷不同的系統，針對不同的系統做不同的解決方案，Android 對最外層 div 進行 zoom 縮放，而 iOS 使用 viewport 縮放：
三、如何 Perfect 的識別平板和手機？
各設備上的布局問題解決了，但是如果設備屏幕比較大，你的圖片是糊的，怎么辦？
也許有的同學會舉手說去檢測 CSS 分辨率，但是這里就有問題了……有的老舊平板可能屏幕尺寸大，但 CSS 分辨率小；而有的新手機屏幕尺寸不如平板，但是 CSS 分辨率挺高，咋辦？
回歸現實，我們分辨平板和手機是以什么來分辨的？屏幕尺寸，對吧？那么我們這里也同樣，只要想辦法計算出訪問者的屏幕尺寸即可，就是平常我們說的幾寸屏…幾寸屏的那個尺寸。
怎么獲取那個尺寸呢？我們這里先來學習一些專業術語……
標紅的“屏幕尺寸”是我們的目標，綠色的元素是我們后續會用到的東西，其中我們可以直接通過 JS 獲取到的只有最后兩項，即“設備像素”和“設備像素比”。
然后我們來看看“屏幕尺寸”的計算公示：
屏幕尺寸 = 屏幕對角線的CSS像素值/（設備像素比*PPI） = (√長2+寬2)/（設備像素比*PPI）
屏幕是矩形，矩形對角線的計算公示就是上方右側那個公示；現在我們來看一下這個公示中用到的元素如何獲得……
現在，萬事俱備，就差 PPI，這東西雖然沒有直接獲取方式，但是我查了一下資料，還是得到了一些數據。
注意，這里給的是基準值，我們常說的 iPhone 多少多少 PPI，那個值是用基準值乘以設備像素比得出來的。由于 Android 手機廠商眾多，并沒有統一的標準，這里的 160 只是約等值，所以 Android 屏幕尺寸結果會有誤差，但是基本也夠用了。
現在公式中的所有要素都已經齊備了，具體在代碼中實現，就是下面這樣子：
得出的值，單位是“英寸”，我們根據這個值就可以考慮針對平板和手機等不同屏幕尺寸做不同的事情了，比如最基本的，換一套高清圖……
四、音頻之殤 (T^T)
這個小游戲中一共用到3類音頻，共6個音頻，且存在同時播放問題，iOS 下沒問題，但是 Android 下會出現后播放的音頻打斷之前播放音頻的問題。
我測試了一些設備，發現無跡可尋，有的老設備支持，新設備反而不支持。我的解決辦法是 Android 用戶僅播放關鍵音頻，比如這個游戲當中就是背景音樂，其他的就不放了。因為沒辦法判斷設備到底是否支持多音頻同時播放……
五、形變+位移+旋轉=？
剛才講了“活捉兵馬俑”那個游戲的一些經驗技巧，現在講講幾個 CSS 小屬性搭配起來可以做的東西。
不可否認，做動畫 Flash 是走在前面的，它的很多表現形式都值得我們借鑒，比如說這位豌豆射手。
這個豌豆的需求是一個雙屏互動需求，PC 端使用 Flash 實現，移動端沒辦法用 Flash，所以動態效果我就照著臨摹了下來。
具體做法是把豌豆拆成不同的小組件，然后再利用 animation、translate、scale、rotate，拼合出一個完整的動態效果，并沒有多少技術含量，但幾種屬性的搭配使用，讓這顆豌豆看起來還是挺贊的！
等于
所以，很多屬性稍微搭配一下，其實就可以做出很好玩的東西。哈哈……
六、其他一些小細節……
看了這么久的文章，你可能也累了，下面一些小細節快速過一下……
1）不要放棄 PC 訪問的用戶，如果沒有很好的引導，他們會直接關閉網頁的。
2）如果是橫屏沒法用的頁面，給予良好的橫屏提示。
3）為用戶添加桌面圖標，方便用戶啟動頁面。
好的，今天的分享基本就這樣告一段落，欲知后事兒如何，請聽下回分解！
原文地址：tgideas
優秀網頁設計公眾微信號：youshege碎片時間學習利器！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
