看到了吗？这就是《仿掌上游戏机》(立即体验)项目运行起来的效果。我相信作为80后、90后，你一定不陌生。甚至可能已经勾起了一丝丝你的童年记忆。既然这样，你或许也有一些好点子，不如把它加入到这个游戏机里来吧。通过本文，你就可以了解并学习如何把自己的点子实现进来。

一、简介

这是在开发出了《俄罗斯方块》游戏后地产物，一开始利用工作空余时间做了一个《俄罗斯方块》，还不错，能玩。随着时间地推移，越来越觉得，没有那味道。后来我干脆就重新立项开发一个类似游戏平台的形式，这样可以在上面运行各种各样的不同的游戏。并且，借助开源的力量，相信会有更多的游戏被实现，源源不断的加入进来丰富这个游戏机。

这种游戏机的玩法很简单。通过 上, 下, 左, 右 控制玩家的移动，在游戏选择界面，上下左右没有作用。旋转 按钮在游戏选择界面可以切换各个不同的游戏，在游戏中根据不同的游戏又有不同的作用。最下面一排小按钮则用于设置类的功能。开始按钮：当你在游戏选择界面选中了某个游戏后，点击开始按钮即可开始玩该游戏，当你在游戏进行过程中点击开始按钮，即可暂停或恢复该游戏。声音：用于设置是否播放游戏音效的。开关：即开机关机，在任何时候，点击开关按钮都会执行相应的开机或者关机。复位：用于切换回游戏选择界面，当你在游戏进行过程中，点击此按钮将终止游戏并返回游戏选择界面。

二、实现思路

游戏机本体实现包含了两个部分，显示屏 和 启动器 这两部分。显示屏 负责渲染内容，各种状态的显示。启动器 负责整合各个游戏并显示游戏预览，同时还要负责事件处理。所以要运行的游戏都必须先注册到 启动器 里面，才可以在游戏机上运行。

1、显示屏

它实现了游戏的绘制显示，但它不承担任何游戏逻辑。很单纯，它只知道你给什么数据，它就绘制什么数据。为了方便一些比较常用，并且又与界面相关的操作，它还内置实现了一些快捷功能：内置动画、爆炸效果、字母渲染 等等。对于主体游戏渲染区域，显示屏提供了一个二维数组，外界可将此二维数组进行赋值，二维数组内均由 1、0 表示 一个黑色点阵 和一个非黑色的点阵。同时考虑到游戏逻辑需要不停的执行，提供了一个逻辑注册回调，使被注册的函数有机会在合适的时间执行以保证游戏的持续性。

2、启动器

启动器管理了各个游戏，并且负责了事件的操作。启动器内定了界面上几个按钮的按钮事件值，在各个游戏内只需要在对应事件处理自己需要处理的逻辑即可。同时启动器显示了一个游戏预览效果，此效果并非启动器实现，而是来自于注册了的各个游戏自生的实现。通过内置一个变量用于保存当前处于哪一个游戏，这使得启动器有机会获取到对应的游戏预览并将预览效果(本质就是一个二维数组)设置给 显示器 ，使显示器渲染此游戏预览。

3、各个游戏

各个游戏是注册到 启动器 里面的，不仅为了要展示预览和序号，一方面还因为启动器承担了整个游戏机的操作逻辑，游戏内部需要迎合一些相关事件。因此，各个游戏的实现需按照一个统一的格式，不用担心，这种统一不仅为游戏的开发带来便利，而且还更直观的使开发过程更加清晰。通常一个游戏类都应该具有下列方法以完成相关逻辑：

不用担心，下面会详细介绍各个函数，这里就先做个简单认识。

三、目录结果

如果你事先阅读了项目的源代码，你会发现，所有的类实现都并没有采用 ES6 的 Class 语法来定义，而是使用了传统的方式来组建一个类，这是由于项目初期完全是使用标准浏览器识别的JavaScript来编写的。现在看来似乎显得不时尚，但这并无伤大雅。所以在以后的开发里，对于类的定义建议均采用统一的传统方法来组件，也一样能使项目代码优雅。

现在让我们开始进一步了解它们。在介绍各个类的详细用法前，有必要先了解一下项目结构：

wzwgame
  ├─ build
  │    └─ *** ... ... ... ... ... // 此目录包含了本地测试、build打包操作代码，可做了解。
  ├─ dist ... ... ... ... ... ... // build打包后的文件将在此目录。
  ├─ public . ... ... ... ... ... // html文件及相关图片样式资源在此目录。
  ├─ src  ... ... ... ... ... ... // 源代码目录，这是我们主要说明的。
  │    ├─ games . ... ... ... ... // 游戏源码目录
  │    │    ├─ GameDemo.js .. ... // 示列游戏实现代码，包含了一个游戏类应该实现的回调方法等。
  │    │    ├─ GameSnake.js . ... // 《贪吃蛇》游戏
  │    │    ├─ GameTank.js .. ... // 《坦克大战》游戏
  │    │    ├─ GameTetris.js  ... // 《俄罗斯方块》游戏
  ┆    ┆    ┆ ... ... ... ... ... //  其它更多游戏
  │    │    └─ index.js . ... ... //  汇总、方便别的地方一次性引入所有游戏。
  │    ├─ platform .. ... ... ... // 游戏机平台实现代码
  │    │    ├─ Clicker.js ... ... // 连点器
  │    │    ├─ WzwLauncher.js ... // 启动器实现类
  │    │    └─ WzwScreen.js . ... // 显示屏实现类
  │    └─ app.js  ... ... ... ... // 界面操作、键盘操作处理，入口文件
  ├─ .gitignore . ... ... ... ... // git 忽略配置。
  ├─ ReadMe.md .. ... ... ... ... // 文档介绍文件。
  └─ package.json ... ... ... ... // 项目描述、依赖配置文件。

我们重点关心 src 目录下的内容。通过 platform 和 games 目录，将平台实现代码和游戏实现代码分为了两个地方存储。现在我们先从 platform 说起，它们到底是如何工作的。

四、期待你的加入

一个人的思路和想法永远比不上一群人的思路和想法，急需要充满智慧的你也抽空在百忙之中开发点小玩意，丰富这个游戏机，实现你自己的游戏！

fork 这个项目，实现了游戏之后提交pull request 就可以在线上玩到你的游戏，赶快加入吧~~

详细的API文档正在火急火燎的编写中，还请稍安勿躁！