内容简介：SegmentFault 技术周刊 Vol.24 - “游戏” 已启动：Are you ready?
今天是六一国际儿童节，祝小伙伴们六一快乐！本期技术周刊小编为大家奉上几款小游戏，让我们一起来 “玩” 吧～
游戏大集合
八分音符小游戏
这个游戏的原理很简单，就是通过声音来控制小人移动，声音越大，跳得越高。
-
获取音频和视频
-
进行音频和视频通信
-
进行任意数据的通信
贪吃蛇。
和童年的贪吃蛇相比，这次是 3D 的哦，而且 JS 代码只有 90 行，是不是很激动？
传统 2D 的贪吃蛇游戏一般通过方向键盘控制蛇的前进方向，我一开始就想定位可运行在平板上的Touch交互，所以不考虑键盘的操作交互方式，采用完全用点击的方式来控制，得到鼠标点击所在的平面位置，这样与蛇头的位置做比较就能判断出新的前进方向，如果点击位置超出了贪吃蛇的运行矩阵范围我就不做处理。
英雄抓怪物
实现这个游戏只需要三张图，一个 html 文件和一个 js 文件，看起来好像很简单的样子。
魔秀时光道
一个类似滑雪大冒险和赛车的结合的游戏。
实现思路：
-
背景滑动效果实现
-
人物滑动实现
-
碰撞检测
子弹打飞船
据说只要知道 javascript 怎么拼写，就可以用 canvas 做游戏。
网球游戏
纯 canvas 实现，代码 100 行不到，赶紧动手写起来吧。
俄罗斯方块
老少皆宜，简直是童年回忆啊。
数字拼图
下面来一个考验智力的小游戏，据说拼出来有赏哦~
原理很简单，需要实现的功能点：
-
随机生成1~15的数字格子，每一个数字都必须出现且仅出现一次
-
点击一个数字方块后，如其上下左右有一处为空，则两者交换位置
-
格子每移动一步，我们都需要校验其是否闯关成功
-
点击重置游戏按钮后需对拼图进行重新排序
拼图小游戏
看了上面的数字拼图小游戏，有木有想起我们玩过的游戏拼图？想不想来一个？
实现思路也很简单：
-
利用canvas切出小块图片
-
实现小块图片的随机排列
-
相关touch事件的监听和实现
-
游戏是否完成的判断
细胞自动机
每个细胞有两种状态：存活或死亡，看着细胞不断变化，小编突然开始思考人生了。
细胞自动机（英语：Cellular automaton），又称格状自动机、元胞自动机,它是由无限个有规律、坚硬的方格组成，每格均处于一种有限状态。每格于t时的态由t-1时的一集有限格（这集叫那格的邻域）的态决定。每一格的“邻居”都是已被固定的。每次演进时，每格均遵从同一规矩一齐演进。
蜗牛
喜欢徒步的小伙伴还可以做个游戏记录下自己的行走路线。
我希望可以过一段时间拿到一个定位，只有一个，所以我设置了一个时间周期的循环，并记录当前在哪个循环内，如果这个周期内已经拿到过watch接口得到的位置，那么我就不做操作，如果没拿到过，我就给放到记录里，如果整个周期都没拿到，也没关系，我就抛弃这个周期，去获取更精确的值。
2048
相信大多数人都听说过 2048 这个游戏，现在就来学习一下吧。
还没通关的小伙伴，这里是通关攻略：
Phaser.js 游戏开发
重点推荐@Vincent_Pat 的《从零到一：用 Phaser.js 写意地开发小游戏》系列文章。这个系列一共有五篇文章，从框架选择到场景搭建，从零开始讲解如何用 Phaser.js 实现动画效果。
为什么选择 Phaser？以下是我选择它的一些原因：
-
出现在国外几乎所有的H5游戏框架的榜单中，而且名列前茅。
-
支持原生JS及TypeScript。
-
可以方便地在Canvas和WebGL之间切换。
-
仅支持开发2D游戏，因为专注，所以高效。
-
定位如上图所示，是桌面和移动端H5游戏框架，Pixi.js、Three.js这些框架则不同，它们不是专门针对游戏开发设计的，拿来开发游戏并没有很轻松。
-
非常完善的文档及示例（当然是英文文档）。
-
持续更新，目前Phaser 3正在开发，没什么比一个热度高的开源框架更值得推荐了。
这一节我们来搭建游戏的骨架，并添加四个游戏场景，分别是加载、开始、游戏、结束。游戏相关的一些概念：
-
画布：一般来说，做游戏的话基于 Canvas 会比基于 DOM 性能要好很多，尤其是涉及大量动画的情况下。Phaser 会将一切渲染在 canvas 元素上，于是，毫不夸张地说，你的body 标签里可能只包含一个 canvas 元素。
-
场景：一个完整的游戏都是有分场景的，不是指“迷宫”、“沙漠”这些游戏场景，而是“加载”、“开始”、“游戏”、“结束”等场景。
-
对象池：游戏中生成非常多的元素，我们会需要一个对象池来维护他们，对象池可以理解成是一个Group。
这一节我们介绍了加载场景，分步骤介绍了加载资源、监听加载完成的事件以及添加一个最小的加载展示时间，其中“添加一个最小的加载展示时间”是偏实际应用的内容，非必须。
在文章的最后我们还向场景中加入了主角、背景、标题和开始提示等元素，来丰富开始场景。
这一节我们来完成游戏最核心的场景——play。这是一个接苹果的游戏，为此我们会加入物理引擎，会使用一些过渡动画以及监听触摸事件等等。
我们首先布置了游戏场景，加入了背景音乐。然后实现了对主角的操作，最后实现了苹果的随机掉落。
这一节我们来完成游戏剩余的部分，主要是计算分数、如何结束游戏等等，实现一个完整的游戏。当然了，效果远未达到理想，要说的话，游戏水非常深，这个系列的教程只是从零到一，引导大家接触并上手 Phaser.js。
一点干货
关于动画：
一些实用的代码片段：
# SegmentFault 技术周刊 #
「技术周刊」是社区特别推出的技术内容系列，一周一主题。周刊筛选的每篇内容，是作者的独到见解，踩坑总结和经验分享。
每周四更新，欢迎「关注」或者「订阅」。大家也可以在评论处留言自己感兴趣的主题，推荐主题相关的优秀文章。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
CSS3 Solutions
Marco Casario / Apress / 2012-8-13 / GBP 35.50
CSS3 brings a mass of changes, additions, and improvements to CSS across a range of new modules. Web designers and developers now have a whole host of new techniques up their sleeves, from working wit......一起来看看 《CSS3 Solutions》 这本书的介绍吧!
