一. 前言
作者曾經一度的迷戀H5小遊戲（
好玩、收集、模仿、學習），是從2014年流行開始，到2015年朋友圈爆火。那時經常看到朋友圈好友轉發分享H5小遊戲，有時候自己也會點進去玩一下，簡單的遊戲情節設計以及操作方式讓我們的碎片化時間有了消遣的方式。那麼H5小遊戲究竟是什麼呢？然而H5小遊戲因其休閒性受到廣大用戶喜愛，同樣也受到企業的歡迎，成爲互動娛樂的重要形式之一。普普通通的H5小遊戲，爲什麼能吸引用戶念念不忘？又有哪方面的特點呢？
閱讀作者近期精選原創文章（感謝大家的鼓勵與支持🌹🌹🌹）：
- NodeJS全棧開發一個功能完善的Express項目（附完整源碼）
- （上）Vue+Echarts構建可視化大數據平臺實戰項目分享（附源碼）
- 開發一款微信小程序的個性簡歷，能打開大廠之門並獲得門票？（附源碼）
介紹H5小遊戲之前先來線上體驗一把當年刷爆朋友圈的經典遊戲（工作學習之餘，來輕鬆一刻），請使用微信掃一掃，如圖：
以上小遊戲已親測可玩，注意：初次加載遊戲可能會有點慢（服務器買了個便宜的，作者缺錢，哈哈😛），請耐心等待或再次刷新頁面。作者辛苦收集整理良久，如果真心覺得不錯，就請點個👍和❤️收藏，感謝支持，後續會將更多小遊戲親測完成後，再分享第一波。😘（文末有全套源碼截圖）
二. 什麼是H5小遊戲
2.1 什麼是HTML5
- HTML5 是最新的 HTML 標準。
- HTML5 是專門爲承載豐富的 web 內容而設計的，並且無需額外插件。
- HTML5 擁有新的語義、圖形以及多媒體元素。
- HTML5 提供的新元素和新的 API 簡化了 web 應用程序的搭建。
- HTML5 是跨平臺的，被設計爲在不同類型的硬件（PC、平板、手機、電視機等等）之上運行。
HTML5十大新特性：語義標籤、增強型表單、視頻和音頻、Canvas繪圖、SVG繪圖、地理定位、拖放API、WebWorker、WebStorage、WebSocket等，如需詳細瞭解請移步到HTML5教程
2.2 理解H5小遊戲
H5小遊戲是什麼意思？可能有許多玩家都已經玩過H5小遊戲了，但實際上還有不少玩家並不知道自己玩過H5小遊戲，也不知道什麼是H5小遊戲。
H5是一系列製作網頁互動效果的技術集合；它是HTML5的縮寫，表示移動端的web頁面。而H5小遊戲，你可以看作是移動端的web遊戲，無需下載軟件即可體驗，這就是H5在傳播上的優勢。再說的直白一點，H5小遊戲就是手機頁遊。
而對於玩家來說，H5小遊戲的優點就更多了。不用下載即點即玩、不需要佔用過大內存、玩法輕鬆休閒、所需時間更碎片化、方便朋友圈分享炫耀加社交…
在技術方面，利用H5開發移動小遊戲的門檻更低，所需時間更少。可以像寫網頁一樣寫遊戲，而無需太多的額外學習，
且有大量文檔與插件可用。
三. H5小遊戲特點
3.1 優勢
- 開發成本相對低
- 跨系統、跨終端、跨平臺
- 無需下載安裝，即點即玩
- 合理的互動社交
- 安全又省流量
- 病毒式傳播
3.2 劣勢
- 製作門檻相對低
- 缺少固定流量入口（變現問題難）
- 體驗差距（性能、流量等）
- 作爲一種營銷工具
- 用戶留存率低
- 從輕度向中重度化轉變
四. H5小遊戲技術棧
4.1 簡單版
畫面內元素比較簡單，邏輯不會太複雜，結構與常規Web頁面一致。主要技術棧是基於 DOM元素 + jQuery + 原生JavaScript + CSS3實現效果。
4.2 複雜度低版
複雜度相對傳統Web頁難度高，主要技術棧是基於 Canvas + JavaScript + 部分DOM元素 + CSS3實現效果。
4.3 複雜度高版
複雜度很高的H5小遊戲，主要技術棧是基於H5遊戲引擎來實現效果。
4.4 H5小遊戲引擎
如需瞭解更多相關H5遊戲引擎，可以看看這篇文章H5遊戲開發：遊戲引擎入門推薦
4.5 瞭解前端工程化與webpack
1） 前端工程化
近幾年來，前端領域飛速發展，前端的工作早已不再是切幾張圖，寫幾個頁面那麼簡單，項目比較大時，很可能會多人協同開發，模塊化，組件化，CSS預編譯等技術也被廣泛的使用。前端自動化（半自動化）工程已經成爲現在的主流。前端工程化主要解決以下問題：
- Javascript、CSS 代碼的合併和壓縮
- CSS 預處理：Less，Sass, Stylus的編譯
- 生成雪碧圖
- ES6 轉ES5 語法
- 模塊化
- …
2）Gulp 與 Webpack
相信很多小夥伴都不僅知道gulp和webpack，還了解grunt，他們有什麼區別呢？
經過Gulp和Grunt合併壓縮後的代碼仍然是你寫的代碼，只是局部變量名被替換了，一些語法做了轉換而已，整體的內容並沒發生變化。
而webpack打包後的代碼已經不只是你寫的代碼，其中夾雜了很多webpack自身的模塊處理代碼。在編譯過程中，webpack工程會自動載入一些內容。
3）Webpack 與工程
Webapack （Web網絡pack包）主要適用場景是單頁面應用(SPA—SinglePageApplication)，SPA通常是由一個html文件，和一堆按需加載的js組成。webpack的依賴關係圖如下所示：
左側：moduls with dependencies（具有依賴性的模塊） 右側：static assets（靜態資源/資產）
以上這些就是H5小遊戲要了解的基本內容點。
五. 部分遊戲截圖
六. 附上完整源碼截圖
七. 💕看完三件事:
- 點贊 | 你可以
點擊——>收藏——>退出一氣呵成，但別忘了點贊🤭 - 關注 | 點個關注，下次不迷路😘
- 也可以到GitHub拿我所有開源項目源碼🤗
八. 寫在最後
就分享到這吧，如果發現小遊戲BUG，或好玩的，都可以告訴我，反饋BUG我會及時修復，也期待與大家一起多多交流學習。後續會分享更多精選手機模板、網頁模板、H5小遊戲、網頁炫酷特效等源碼。關注作者公衆號，敬請期待。
免費快速獲取遊戲源碼方式：關注公衆號，後臺回覆“遊戲”二字即可獲取。
請關注作者公衆號：懶人碼農
