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 技术周刊 #

「技术周刊」是社区特别推出的技术内容系列，一周一主题。周刊筛选的每篇内容，是作者的独到见解，踩坑总结和经验分享。

每周四更新，欢迎「关注」或者「订阅」。大家也可以在评论处留言自己感兴趣的主题，推荐主题相关的优秀文章。