【飞翔的鸟】飞行游戏-uniapp项目开发流程详解

2023-12-24 20:55:22

小时候玩过的飞行游戏,叫什么名字来着,通过点击操作控制煽动翅膀来持续飞行,躲避障碍物,有多远就飞多远吧,现在想起来,其中的实现原理非常简单,感兴趣的话来一起看看,这里给大家讲一讲飞翔的小鸟游戏的开发过程。

创建项目

这里用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()
},

游戏测试

写到这里,基本上就可以运行测试玩玩了,

看看飞翔的小鸟游戏运行效果吧,运行动图如下请添加图片描述

游戏里有用了小鸟图片,图片是可以自己替换的,
替换直升机图片飞行吧,反正游戏体验效果都是一致的;
还没有背景音呢,想要就自己找个音乐文件加上吧

想要项目源码在点这里查看下载,或者直接点这里搜索:飞翔的鸟,在本博客站内请放心下载,感谢支持!

可能手机上看不到,请改用电脑浏览器查看;
如果搜索不到,只能在资源一栏慢慢找了(太多了不好找

请添加图片描述

文章来源:https://blog.csdn.net/zs1028/article/details/135174231
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。