本文旨在通过分析官方给出的一个飞机大战小游戏的源代码来说明如何进行小游戏的开发。
前天一个跳一跳小游戏刷遍了朋友圈,也代表了微信小程序拥有了搭载游戏的功能(早该往这方面发展了,这才是应该有的形态嘛)。作为一个前端 er,我的大刀早已经饥渴难耐了,赶紧去下一波最新的微信官方开发工具,体验一波小游戏要如何开发。
我们欣喜地看到可以直接点击小游戏体验一下,而且官方也有一个示例源代码,是一个简易版的飞机大战的源码,直接点开模拟器就可以看效果。
(还是原汁原味的打飞机游戏呀!)通过阅读这个源代码我们便可以知道如何进行小游戏的开发了。废话少说直接进入主题,先来分析一波源码的整体结构。
路径 | 内容 |
---|---|
audio | 音频文件目录 |
images | 图片文件目录 |
js | 主要源代码目录 |
game.js | 游戏主入口 |
game.json | 游戏的配置文件 |
下面是官方示例中的 js 文件具体的作用
- ./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()
- 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'
- let ctx = canvas.getContext('2d')
- let databus = new DataBus()
- /**
- * 游戏主函数
- */
- export default class Main {
- constructor() {
- this.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()
- window.requestAnimationFrame(
- this.loop.bind(this),
- canvas
- )
- }
- /**
- * 随着帧数变化的敌机生成逻辑
- * 帧数取模定义成生成的频率
- */
- 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.length; i < il;i++ ) {
- let enemy = databus.enemys[i]
- if ( !enemy.isPlaying && enemy.isCollideWith(bullet) ) {
- enemy.playAnimation()
- that.music.playExplosion()
- bullet.visible = false
- databus.score += 1
- break
- }
- }
- })
- for ( let i = 0, il = databus.enemys.length; i < il;i++ ) {
- let enemy = databus.enemys[i]
- if ( this.player.isCollideWith(enemy) ) {
- databus.gameOver = true
- break
- }
- }
- }
- //游戏结束后的触摸事件处理逻辑
- touchEventHandler(e) {
- e.preventDefault()
- let x = e.touches[0].clientX
- let y = e.touches[0].clientY
- let area = this.gameinfo.btnArea
- if ( 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()
- }
- // 实现游戏帧循环
- loop() {
- 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)
- return
- }
- window.requestAnimationFrame(
- this.loop.bind(this),
- canvas
- )
- }
- }
看起来是不是很亲切)。
- requestAnimationFrame
Main 内结构清晰,主要理解整个流程就是调用来不停地刷帧更新位置信息推动所有对象运动,每个对象在每一帧都有新的位置,连起来就是动画了。分清位置的更新与对象的绘制是关键。
- requestAnimationFrame
- import Pool from './base/pool'
- let instance
- /**
- * 全局状态管理器
- */
- export default class DataBus {
- constructor() {
- if ( instance )
- return instance
- instance = this
- this.pool = new Pool()
- this.reset()
- }
- reset() {
- this.frame = 0
- this.score = 0
- this.bullets = []
- this.enemys = []
- this.animations = []
- this.gameOver = false
- }
- /**
- * 回收敌人,进入对象池
- * 此后不进入帧循环
- */
- 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)
- }
- }
- /**
- * 游戏基础的精灵类
- */
- export default class Sprite {
- constructor(imgSrc = '', width= 0, height = 0, x = 0, y = 0) {
- this.img = new Image()
- this.img.src = imgSrc
- this.width = width
- this.height = height
- this.x = x
- this.y = y
- this.visible = true
- }
- /**
- * 将精灵图绘制在canvas上
- */
- drawToCanvas(ctx) {
- if ( !this.visible )
- return
- ctx.drawImage(
- this.img,
- this.x,
- this.y,
- 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 里的 drawImage 方法,也是我们自行开发小游戏以后会用到的方法。包括 background,player 等类都会继承自精灵类,并且会添加自己的 update 方法来暴露更新自己位置信息的接口。enermy 还会包装一层爆炸动画的封装,思路大同小异,就不在多赘述了。
tips: 读一读适配器源码也有利于了解如何开发小程序 (例如事件绑定之类的操作)
小程序终于可以来做小游戏了,感觉还是休闲类的游戏会占主导地位,前端大大可以迎接新的战场啦哈哈哈~~~(接下来会去掉适配器用原生 api 改写官方 demo)
来源: https://segmentfault.com/a/1190000012646888