SegmentFault 技術週刊 Vol.24 - 「遊戲」 已啓動：Are you ready?

今天是六一國際兒童節，祝小夥伴們六一快樂！本期技術週刊小編爲你們奉上幾款小遊戲，讓咱們一塊兒來 「玩」 吧～

遊戲大集合

八分音符小遊戲

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

這個遊戲的原理很簡單，就是經過聲音來控制小人移動，聲音越大，跳得越高。

• 獲取音頻和視頻

• 進行音頻和視頻通訊

• 進行任意數據的通訊

貪吃蛇。
和童年的貪吃蛇相比，此次是 3D 的哦，並且 JS 代碼只有 90 行，是否是很激動？

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

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

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

• 用HTML5開發一個小遊戲

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

• 記一次遊戲H5開發經驗

實現思路：

• 背景滑動效果實現

• 人物滑動實現

• 碰撞檢測

子彈打飛船
聽說只要知道 javascript 怎麼拼寫，就能夠用 canvas 作遊戲。

• 【譯】HTML5 遊戲入門

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

• canvas寫個簡單的小遊戲

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

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

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

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

原理很簡單，須要實現的功能點：

• 隨機生成1~15的數字格子，每個數字都必須出現且僅出現一次

• 點擊一個數字方塊後，如其上下左右有一處爲空，則二者交換位置

• 格子每移動一步，咱們都須要校驗其是否闖關成功

• 點擊重置遊戲按鈕後需對拼圖進行從新排序

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

• 打造專屬本身的html5拼圖小遊戲

實現思路也很簡單：

• 利用canvas切出小塊圖片

• 實現小塊圖片的隨機排列

• 相關touch事件的監聽和實現

• 遊戲是否完成的判斷

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

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

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

蝸牛
喜歡徒步的小夥伴還能夠作個遊戲記錄下本身的行走路線。

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

我但願能夠過一段時間拿到一個定位，只有一個，因此我設置了一個時間週期的循環，並記錄當前在哪一個循環內，若是這個週期內已經拿到過watch接口獲得的位置，那麼我就不作操做，若是沒拿到過，我就給放到記錄裏，若是整個週期都沒拿到，也不要緊，我就拋棄這個週期，去獲取更精確的值。

2048
相信大多數人都據說過 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 - 加載遊戲資源
這一節咱們介紹了加載場景，分步驟介紹了加載資源、監聽加載完成的事件以及添加一個最小的加載展現時間，其中「添加一個最小的加載展現時間」是偏實際應用的內容，非必須。
在文章的最後咱們還向場景中加入了主角、背景、標題和開始提示等元素，來豐富開始場景。

Chapter 4 - 遊戲即將開始
這一節咱們來完成遊戲最核心的場景——play。這是一個接蘋果的遊戲，爲此咱們會加入物理引擎，會使用一些過渡動畫以及監聽觸摸事件等等。
咱們首先佈置了遊戲場景，加入了背景音樂。而後實現了對主角的操做，最後實現了蘋果的隨機掉落。

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

一點乾貨

關於動畫：

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

一些實用的代碼片斷：

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

（本期完）

---

# SegmentFault 技術週刊 #

「技術週刊」是社區特別推出的技術內容系列，一週一主題。週刊篩選的每篇內容，是做者的獨到看法，踩坑總結和經驗分享。

每週四更新，歡迎「關注」或者「訂閱」。你們也能夠在評論處留言本身感興趣的主題，推薦主題相關的優秀文章。