從“跳一跳”到“羊了個羊”微信小游戲上線4年時間，除了涌現(xiàn)出不少火爆全網(wǎng)的小游戲之外，也有類似于“動物餐廳”、“口袋奇兵”等游戲得以在此孵化繁榮，憑借著微信強大的社交屬性小游戲成為游戲廠商在桌面端、App 端、H5 端之外爭奪的另一個窗口。

依托小程序而誕生的小游戲為什么能夠受到如此大的關(guān)注？拋開桌面端和 App 端而言，與 HTML5 游戲相近的小程序游戲為何能頻頻出爆款出圈？

小游戲的前世今生

小游戲從微信小程序誕生，我們不妨看看他的官方定義：小游戲是以小程序為載體的新游戲產(chǎn)品形態(tài)，具備無需下載、即點即玩、體驗輕便等特點。

「呼朋引伴，說玩就玩，玩完就走」，這或許是對小游戲最準(zhǔn)確的定義。

小游戲的前世

如果要追溯的話，在2016年4月12日，微信發(fā)布《微信外鏈規(guī)范》，將誘導(dǎo)分享、誘導(dǎo)關(guān)注、H5游戲等9大類外部鏈接內(nèi)容列為違規(guī)內(nèi)容，一經(jīng)發(fā)現(xiàn)將立即作停止訪問、屏蔽鏈接等處理。此舉一度引發(fā)行業(yè)對于“微信要封殺H5游戲”的擔(dān)憂。但現(xiàn)在看來，提前規(guī)范H5游戲鏈接分享行為，除了凈化朋友圈內(nèi)容，也正是騰訊在為微信開放H5游戲平臺鋪路。

2017年，騰訊正式在微信、手Q兩大社交平臺啟動H5手游首輪測試，首款測試產(chǎn)品是其經(jīng)典當(dāng)家休閑游戲之一《天天愛消除》。隨即通知小程序功能升級，正式推出小游戲。

在早期小游戲的玩法非常簡單，更多類似連連看、俄羅斯方塊、找不同等，比如俄羅斯方塊，這種主要的技術(shù)點就是 DOM 操作，用 jQuery 原生 javascript css3 就可以了。畫面內(nèi)元素比較簡單，邏輯不會太復(fù)雜，結(jié)構(gòu)與常規(guī)Web 頁面一致；主要技術(shù)點：DOM 元素、jQuery、原生javascript css3。

現(xiàn)在更復(fù)雜了一些，加了各種賽車類的、低畫質(zhì)格斗類的和塔防類的等等，總而言之就是在方便使用、方便運行、保證能玩的基礎(chǔ)上使玩法更多、體驗更優(yōu)秀。

小游戲的今生

根據(jù)騰訊官方在2022年發(fā)布的數(shù)據(jù)顯示，目前小游戲的開發(fā)者已經(jīng)達到10萬+，其中2021年實現(xiàn)了超 30%的商業(yè)增長，連續(xù)三年保持可觀的增速，全年流水破千萬的小游戲產(chǎn)品超過50款，過億流水7款。

從數(shù)據(jù)可以明顯看到，小游戲生態(tài)走向繁榮，其背后的商業(yè)規(guī)模也在持續(xù)的增長。

小游戲和H5游戲相比有何優(yōu)勢

H5 游戲的技術(shù)特點

H5 游戲在QQ農(nóng)場、搶車位、4399小游戲的帶動下，曾經(jīng)也是達到過巔峰的，2017年 H5 游戲市場為30億元，手游市場規(guī)模達到1440億元。如果要說H5游戲的技術(shù)特點，主要應(yīng)用到 DOM CSS、Canvas、WebGL，以及一些游戲引擎。

優(yōu)點：

• 開發(fā)成本相對低
• 跨系統(tǒng)、跨終端、跨平臺
• 無需下載安裝，即點即玩

缺點：

• 制作門檻相對低
• 缺少固定流量入口
• 體驗差距（性能、流量等）

小游戲的技術(shù)特點

小游戲是在 H5 游戲的基礎(chǔ)上增加微信社交能力、文件系統(tǒng)、工具鏈，去掉一些對游戲開發(fā)不是那么重要的，像Dom、Bom 等，微信小游戲沒有 webview 了，H5 規(guī)范 API 這里是微信小游戲 sdk 自己實現(xiàn)的，比如 canvas webgl。

優(yōu)點：

• 小游戲的操作邏輯更多，能夠?qū)崿F(xiàn)手搓鍵盤秀操作，而 H5 游戲只能做到點擊互動
• 能夠調(diào)用系統(tǒng)的藍牙、音頻權(quán)限
• 有固定的流量入口，可以實現(xiàn)用戶的持續(xù)運營變現(xiàn)
• 性能比 HTML5 要高，運行狀況也更加穩(wěn)定
• 小游戲的畫質(zhì)強體驗更好，也能玩到不少創(chuàng)意十足的

缺點：

• 僅能單一的運行在微信或抖音等平臺
• 游戲的開發(fā)和運營受限于各個平臺標(biāo)準(zhǔn)

為了更為直觀的進行對比，將一些重要的點梳理成為表格形式供大家參考：

	小游戲	HTML5 游戲
編程語言	JavaScript, TypeScript	JavaScript, TypeScript
入口	微信/支持小程序游戲運行的App	瀏覽器、公眾號…
可用內(nèi)存	中	低
性能上限	中	低
交互豐富度	高	低
留存 & ARPU	高（風(fēng)口&紅海）	低
點擊+激活轉(zhuǎn)化率	高	高
常見的開發(fā)團隊配置	研發(fā)_2+美術(shù)_1+策劃*1	研發(fā)_1+美術(shù)_1+策劃*1
常見代表	跳一跳、歡樂斗地主、羊了個羊、動物餐廳、叫我大掌柜、咸魚之王……	QQ 搶車位、QQ 農(nóng)場（偷菜）、圍住神經(jīng)貓……

游戲引擎支持度

雖然我們前面說了很多HTML5 與小游戲的區(qū)別，但請注意，無論怎樣的引擎，最終在游戲運行時所做的大部分事情都是隨著用戶的交互更新畫面和播放聲音。

游戲引擎是指一些已編寫好的可編輯電腦游戲系統(tǒng)或者一些交互式實時圖像應(yīng)用程序的核心組件。這些系統(tǒng)為游戲設(shè)計者提供各種編寫游戲所需的各種工具，其目的在于讓游戲設(shè)計者能容易和快速地做出游戲程式而不用由零開始。

小游戲的開發(fā)語言是 JavaScript，那么在引擎的底層就需要通過 JavaScript 調(diào)用繪制 API 和音頻 API。在小游戲中，常見的引擎如下：

引擎	理念
Creat.js	一個非常輕量的，基于 HTML5 開發(fā)的游戲、動畫、交互應(yīng)用引擎
Pixi.js	高性能的 WebGL 模式 2D 渲染引擎，API 簡陋，常被 JS 框架封裝為渲染內(nèi)核
Three.js	基于 WebGL 的 3D 渲染引擎庫
Layabox	支持AS3\TSVS三種語言，可同時發(fā)布H5、APP、Flash版本，追求性能極致
Egret（白鷺）	自建工具鏈工作流，參考Flash AS3 API的移動端H5引擎，支持打包APP（但是這個好像倒閉了）
Cocos2d-js	cocos2d-js繼承原生cocos2d引擎的設(shè)計理念，API也參考原生cocos2d-x
unity	騰訊自行開發(fā)的 unity 引擎小游戲轉(zhuǎn)換技術(shù)

小游戲和H5游戲的關(guān)系也并不是非黑即白的關(guān)系，小游戲在H5游戲的基礎(chǔ)上不斷的優(yōu)化，更像是我中有你的關(guān)系，但不管怎么將技術(shù)的持續(xù)推陳出新形成了對用戶來講更佳優(yōu)質(zhì)的體驗，就是一件好事。

最后

整理了一套《前端大廠面試寶典》，包含了HTML、CSS、JavaScript、HTTP、TCP協(xié)議、瀏覽器、VUE、React、數(shù)據(jù)結(jié)構(gòu)和算法，一共201道面試題，并對每個問題作出了回答和解析。

有需要的小伙伴，可以點擊文末卡片領(lǐng)取這份文檔，無償分享

部分文檔展示：

文章篇幅有限，后面的內(nèi)容就不一一展示了

有需要的小伙伴，可以點下方卡片免費領(lǐng)取