微信小游戏开发教程

微信小游戏创建

正常到mp.weixin.qq.com新建小程序,在新建完后选择类目选上小游戏即可。
之后到微信开发者工具创建新的小程序,填入appid,就可以新建demo。

微信小程序实例

在demo里面,已经有打飞机的一个游戏,里面readme已经给了整体架构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
./js
├── base // 定义游戏开发基础类
│ ├── animatoin.js // 帧动画的简易实现
│ ├── pool.js // 对象池的简易实现
│ └── sprite.js // 游戏基本元素精灵类
├── libs
│ ├── symbol.js // ES6 Symbol简易兼容
│ └── weapp-adapter.js // 小游戏适配器
├── npc
│ └── enemy.js // 敌机类
├── player
│ ├── bullet.js // 子弹类
│ └── index.js // 玩家类
├── runtime
│ ├── background.js // 背景类
│ ├── gameinfo.js // 用于展示分数和结算界面
│ └── music.js // 全局音效管理器
├── databus.js // 管控游戏状态
└── main.js // 游戏入口主函数

main.js

game.js里面主要调用了小游戏适配器和Symbol,并且创建了游戏控制主程序。所以现在看一看main.js的内容。

引入玩家和npc,引入背景、游戏信息、音乐和游戏状态管理器。新建canvas。

主函数中,每次游戏开始都调用restart(包括刚开始启动游戏),刚启动的时候还要重置动画帧ID的信息。restart里面重置数据,重置触摸事件,重置背景、玩家、游戏信息、音乐,绑定事件循环并且清除动画,之后请求动画帧以在canvas上面绑定循环。

还有npc产生,碰撞检测,触摸事件(在游戏结束后,这也是为什么开始游戏需要重置触摸事件),每一帧都需要重新画,并且有状态更新和循环。

sprite.js

一个精灵类(一个精灵是一个物体的抽象,具有画在图像上的能力与碰撞检测的能力)