《仿掌上游戏机》简介

简单的介绍了项目的缘由和实现思路。

《仿掌上游戏机》简介

by img MicroAnswer Create at:Jul 28, 2020 2:33:19 PM 

Tags: 王中王游戏机 童年回忆 掌上游戏机 游戏开发

简单的介绍了项目的缘由和实现思路。


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

一、简介

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

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

二、实现思路

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

1、显示屏

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

2、启动器

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

3、各个游戏

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

方法名含义
onRegLaunch当游戏被注册到启动器里时会调用
getPreviewAtoms在启动界面显示的游戏预览,此方法返回一个二维数组,用于渲染到界面
onLaunch当用户决定开始玩此游戏时,此方法调用,之后用户界面就会完全交由此游戏了
onUpdate当用户决定开始玩此游戏时,此方法将从此刻开始不停的回调,返回一个二维数组用于渲染界面
onUpdateStatus此方法和 onUpdate 类似,不过渲染的是右侧的4×4的小点阵列区
onDestroy当用户玩游戏玩着玩着就按了复位按钮,此方法就会调用,此后玩家就将退出游戏
onKeyDown事件函数,当用户按下某个按键时调用
onKeyup事件函数,当用户按下某个按键松开时调用

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

三、目录结果

如果你事先阅读了项目的源代码,你会发现,所有的实现都并没有采用 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 目录下的内容。通过 platformgames 目录,将平台实现代码和游戏实现代码分为了两个地方存储。现在我们先从 platform 说起,它们到底是如何工作的。

四、期待你的加入

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

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

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

Full text complete, Reproduction please indicate the source. Help you? Not as good as one:
Comment(Comments need to be logged in. You are not logged in.)
You need to log in before you can comment.

Comments (1 Comments)