SegmentFault 技術周刊 Vol.24 - 「遊戲」 已啟動：Are you ready？

今天是六一國際兒童節，祝小夥伴們六一快樂！本期技術周刊小編為大家奉上幾款小遊戲，讓我們一起來 「玩」 吧～

遊戲大集合

八分音符小遊戲

• 用 Vue + Audio API 實現的熱門小遊戲，八分音符

這個遊戲的原理很簡單，就是通過聲音來控制小人移動，聲音越大，跳得越高。n1、獲取音頻和視頻n2、進行音頻和視頻通信n3、進行任意數據的通信

貪吃蛇n和童年的貪吃蛇相比，這次是 3D 的哦，而且 JS 代碼只有 90 行，是不是很激動？

• WebGL 實現 HTML5 貪吃蛇 3D 遊戲

傳統 2D 的貪吃蛇遊戲一般通過方向鍵盤控制蛇的前進方向，我一開始就想定位可運行在平板上的Touch交互，所以不考慮鍵盤的操作交互方式，採用完全用點擊的方式來控制，得到滑鼠點擊所在的平面位置，這樣與蛇頭的位置做比較就能判斷出新的前進方向，如果點擊位置超出了貪吃蛇的運行矩陣範圍我就不做處理。

英雄抓怪物n實現這個遊戲只需要三張圖，一個 html 文件和一個 js 文件，看起來好像很簡單的樣子。

• 用HTML5開發一個小遊戲

魔秀時光道n一個類似滑雪大冒險和賽車的結合的遊戲。

• 記一次遊戲H5開發經驗

實現思路：n1、背景滑動效果實現n2、人物滑動實現n3、碰撞檢測

子彈打飛船n據說只要知道 javascript 怎麼拼寫，就可以用 canvas 做遊戲。

• 【譯】HTML5 遊戲入門

網球遊戲n純 canvas 實現，代碼 100 行不到，趕緊動手寫起來吧。

• canvas寫個簡單的小遊戲

俄羅斯方塊n老少皆宜，簡直是童年回憶啊。

• 用 React+Redux+Immutable 做俄羅斯方塊

數字拼圖n下面來一個考驗智力的小遊戲，據說拼出來有賞哦~

• 利用 Vue.js 實現拼圖遊戲

原理很簡單，需要實現的功能點：n1、隨機生成1~15的數字格子，每一個數字都必須出現且僅出現一次n2、點擊一個數字方塊後，如其上下左右有一處為空，則兩者交換位置n3、格子每移動一步，我們都需要校驗其是否闖關成功n4、點擊重置遊戲按鈕後需對拼圖進行重新排序

拼圖小遊戲n看了上面的數字拼圖小遊戲，有木有想起我們玩過的遊戲拼圖？想不想來一個？

• 打造專屬自己的html5拼圖小遊戲

實現思路也很簡單：n1、利用canvas切出小塊圖片n2、實現小塊圖片的隨機排列n3、相關touch事件的監聽和實現n4、遊戲是否完成的判斷

細胞自動機n每個細胞有兩種狀態：存活或死亡，看著細胞不斷變化，小編突然開始思考人生了。

• 【簡單好玩】細胞自動機小遊戲

細胞自動機（英語：Cellular automaton），又稱格狀自動機、元胞自動機,它是由無限個有規律、堅硬的方格組成，每格均處於一種有限狀態。每格於t時的態由t-1時的一集有限格（這集叫那格的鄰域）的態決定。每一格的「鄰居」都是已被固定的。每次演進時，每格均遵從同一規矩一齊演進。

蝸牛n喜歡徒步的小夥伴還可以做個遊戲記錄下自己的行走路線。

• 根據地理信息繪畫的html5 小遊戲 - 簡單實現

我希望可以過一段時間拿到一個定位，只有一個，所以我設置了一個時間周期的循環，並記錄當前在哪個循環內，如果這個周期內已經拿到過watch介面得到的位置，那麼我就不做操作，如果沒拿到過，我就給放到記錄里，如果整個周期都沒拿到，也沒關係，我就拋棄這個周期，去獲取更精確的值。

2048n相信大多數人都聽說過 2048 這個遊戲，現在就來學習一下吧。

• 2048 根本停不下來的開源HTML5遊戲

還沒通關的小夥伴，這裡是通關攻略：

• 2048遊戲通關演算法

Phaser.js 遊戲開發

重點推薦 @Vincent_Pat 的《從零到一：用 Phaser.js 寫意地開發小遊戲》系列文章。這個系列一共有五篇文章，從框架選擇到場景搭建，從零開始講解如何用 Phaser.js 實現動畫效果。

Chapter 1 - 認識 Phaser.js

為什麼選擇 Phaser？以下是我選擇它的一些原因：

• 出現在國外幾乎所有的H5遊戲框架的榜單中，而且名列前茅。
• 支持原生JS及TypeScript。
• 可以方便地在Canvas和WebGL之間切換。
• 僅支持開發2D遊戲，因為專註，所以高效。
• 定位如上圖所示，是桌面和移動端H5遊戲框架，Pixi.js、Three.js這些框架則不同，它們不是專門針對遊戲開發設計的，拿來開發遊戲並沒有很輕鬆。
• 非常完善的文檔及示例（當然是英文文檔）。
• 持續更新，目前Phaser 3正在開發，沒什麼比一個熱度高的開源框架更值得推薦了。

Chapter 2 - 搭建遊戲的骨架

這一節我們來搭建遊戲的骨架，並添加四個遊戲場景，分別是載入、開始、遊戲、結束。遊戲相關的一些概念：

• 畫布：一般來說，做遊戲的話基於 Canvas 會比基於 DOM 性能要好很多，尤其是涉及大量動畫的情況下。Phaser 會將一切渲染在 canvas 元素上，於是，毫不誇張地說，你的body 標籤里可能只包含一個 canvas 元素。
• 場景：一個完整的遊戲都是有分場景的，不是指「迷宮」、「沙漠」這些遊戲場景，而是「載入」、「開始」、「遊戲」、「結束」等場景。
• 對象池：遊戲中生成非常多的元素，我們會需要一個對象池來維護他們，對象池可以理解成是一個Group。

Chapter 3 - 載入遊戲資源

這一節我們介紹了載入場景，分步驟介紹了載入資源、監聽載入完成的事件以及添加一個最小的載入展示時間，其中「添加一個最小的載入展示時間」是偏實際應用的內容，非必須。n在文章的最後我們還向場景中加入了主角、背景、標題和開始提示等元素，來豐富開始場景。

Chapter 4 - 遊戲即將開始

這一節我們來完成遊戲最核心的場景——play。這是一個接蘋果的遊戲，為此我們會加入物理引擎，會使用一些過渡動畫以及監聽觸摸事件等等。n我們首先布置了遊戲場景，加入了背景音樂。然後實現了對主角的操作，最後實現了蘋果的隨機掉落。

Chapter 5 - 遊戲大功告成

這一節我們來完成遊戲剩餘的部分，主要是計算分數、如何結束遊戲等等，實現一個完整的遊戲。當然了，效果遠未達到理想，要說的話，遊戲水非常深，這個系列的教程只是從零到一，引導大家接觸並上手 Phaser.js。

一點乾貨

關於動畫：

• 前沿穿越——HTML5小遊戲 製作技巧&經驗

一些實用的代碼片段：

• 遊戲動畫必備乾貨——跟動畫有關的數學和物理公式

（本期完）

----------------------------------------------------------------------------------------------------------

原文閱讀：SegmentFault 技術周刊 Vol.24 - 「遊戲」 已啟動：Are you ready?

推薦閱讀：