微信小游戏开发教程-游戏实现3

对象池

由于游戏过程中会创建很多临时对象，这些对象很快又不再使用，垃圾回收器也能帮我们主动回收这部分垃圾，但是回收时间不可控制，同时增大了创建对象的开销，所以我们使用对象池技术缓存这些不用的对象，当需要使用的时候将这些对象取出来重复利用，从而避免重复创建对象的开销。下面是一个简易对象池的实现：

// pool.js
// @author: wyndam
// @email: only.night@qq.comexport default class Pool {constructor() {this.pool = {}}put(name, obj) {let list = this.pool[name]if (list == null) {this.pool[name] = []}this.pool[name].push(obj)}get(name) {let list = this.pool[name]if (list != null) {return list.shift()}return null}}

一个二维数组用于缓存不同类型的对象。

障碍物

游戏中的水管我们将其定义为障碍物，这里有两种实现，一种是上下两个水管作为一个障碍物对象，另外一种是将其看作两个对象。将其看作一个对象就需要重写碰撞检测函数，看作两个对象的话，需要创建一个对象将这两个障碍物组合在一起，各有各的利弊。这里我们将其看作不同两个对象，不用重写碰撞检测方法，只需要与两个障碍物分别做碰撞检测只要有一个碰撞即表示碰撞。

// @author: wyndam
// @email: only.night@qq.comimport Sprite from '../base/sprite.js'const __ = {speed: Symbol('speed')
}export default class EnvItem extends Sprite {constructor(imgSrc, x, y, width, height) {super(imgSrc, x, y, width, height)this.left = 0// this[__.speed] = 2this[__.speed] = databus.speed}update() {if(!this.visible){return}this.left -= this[__.speed]}setSpeed(speed){this[__.speed] = speed}}

这里抽象出一个环境对象，用于移动物体的基本操作。
水管的实现如下：

// barrier.js// @author: wyndam
// @email: only.night@qq.comimport EvnItem from '../runtime/envItem.js'const BARRIER_IMG_SRC = 'images/pipe_down.png'
const BARRIER_IMG1_SRC = 'images/pipe_up.png'
const BARRIER_WIDTH = 52
const BARRIER_HEIGHT = 320export default class Barrier extends EvnItem {constructor() {super(BARRIER_IMG_SRC, 0, 0, BARRIER_WIDTH, BARRIER_HEIGHT)this.left = 0}init(imgSrc, x, y, width, height) {this.img.src = imgSrcthis.x = xthis.y = ythis.start = xthis.width = widththis.height = heightthis.visible = truethis.left = 0}setLeft(left) {this.left = left}update() {if (!this.visible) {return}super.update()this.x = this.start + this.leftif (this.x <= -(window.innerWidth + this.width)) {databus.recycleBarrier(this)}}}

在 update 中移动 x 坐标即可，然后之后update方法会在主循环中调用。

障碍物组合

// barrierPair.js
// @author: wyndam
// @email: only.night@qq.comimport Sprite from '../base/sprite.js'
import Barrier from '../runtime/barrier.js'const BARRIER_IMG_SRC = 'images/pipe_down.png'
const BARRIER_IMG1_SRC = 'images/pipe_up.png'
const BARRIER_WIDTH = 52
const BARRIER_HEIGHT = 320export default class BarrierPair extends Sprite {constructor() {super(BARRIER_IMG_SRC, 0, 0, BARRIER_WIDTH, BARRIER_HEIGHT)this.width = px2dp(this.width) / 1.3this.height = px2dp(this.height) / 1.3this.left = 0this.blank = 100this.scored = falsethis.topBarrier = new Barrier()this.bottomBarrier = new Barrier()}init(barrierTopImg, barrierBottomImg, x, y, blank) {this.topBarrier.init(barrierTopImg, x, y, this.width, this.height)this.bottomBarrier.init(barrierBottomImg, x, y + this.topBarrier.height + blank, this.width, this.height)this.blank = blankthis.visible = truethis.scored = falsethis.left = 0}draw(ctx) {if (!this.visible) {return}this.topBarrier.draw(ctx)this.bottomBarrier.draw(ctx)}update() {if (!this.visible) {return}this.topBarrier.update()this.bottomBarrier.update()}/*** 分别对两个障碍物做碰撞检测即可*/isCollideEdgeWith(target) {return (this.topBarrier.isCollideEdgeWith(target) || this.bottomBarrier.isCollideEdgeWith(target))}/*** 判断玩家是否越过了障碍物*/isPassed(player) {if (this.scored) {return false}let score = (player.x > this.topBarrier.x + this.topBarrier.width)if (score) {this.scored = true}return score}}

障碍物生成器

这里障碍物会不断的从右边出来，所以我们要不断的生成障碍物，需要有一个能够管理障碍物的工具：

// filaname: barrier-manager.js
// @author: wyndam
// @email: only.night@qq.comimport BarrierPair from './barrierPair.js'export default class BarrierManager {constructor() {}/*** 根据帧数，间隔一段时间生成一个障碍物，并将其加如全局缓存中*/generateBarriers(frame) {if (frame % databus.barrierGenFrame === 0) {let barrier = databus.generateBarrier('images/pipe_down.png', 'images/pipe_up.png',window.innerWidth, px2dp(-130) + Math.random() * px2dp(100), px2dp(130))databus.barriers.push(barrier)}}draw(ctx) {for (let i = 0; i < databus.barriers.length; i++) {databus.barriers[i].draw(ctx)}}update() {for (let i = 0; i < databus.barriers.length; i++) {databus.barriers[i].update()}}}

全局缓存实现如下：

// filename: databus.js
// @author: wyndam
// @email: only.night@qq.comimport Pool from './base/pool.js'
import BarrierPair from './runtime/barrierPair.js'window.RATIO = window.innerWidth / 288window.px2dp = function(px) {return px * RATIO
}let instanceexport default class DataBus {constructor() {if (instance == null) {instance = this} else {return instance}// 从开始到现在的帧数this.frame = 0// 游戏是否在运行，是否需要更新this.running = true// 游戏是否结束this.gameOver = false// 障碍物显示队列this.barriers = []// 缓存对象池this.pool = new Pool()// 全局难度参数this.speed = 2 // 速度this.barrierGenFrame = 80 // 生成障碍物间隔帧数}/*** 从添加到绘制的障碍物列表中回收不显示的用于新障碍物的显示*/recycleBarrier(barrier) {if (barrier != null) {barrier.visible = falselet temp = this.barriers.shift()temp.visible = falsethis.barriers[0].left -= this.speedthis.pool.put('barrier', temp)}}/*** 从对象池中去除障碍物组合对象，没有的话就创建一个*/generateBarrier(barrierTop, barrierBottom, x, y, blank) {let barrier = this.pool.get('barrier')if (barrier != null) {barrier.init(barrierTop, barrierBottom, x, y, blank)return barrier} else {let temp = new BarrierPair()temp.init(barrierTop, barrierBottom, x, y, blank)return temp}}}window.databus = new DataBus()

全局对象中包含缓存对象池以及一些全局控制变量

微信小游戏开发教程-游戏实现3相关推荐

微信小游戏开发教程-游戏实现2
微信小游戏开发教程-游戏实现2 绘制地面类似于绘制背景,读者自行完成代码.src/runtime/land.js 简易View系统坐标布局对于复杂的页面来说维护相当困难,因此这里我们引入布局的概念 ...
微信小游戏开发教程-游戏实现1
微信小游戏开发教程-游戏实现1 概述微信开发者工具官方提供一个飞机大战的游戏Demo,这里我们不再使用这个demo,我们以FlappyBird为例,为了让读者更加容易理解. 源码 https://g ...
微信小程序开发的游戏《拼图游戏》
微信小程序开发的游戏<拼图游戏> 代码直接考进去就能用 pintu.js // pintu.js Page({/*** 页面的初始数据*/data: {},initGame: functi ...
视频教程-微信小程序开发教程(第1篇)-微信开发
微信小程序开发教程(第1篇) 微信企业号星级会员.10多年软件从业经历,国家级软件项目负责人,主要从事软件研发.软件企业员工技能培训.已经取得计算机技术与软件资格考试(软考)--"信息系统项 ...
微信小程序开发分销制度济南_花店微信小程序开发教程
如何将自己的鲜花商品快速配送出去,避免鲜花过期浪费,是很多传统花店商家的难题.不过随着微信小程序的出现,这一难题也渐渐得到了解决.花店商家可以通过自己的小程序商城,打通线上渠道,可以加大推广.扩大销量 ...
微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
微信小程序开发教程第八章：微信小程序分组开发与左滑功能实现
接着上面微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现.(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程序名片夹详情页开 ...
小程序开发用什么编程语言_微信小程序开发教程是什么？费用多少？
微信小程序如今已经非常常见,渗透到了我们日常生活的方方面面,包括生活服务.出行.点餐.电商购物.企业展示--商家可以开发适合自己行业的小程序,以吸引线上用户,同时提高自身服务运营效率.不过这些不同种类 ...
微信小程序开发语言（微信小程序开发教程）详细步骤
微信小程序开发语言开发微信小程序用什么语言 1.微信小程序开发所需要的语言比较特别,首先介绍一下需要使用到的文件类型大致分为:WXML(WeiXin Mark Language 微信标记语言).WX ...

微信小游戏开发教程-游戏实现3

微信小游戏开发教程-游戏实现3

对象池

障碍物

障碍物组合

障碍物生成器

微信小游戏开发教程-游戏实现3相关推荐

最新文章

热门文章