小时候玩过的飞行游戏，叫什么名字来着，通过点击操作控制煽动翅膀来持续飞行，躲避障碍物，有多远就飞多远吧，现在想起来，其中的实现原理非常简单，感兴趣的话来一起看看，这里给大家讲一讲飞翔的小鸟游戏的开发过程。
文章目录
- 创建项目
- 页面布局
- 初始页面
- 游戏页面
- 设置横屏
- 游戏逻辑
- 加载模块
- 初始化画布
- 初始化游戏数据
- 绘制游戏状态
- 绘制小鸟
- 绘制障碍物
- 开始游戏
- 触摸事件
- 游戏测试
创建项目
这里用HBuilderX开发工具来创建一个uniapp项目，
例如项目名填写uniapp_FlapperBird，依次选择如下图
- 选择新建uni-app项目
- 使用默认模板
- Vue版本选择 3
页面布局
新建好项目，会看到自动创建了一个初始页面文件，
初始页面
文件位置在pages/index/index.vue，打开看看，
在页面布局中，对应的template标签里添加一个按钮组件，按钮名叫进入游戏，
然后在script标签里，添加一个按钮点击方法，实现打开游戏页面，
打开页面的代码很简单，自己能写出来吧，这里就不展开讲，
游戏页面
需要自己创建一个游戏页面，
页面文件在pages/game/game.vue，打开接着写，
在页面布局中，对应的template标签里添加，内容如下
<!--pages/game/game.wxml-->
<view class="page">
<canvas id="zs1028_csdn" canvas-id="zs1028_csdn" class="canvas" bindtouchstart="onTouchStart" :disable-scroll="true"/>
</view>
就这么简单，只放一个
canvas组件即可，组件的一些属性不用说能看懂吧
写好后，要做出运行的游戏页面效果，就像如下图这样
这是在游戏开始时，其它的物品还没有出现
设置横屏
竖屏这样玩是不是视野变窄了点，可以设置横屏的，
把项目根目录下的文件pages.json打开，
添加一个属性pageOrientation设置，代码如下
{
//...
"globalStyle": {
//...
"pageOrientation": "landscape"
},
}
不知道这样设置有没有效果，H5版好像不行吧，手机浏览器上是跟随系统横屏的
游戏逻辑
接下来，在script标签里，写游戏逻辑，
加载模块
开始写初始化代码，先加载游戏模块，添加代码如下
// pages/game/game.js
import ZS1028_CSDN from '../../utils/zs1028_CSDN.js'
const app = getApp()
Page({
//...
/**
* 生命周期函数--监听页面初次渲染完成
*/
async onReady() {
//...这里处理初始化
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
this.game?.destroy()
},
/**
* 以下是通过canvas的触摸事件来调用
*/
onTouchStart(e) {...},
})
导入的一个模块
ZS1028_CSDN，是一个游戏引擎框架模块，用上它让游戏实现变得简单；
话说这个游戏模块，是通过一层又一层的绘制来实现的，代码总才182行，这么少，这一看很快就读完；
继续往下看，就能大概知道怎样绘制游戏了
初始化画布
游戏大致的思路呢，是要先把画布初始化，然后绘制出来游戏画面，
就在onReady()方法里写，画布初始化的逻辑，代码如下
const { width, height } = await ZS1028_CSDN.query('#zs1028_csdn')
const canvas = {
width,
height,
getContext() {
return uni.createCanvasContext('zs1028_csdn')
},
//...
}
const game = ZS1028_CSDN.createMiniGameEngine({
canvas,
// isTest: true //游戏测试用途
})
this.game = game
初始化游戏数据
继续写下去，初始化游戏数据，代码如下，
//游戏状态数据
const gameState = {
bottom: 50, //绘制游戏状态的底边间距
timeCount: 0, //计时
scope: 0, //计分
}
//小鸟的数据
const birdData = {
width: 60, //定义小鸟宽度
imgIndex: 0, //图片索引（至少要2张图片，才能绘制动画效果)
climb: 0 //点击后，小鸟飞行上升的高度
}
Object.assign(birdData, {
height: birdData.width / 1.4 //按照图片尺寸计算出小鸟的高度
})
//障碍物的数据
const barrierData = {
width: birdData.width * 1.1, 宽度
list: [] //存放的障碍物列表
}
Object.assign(barrierData, {
minWidth: barrierData.width * 0.86, //计算最小的宽度，用于绘制
distance: barrierData.width * 3 //计算上一个障碍物与下一个的间距
})
绘制游戏状态
接下来，调用游戏对象的绘制过程，
这是绘制游戏标题，显示游戏状态，代码如下
const that = this
//绘制游戏标题层，在屏幕上面显示游戏状态
game.initTopBar({
data: gameState, //把定义的游戏状态数据传入其中
//重置事件
reset() {
Object.assign(this.data, {
timeCount: 0, //计时重置
scope: 0, //计分重置
maxScope: app.getMaxScope() //最高分
})
},
//重绘事件
redraw(data) {
const {
canvas,
context: ctx
} = data
const {
timeCount,
scope,
maxScope,
bottom
} = this.data
//...这里处理更新计时timeCount
//以下是绘制标题
ctx.textAlign = 'center'
ctx.font = `18px sans-serif`
ctx.strokeStyle = '#ffffff'
let text = `⏰x${timeCount}s 🪙x${scope} 🏆x${maxScope}`
ctx.strokeText(text, canvas.width * 0.5, 30)
ctx.fillText(text, canvas.width * 0.5, 30)
}
})
绘制小鸟
接下来，绘制一只飞翔的鸟，在其上层的中间位置绘制，代码如下
//添加游戏前景层，绘制一只鸟
game.addForeObject({
data: birdData,
reset() {
//...这里重置小鸟的数据，放屏幕中间位置
},
redraw(data) {
const {
canvas,
context: ctx
} = data
//调用绘制小鸟的方法
this.drawBird(ctx)
},
methods: {
drawBird(ctx) {
let {
x,
y,
width,
height,
imgIndex,
climb
} = this.data
if (climb > 0) {
//...
y -= 2 //小鸟在上升
} else {
y += 2 //小鸟在滑翔
}
// 判断图片索引，决定让使用那个图片显示小鸟
switch (imgIndex) {
//...
default:
ctx.drawImage('./../../static/tu_03.png', x, y, width, height)
}
// 调用碰撞检测方法，如果碰到了障碍物，游戏就会结束
if (this.crashDetection(y)) {
game.stop()
that.isGameEnd = true
app.setMaxScope(gameState.scope)
//...这里执行弹出游戏结束提示即可
}
// 记录时间变化
let nowTime = Date.now()
// 判断时间差，如果大于300毫秒就替换小鸟图片
if (!this.preTime || (nowTime - this.preTime) > 300) {
//...改变小鸟的图片，实现煽动翅膀动画效果
this.data.imgIndex = (imgIndex + 1) % 2
}
//...最后，记得更新一下小鸟变化后的数据
},
crashDetection(y) {
//...这里实现碰撞检测
for (let i = 0; i < barrierData.list.length; i++) {
let barrier = barrierData.list[i]
//...判断是否碰撞条件
}
return false
}
}
})
要运行的话，就能看到屏幕中间的小鸟在煽动翅膀，
绘制障碍物
接下来，绘制障碍物，要在屏幕最右边开始出现，
然后，障碍物在慢慢接近小鸟，实现代码如下
//添加背景层，绘制一些障碍物，绘制砖块，管道都可以
game.addBgObject({
data: barrierData, //传入障碍物的数据
reset() {
this.data.list.length = 0 //重置就清空列表
this.addBarrier() //这里执行添加一个障碍物方法
},
redraw(data) {
const {
canvas,
context: ctx
} = data
const {
list,
width,
distance
} = this.data
list.forEach((item, index) => {
//障碍物上下对称出现
//先绘制上面的障碍物
if (item.y > 0) this.drawBarrier(ctx, item.x, item.y)
//再计算间距，绘制出下面的障碍物
if (item.y + item.distance < canvas.height) this.drawBarrier(ctx, item.x, item.y + item.distance, true)
item.x -= 1 //向水平方向移动
})
//...绘制其它边框
//有障碍物的话，就处理
if (list.length > 0) {
if (list[0].x + width < 0) {
//超出边界，就移出
list.shift()
//游戏加分
gameState.scope++
} else if (list[list.length - 1].x + width + distance < canvas.width) {
//每隔一段距离，就出现一个
this.addBarrier()
}
}
},
methods: {
drawBarrier(ctx, x, y, isDown = false) {
//...这里实现绘制障碍物即可，isDown是绘制下面的，否则绘制上面
},
addBarrier() {
//...这里实现添加新的障碍物数据
this.data.list.push({...}) //数据属性y和distance是随机变化的
}
}
})
开始游戏
初始化都写好了，最后要保存好数据，代码如下
//将初始化数据存放好
this.gameData = {
gameState,
barrierData,
birdData
}
//调用此方法开始游戏
this.restart()
那游戏开始了吗，看方法restart()代码是怎么样的
const {
game
} = this
this.isGameEnd = false
game.reset()
这里发现，没有调用
game.run()方法，因此，游戏还没有运行起来
触摸事件
接下来，处理画布canvas触摸事件，让游戏与玩家交互，
开始触摸时，改一下小鸟的数据即可，
就通过触摸开始事件来处理，代码如下
onTouchStart(e) {
if (this.isGameEnd) return
const {
birdData
} = this.gameData
birdData.climb = 20 //改变这个属性值，小鸟就会上升的
const {
game
} = this
//如果游戏没有运行，这里执行一下就开始游戏了
if (!game.isRun()) game.run()
},
游戏测试
写到这里，基本上就可以运行测试玩玩了，
看看飞翔的小鸟游戏运行效果吧，运行动图如下
游戏里有用了小鸟图片，图片是可以自己替换的，
替换直升机图片飞行吧，反正游戏体验效果都是一致的;
还没有背景音呢，想要就自己找个音乐文件加上吧
想要项目源码在点这里查看下载，或者直接点这里搜索:飞翔的鸟，在本博客站内请放心下载，感谢支持！
可能手机上看不到，请改用电脑浏览器查看;
如果搜索不到，只能在资源一栏慢慢找了（太多了不好找）
