【转】微信小游戏学习
1月份的时候微信更新了小游戏的功能，微信公众平台也放出了小游戏的开发文档，这里总结一下最近对小游戏的学习。
登录微信公众平台，能发现小程序的开发文档下多了一个小游戏类别。按照文档的指引，在开发工具中新建项目时勾选“建立游戏快速启动模板”就可以得到一个可以运行的小游戏了。
上图可以看到一个飞机的游戏，在开发工具中预览游戏，可以进行试玩。接下来就学习一下这个飞机游戏的代码。
项目的完整目录结构
|
|---audio
| |... // 音频文件
|---images
| |... // 图片/动画资源
|---js
| |---base
| | |---animation.js // Sprite的子类，实现了动画相关的功能
| | |---pool.js // 一个简单的对象池实现，减少对象创建开销和频繁的垃圾回收
| | |---sprite.js // 游戏基础的精灵类
| |---libs
| | |---symbol.js // 对于ES6中Symbol的极简兼容，方便模拟私有变量
| | |---weapp-adapter.js // 模拟BOM和DOM的代码库，使游戏引擎在调用DOM API和访问DOM属性时不产生错误
| |---npc
| | |---enemy.js
| |---player
| | |---bullet.js
| | |---index.js
| |---runtime
| | |---background.js
| | |---gameinfo.js
| | |--music.js
| |---databus.js // 全局状态管理器
| |---main.js // 游戏主函数
|---README.md
|---game.js // [必要]小游戏的入口文件
|---game.json // [必要]配置文件
|---project.config.json // 项目相关的配置文件可以看到虽然只是一个模板，但包含的文件很多。不过文件虽多，结构还是很清晰的。首先从入口文件game.js开始。
game.js
import './js/libs/weapp-adapter'
import './js/libs/symbol'
import Main from './js/main'
new Main()
执行的代码只有一行：new Main()。接着来到main.js。顺着Main类中的constructor，来到restart()中：
restart() {
databus.reset()
canvas.removeEventListener(
'touchstart',
this.touchHandler
)
this.bg = new BackGround(ctx)
this.player = new Player(ctx)
this.gameinfo = new GameInfo()
this.music = new Music()
this.bindLoop = this.loop.bind(this)
this.hasEventBind = false
// 清除上一局的动画
window.cancelAnimationFrame(this.aniId);
this.aniId = window.requestAnimationFrame(
this.bindLoop,
canvas
)
}
这个函数中做了一些初始化工作，移除了重开游戏对话框的Listener，然后是最重要的一步：
this.aniId = window.requestAnimationFrame(
this.bindLoop,
canvas
)window.requestAnimationFrame是adapter封装的接口，内部是微信提供的接口[requestAnimationFrame()](“https://mp.weixin.qq.com/debug/wxagame/dev/document/render/frame/requestAnimationFrame.html“)。参数中的bindLoop就是main中的loop函数，在loop中同样调用了window.requestAnimationFrame，从而使得每一帧都会调用一次loop()，从而实现了游戏的帧循环。
接下来就到了loop()中了。
loop() {
databus.frame++
this.update()
this.render()
this.aniId = window.requestAnimationFrame(
this.bindLoop,
canvas
)
}databus.frame记录了游戏开始到现在的帧数，在生成敌人和计算开炮时机的时候会用到。update中计算玩家和敌人的移动、碰撞等，render负责在画布上绘制需要展示的元素。这些都和主流的游戏结构类似。
最后来看看Sprite和Animation两个类。
Sprite类比较简单，其中保存了图片路径、大小、位置以及是否可见等信息，并实现了绘制到画布（drawToCanvas）的方法和一个简单的碰撞检测（isCollideWith）。碰撞检测检查的是一个精灵的中心点是否位于本精灵的矩形内。
Animation要稍微复杂一点，它继承了Sprite类，实现了播放帧动画的功能。由于只是个简单的实现，所以只支持了一个帧动画，当然简单修改之后就可以支持多个帧动画，更能满足实际应用的需求。从代码中可以看出帧动画是通过将精灵本体设置为不可见，再通过一个定时器（setInterval）按照一个固定的速率（this.interval）依次切换帧动画序列中的帧图片，主循环进行渲染时会把该图片显示到画布，达到动画的效果。这里比较重要的是setInterval方法，它是微信提供的一个定时器api，作用是设定一个定时器，按照指定的周期来执行注册的回调函数。这里的回调函数的工作就是切换帧图片的index。当动画播放结束时，要结束这个定时器，这时就需要使用微信提供的clearInterval接口了。
这里简单总结了一下微信开发者工具中提供的小游戏模板，可以看到整个游戏的生命周期都是由自己编写代码实现的，不像在一些引擎中只用“填空”即可。有点奇怪的是动画类是自己实现的，实际在写代码时，会发现提示中是有wx.createAnimation接口的，但文档中并没有给出来，可能以后会开放吧。
期待微信开发工具更新更多功能，并早日开放个人开发者发布微信小游戏的权限。
原文链接：https://blog.csdn.net/speeds3/article/details/79657131
您可能感兴趣的
Fundebug提供微信小游戏BUG监控，通过独创的截屏技术，方便开发者可视化了解BUG严重程度。
点击查看详情：Fundebug上线微信小游戏错误监控！支持自动截屏！
