16k 次阅读
本文旨在通过分析官方给出的一个飞机大战小游戏的源代码来说明如何进行小游戏的开发。
前天一个跳一跳小游戏刷遍了朋友圈，也代表了微信小程序拥有了搭载游戏的功能（早该往这方面发展了，这才是应该有的形态嘛）。作为一个前端er，我的大刀早已经饥渴难耐了，赶紧去下一波最新的微信官方开发工具，体验一波小游戏要如何开发。
我们欣喜地看到可以直接点击小游戏体验一下，而且官方也有一个示例源代码，是一个简易版的飞机大战的源码，直接点开模拟器就可以看效果。
2.源码分析
（还是原汁原味的打飞机游戏呀！）通过阅读这个源代码我们便可以知道如何进行小游戏的开发了。废话少说直接进入主题，先来分析一波源码的整体结构。
音频文件目录
图片文件目录
主要源代码目录
游戏主入口
游戏的配置文件
下面是官方示例中的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
// 游戏入口主函数
官方文档中提到，game.js和game.json是小游戏必须要有的两个文件
下面我会分析我认为主要的文件与结构，不会对每一行代码进行解析，大家有兴趣可以自行阅读官方的源码。每个文件后会跟随我认为重要的几个小点。
import './js/libs/weapp-adapter'
import './js/libs/symbol'
import Main from './js/main'
new Main()
小程序启动会调用game.js，在其中导入了小游戏官方提供的适配器，用于注入canvas以及模拟DOM以及BOM（后续会具体说明这个文件），可以在 下载源代码，修改适合自己的版本并通过webpack打包自用。当然目前已经足够我们使用。
导入symbol的polyfill，主要用于模拟ES6类的私有变量。
导入Main类并实例化Main，于是顺藤摸瓜我们将目光移至Main.js
import Player
from './player/index'
import Enemy
from './npc/enemy'
import BackGround from './runtime/background'
import GameInfo
from './runtime/gameinfo'
import Music
from './runtime/music'
import DataBus
from './databus'
= canvas.getContext('2d')
let databus = new DataBus()
* 游戏主函数
export default class Main {
constructor() {
this.restart()
restart() {
databus.reset()
canvas.removeEventListener(
'touchstart',
this.touchHandler
= new BackGround(ctx)
this.player
= new Player(ctx)
this.gameinfo = new GameInfo()
this.music
= new Music()
window.requestAnimationFrame(
this.loop.bind(this),
* 随着帧数变化的敌机生成逻辑
* 帧数取模定义成生成的频率
enemyGenerate() {
if ( databus.frame % 30 === 0 ) {
let enemy = databus.pool.getItemByClass('enemy', Enemy)
enemy.init(6)
databus.enemys.push(enemy)
// 全局碰撞检测
collisionDetection() {
let that = this
databus.bullets.forEach((bullet) =& {
for ( let i = 0, il = databus.enemys. i &i++ ) {
let enemy = databus.enemys[i]
if ( !enemy.isPlaying && enemy.isCollideWith(bullet) ) {
enemy.playAnimation()
that.music.playExplosion()
bullet.visible = false
databus.score
for ( let i = 0, il = databus.enemys. i &i++ ) {
let enemy = databus.enemys[i]
if ( this.player.isCollideWith(enemy) ) {
databus.gameOver = true
//游戏结束后的触摸事件处理逻辑
touchEventHandler(e) {
e.preventDefault()
let x = e.touches[0].clientX
let y = e.touches[0].clientY
let area = this.gameinfo.btnArea
x &= area.startX
&& x &= area.endX
&& y &= area.startY
&& y &= area.endY
this.restart()
* canvas重绘函数
* 每一帧重新绘制所有的需要展示的元素
render() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
this.bg.render(ctx)
databus.bullets
.concat(databus.enemys)
.forEach((item) =& {
item.drawToCanvas(ctx)
this.player.drawToCanvas(ctx)
databus.animations.forEach((ani) =& {
if ( ani.isPlaying ) {
ani.aniRender(ctx)
this.gameinfo.renderGameScore(ctx, databus.score)
// 游戏逻辑更新主函数
update() {
this.bg.update()
databus.bullets
.concat(databus.enemys)
.forEach((item) =& {
item.update()
this.enemyGenerate()
this.collisionDetection()
// 实现游戏帧循环
databus.frame++
this.update()
this.render()
if ( databus.frame % 20 === 0 ) {
this.player.shoot()
this.music.playShoot()
// 游戏结束停止帧循环
if ( databus.gameOver ) {
this.gameinfo.renderGameOver(ctx, databus.score)
this.touchHandler = this.touchEventHandler.bind(this)
canvas.addEventListener('touchstart', this.touchHandler)
window.requestAnimationFrame(
this.loop.bind(this),
导入了创建游戏需要的我放飞机，敌方飞机，背景，游戏信息，音乐，游戏全局数据类，并获取了canvas的上下文（看到这是不是有一个疑惑，canvas到底是从哪里定义？先带着这个问题最后再说），创建了一个全局数据实例（后面会提到）。
创建Main的实例自然会调用构造方法，在构造方法中调用restart函数，进行了游戏的初始化并进行循环刷帧（requestAnimationFrame看起来是不是很亲切）。
loop函数中我们可以看到主要调用了update, render方法，并设置了player发射子弹的时间，对游戏是否结束进行判断，最后接着刷帧。
update方法会调用各个场景内对象的update方法来更新他们的位置以及其他信息。
render方法会调用各个场景内对象的render方法来将他们绘制到canvas中。
Main内结构清晰，主要理解整个流程就是调用requestAnimationFrame来不停地刷帧更新位置信息推动所有对象运动，每个对象在每一帧都有新的位置，连起来就是动画了。分清位置的更新与对象的绘制是关键。
databus.js
import Pool from './base/pool'
let instance
* 全局状态管理器
export default class DataBus {
constructor() {
if ( instance )
return instance
instance = this
this.pool = new Pool()
this.reset()
this.frame
this.score
this.bullets
this.enemys
this.animations = []
this.gameOver
* 回收敌人，进入对象池
* 此后不进入帧循环
removeEnemey(enemy) {
let temp = this.enemys.shift()
temp.visible = false
this.pool.recover('enemy', enemy)
* 回收子弹，进入对象池
* 此后不进入帧循环
removeBullets(bullet) {
let temp = this.bullets.shift()
temp.visible = false
this.pool.recover('bullet', bullet)
我们可以看出，databus是一个单例对象，不论在其他代码中new多少次，都是返回的同一个实例，符合我们的期望。
reset定义了所需要的数据源并初始化
通过一个对象池的概念，控制当前页面对象的数量，避免使用js原有的垃圾处理机制，而是通过对象池来复用已经创建的对象，算是一个性能优化。
frame属性主要是用来刷帧的时候用来控制子弹的发射与敌机的出现时间。
* 游戏基础的精灵类
export default class Sprite {
constructor(imgSrc = '', width=
0, height = 0, x = 0, y = 0) {
= new Image()
this.img.src = imgSrc
this.width
this.height = height
this.x = x
this.y = y
this.visible = true
* 将精灵图绘制在canvas上
drawToCanvas(ctx) {
if ( !this.visible )
ctx.drawImage(
this.width,
this.height
* 简单的碰撞检测定义：
* 另一个精灵的中心点处于本精灵所在的矩形内即可
* @param{Sprite} sp: Sptite的实例
isCollideWith(sp) {
let spX = sp.x + sp.width / 2
let spY = sp.y + sp.height / 2
if ( !this.visible || !sp.visible )
return false
return !!(
spX &= this.x
&& spX &= this.x + this.width
&& spY &= this.y
&& spY &= this.y + this.height
作为所有场景对象的基类，定义了所有精灵对象基本有的信息（位置，图片，是否可见）
定义了两种能力，检测碰撞与将自己绘制在canvas上
可以看出画图主要是用的canvas里的drawImage方法，也是我们自行开发小游戏以后会用到的方法。包括background,player等类都会继承自精灵类，并且会添加自己的update方法来暴露更新自己位置信息的接口。enermy还会包装一层爆炸动画的封装，思路大同小异，就不在多赘述了。
我们发现小游戏的开发与我们使用canvas进行h5小游戏的开发并没有什么太大的区别，无论从绘图的api还是事件的api都十分相似，还可以用window对象，这主要归功于官方提供的webapp-adapter.js，该js会注入window对象并提供相应的canvas全局变量，也是文章中提到为什么在main.js里找不到canvas变量在哪里定义的原因了。所以我们可以开开心心地使用canvas来开发小游戏了！！！
官方还说了一句，可以不引入webapp-adapter.js来开发小游戏，（）这是小游戏的api文档（当时找了很久）适配器的源码写得也很清晰，可以一读来了解一些，其中也有很多官方写的TODO的事情，还并不十分完善，如果想要快速移植已有的h5游戏代码使用适配器是很有效的。如果想直接开发小游戏根据api文档直接来开发也是很有效的方法，毕竟引入一层适配器还是会有一定的开销。
tips: 读一读适配器源码也有利于了解如何开发小程序(例如事件绑定之类的操作)
小程序终于可以来做小游戏了，感觉还是休闲类的游戏会占主导地位，前端大大可以迎接新的战场啦哈哈哈~~~（接下来会去掉适配器用原生api改写官方demo）
5.无适配器版的官方demo
通过之前的源码分析，我们只能找到使用适配器版本的官方Demo，而找不到一个无适配器版本的官方Demo，于是自己动手丰衣足食，将官方Demo的适配器移除，下面介绍需要进行哪些改动。
首先对适配器的源码简单阅读后可以发现，适配器做的事情就是模拟了window对象，然后将window对象按devtool和小程序运行的实际环境暴露给全局对象，供我们来使用（devtool里就是window，实际环境中则是GameGlobal）。那么相应我们就该把所有引用到window的地方都进行修改，因为实际运行环境中并没有这个全局对象。下面我主要说明在源代码中使用到window的地方。
我移除了libs/symbol.js，改为直接使用原生支持的symbol来模拟私有变量，其他文件只需删除对该文件的引入即可。
查找各文件使用的window.innerHeight与window.innerWidth 改为使用 const { screenWidth, screenHeight, devicePixelRatio } = wx.getSystemInfoSync()来获取屏幕宽高与dpr，并在相应地方进行替换。
音频文件处理
主要是runtime/music.js里与小游戏api的转化，主要是将 new Audio()转化为wx.createInnerAudioContext()方法获取实例和currentTime在原生是一个只读属性，要改为seek方法
let instance
export default class Music {
constructor() {
if ( instance )
return instance
instance = this
// this.bgmAudio = new Audio()
this.bgmAudio
= wx.createInnerAudioContext()
this.bgmAudio.loop = true
this.bgmAudio.src
= 'audio/bgm.mp3'
// this.shootAudio
= new Audio()
this.bgmAudio
= wx.createInnerAudioContext()
this.shootAudio.src = 'audio/bullet.mp3'
// this.boomAudio
= new Audio()
this.bgmAudio
= wx.createInnerAudioContext()
this.boomAudio.src = 'audio/boom.mp3'
this.playBgm()
playBgm() {
this.bgmAudio.play()
playShoot() {
// this.shootAudio.currentTime = 0
this.boomAudio.seek(0)
this.shootAudio.play()
playExplosion() {
// this.boomAudio.currentTime = 0
this.boomAudio.seek(0)
this.boomAudio.play()
图片文件的处理
与音频文件类似，将new Image()替换为wx.createImage()获取实例即可
canvas对象处理
因为需要全局暴露，所以我们把canvas归于到Databus全局管理中去，使用wx.createCanvas()获取全局canvas对象
export default class DataBus {
constructor() {
if ( instance )
return instance
instance = this
this.pool = new Pool()
this.canvas = wx.createCanvas()
this.reset()
canvas对象没有addEventListener之类的方法，同理BOM和DOM对象都没有，所以需要用微信的api来处理事件，demo里则是换为wx.onTouchStart() wx.onTouchMove() wx.onTouchEnd()替换先有的方法。（注意main.js里也有需要替换的，原理一样，不赘述了）
// player/index.js
initEvent() {
wx.onTouchStart(((e) =& {
let x = e.touches[0].clientX
let y = e.touches[0].clientY
if (this.checkIsFingerOnAir(x, y)) {
this.touched = true
this.setAirPosAcrossFingerPosZ(x, y)
}).bind(this))
wx.onTouchMove(((e) =& {
let x = e.touches[0].clientX
let y = e.touches[0].clientY
if (this.touched)
this.setAirPosAcrossFingerPosZ(x, y)
}).bind(this))
wx.onTouchEnd(((e) =& {
this.touched = false
}).bind(this))
requestAnimationFrame方法
去掉前面的window就可以了，全局对象里已经支持，setInterval一样
至此我们已经完成了移除适配器，可以在一个极简的条件下开发我们的小游戏了！！
15 收藏&&|&&46
请问示例的源码在哪下载？
请问示例的源码在哪下载？
这个直接在最新版的微信web开发者工具里,新建一个小游戏项目,就会有这些源码了
这个直接在最新版的微信web开发者工具里,新建一个小游戏项目,就会有这些源码了
你好，想问一下你接私活吗，开发微信小游戏可以的话加我微信
你好，想问一下你接私活吗，开发微信小游戏
可以的话加我微信
作者 您好~ 我是小程序社区管理员，非常欣赏你的文章想分享给更多的开发者学习，是否可以？转载会说明原作者和原文地址~
作者 您好~ 我是小程序社区管理员，非常欣赏你的文章想分享给更多的开发者学习，是否可以？转载会说明原作者和原文地址~
可以 转吧~
可以 转吧~
技术大佬一般都不吝分享和学习
技术大佬一般都不吝分享和学习
不是大佬不是大佬 只是一个小白: )
不是大佬不是大佬 只是一个小白: )
终于找到原作者了，谢谢你的分享
终于找到原作者了，谢谢你的分享
你好，请问一下，把main.js修改为export default class Main {
constructor() {
// this.restart()
var img = new Image();
img.src = 'images/hero.png';
ctx.drawImage(img, 0, 0);
}为什么显示不出图片呢？
你好，请问一下，把main.js修改为
export default class Main {
constructor() {
// this.restart()
var img = new Image();
img.src = 'images/hero.png';
ctx.drawImage(img, 0, 0);
为什么显示不出图片呢？
看看控制台有报错吗 再看看正确引入了adapter吗 还有就是看看有没有update里clear了画布
看看控制台有报错吗 再看看正确引入了adapter吗 还有就是看看有没有update里clear了画布
按照您的操作一步步的简化胆码后运行的时候，有些蒙圈饿，有个疑问就是，您使用wx.是基于微信小程序的对么，小白勿喷
按照您的操作一步步的简化胆码后运行的时候，有些蒙圈饿，有个疑问就是，您使用wx.是基于微信小程序的对么，小白勿喷
不是的 这个是基于微信小游戏的 目前你创建项目的时候小游戏跟小程序是分开的 他们的api文档也是分开。
不是的 这个是基于微信小游戏的 目前你创建项目的时候小游戏跟小程序是分开的 他们的api文档也是分开。
你好，想请问一下，官方代码里是没有写转发的，如何在代码里加入转发呢，加在哪里的呀，非常感谢
你好，想请问一下，官方代码里是没有写转发的，如何在代码里加入转发呢，加在哪里的呀，非常感谢
https://mp.weixin.qq.com/debug/wxagame/dev/tutorial/open-ability/share.html?t=201822 看看这个
这个是有看了的，不过不知道具体要加在代码里哪个地方，一直加了没什么效果，还是显示“当前页面未设置转发"，原谅我的小白问题~~
@kedaya[kedaya_5a03e29db078f] 这个是有看了的，不过不知道具体要加在代码里哪个地方，一直加了没什么效果，还是显示“当前页面未设置转发&，原谅我的小白问题~~
wx.onShareAppMessage() 这个就是个事件监听 可以在一开始的时候就加
wx.onShareAppMessage() 这个就是个事件监听 可以在一开始的时候就加
现在小游戏有公开的发布平台么。 自己做的怎么来发布
现在小游戏有公开的发布平台么。 自己做的怎么来发布
还没有吧。。可以自己开发测试着玩，等微信大佬们开放平台吧
还没有吧。。可以自己开发测试着玩，等微信大佬们开放平台吧
你好，请问我想开发一个双人玩的小游戏，类似象棋，怎么让两位玩家接入？
你好，请问我想开发一个双人玩的小游戏，类似象棋，怎么让两位玩家接入？
这基本是服务端的问题了，与你的前端通过socket通信。
这基本是服务端的问题了，与你的前端通过socket通信。
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。H5游戏推荐
Copyright & k休闲游戏
游戏作品版权归原作者享有，如无意之中侵犯了您的版权，请您按照《版权保护投诉指引》来信告知，本网站将应您的要求删除。发布到微信小游戏平台 · GitBook我的位置：
在微信小游戏40%抽成下 开发者是进还是退？
　　4月4日，微信小正式开放发布，与此同时，微信还公布了小游戏的分成策略。作为小游戏开发者无疑是喜出望外，但也出现了不同的声音：对比苹果，微信40%的分成占比是否过高？
　　按照微信此前公布的小游戏开发收益规则：
　　开发者收益=小游戏道具内购总流水收入-腾讯渠道技术服务费-腾讯依法代扣代缴税款（如有）。其中，腾讯渠道技术服务费为小游戏道具内购总流水收入的40%。
40%对比苹果的30%，是不是太高了？
　　40%的抽成，微信值不值？
　　不少人将小游戏道具内购与苹果渠道一直以来的三七分成对比。根据《App Store审核指南》，对于应用内购买，苹果将从中提取30%的分成，游戏类目也是如此。因此，不少人吐槽：&App Store不过也才30%&、&比苹果分成比例还高&&&
　　仅从数字上看，微信的抽成确实高于苹果。不过，根据笔者的观察，苹果的30%和微信的40%并非指向的是同一个概念，单纯的说高于苹果可能是对两类平台收费策略的误读。在苹果平台内，手机游戏的价值链条相对简单，游戏开发者或厂商只需要将产品上架到App Store，就算完成了游戏发行和用户触达，微信和苹果的不同点在于，微信提供的不仅仅是第三方支付渠道费，还包括了底层开发工具和游戏引擎等技术服务。例如，开发者只需访问微信公众平台官网即可获取开发工具，使用微信提供的开发工具即可进行开发。
　　此外，针对国内安卓应用商店的大量分化，以及运营推广的门类众多，微信在这其中还充当了游戏开发者和渠道之间的发行商。过去，传统手机游戏上架流程基本是游戏开发者将产品授权给发行方，发行方再将游戏投放至苹果及各大安卓应用商店。到了小游戏这里，你可以这样理解，40%的抽成费用同时涵盖了运营成本和发行成本，对于游戏开发者来说，你们省去了寻找发行商的一环，直接通过微信上架即可。
　　从开发工具到引擎提供，再到第三方支付渠道，微信抽取的40%看上去似乎也是比较合理的。毕竟这些都会产生一定的成本，而微信小游戏给开发者真正带来的价值是否值呢？
　　分成之外，变现能力不可小觑
　　我们来看看，微信提供的附加价值到底有哪些。
　　这次，微信官方在公布小游戏内购模式的同时，也提到了广告流量变现，也就是按广告点击给予开发者分成。虽然小游戏广告组件尚处于内测阶段，但在微信10亿用户流池的覆盖下，对于所有的小游戏开发者来说，必然是将来可能获取收入的一个重要途径。
　　在所有小游戏公布的能力里，微信的社交关系链价值恐怕是最能让开发者心动的了。小游戏支持微信社交关系链玩法，如微信好友或群内PK、排行榜竞技、围观等，这无疑能帮助小游戏利用好社交关系的自传播，实现迅速、低成本的推广和宣传，甚至是行之有效的商业转化。
　　显而易见，微信小游戏与苹果应用商店内的游戏，应属于两种不同纬度，在苹果商店上架的游戏属于App Store内的一个类目，小游戏属于微信生态内的一环，可以联动微信生态内的其他产品、功能，获得流量、平台红利。如果仅仅单纯将微信小游戏和App Store游戏栏目的收费比例的数字进行比较，实则是对两大平台运营模式的误读。
　　不过，虽然目前看来，小游戏的分成策略对开发者来说相对比较友好，但不能忽视的是，内购受益仅限于安卓版本，至于iOS系统内是否会有内购、如何分成，微信并没有更多透露。不过微信官方表示，目前的6:4的分成比例只是暂行规则，这意味着小游戏分成仍然存在不确定因素，至于比例是扩大还是缩小，游戏开发者们也只能翘首以盼了。
扫下方二维码 最新资讯快人一手
关注多玩微信公众号
关注多玩官方微博
24小时新闻轮播}