flappy bird网页版(一起学做鸿蒙版FlappyBird)
记得很久以前有个大火的像素游戏叫 FlappBird，我们就一起看看如何能用 OpenHarmony 学习做个 FlappyBird。
效果图如下：
开发
①HAP 应用建立
此前我们简单了解了 Hap 应用的开发以及基础控件，这里我们就不赘述 Hap 项目的建立过程，以下就是基础的 Hap 的 page 文件：index.ets。
build() {
Row() {
Column() {
Canvas(this.context)
.width('100%')
.height('100%')
.onClick((ev: ClickEvent) => {
console.info("click!!")
//响应鼠标左击
this.doClick()
})
.onReady(() =>{
//绘制基础
this.context.imageSmoothingEnabled = false
this.drawBlock()
})
}
.width('100%')
}
.height('100%')
.backgroundImage($r("app.media.backgroundday"))
.backgroundImageSize(ImageSize.Cover)
}build 是基础页面的构造函数，用于界面的元素构造，其他的页面的生命周期函数如下：
declare class CustomComponent {
/**
* Customize the pop-up content constructor.
* @since 7
*/
build(): void;
/**
* aboutToAppear Method
* @since 7
*/
aboutToAppear?(): void;
/**
* aboutToDisappear Method
* @since 7
*/
aboutToDisappear?(): void;
/**
* onPageShow Method
* @since 7
*/
onPageShow?(): void;
/**
* onPageHide Method
* @since 7
*/
onPageHide?(): void;
/**
* onBackPress Method
* @since 7
*/
onBackPress?(): void;
}②Canvas 介绍
canvas 是画布组件用于自定义绘制图形，具体的 API 页面如下：
https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-components-canvas-canvas-0000001333641081页面显示前会调用 aboutToAppear() 函数，此函数为页面生命周期函数。
canvas 组件初始化完毕后会调用 onReady() 函数，函数内部实现小游戏的初始页面的绘制。
初始化页面数据：
drawBlock() {
this.context.clearRect(0,0,this.context.width,this.context.height)
this.context.drawImage( this.baseImg,this.baseX,this.baseY,500,300)
switch(this.flappyState) {
case 0:
this.context.drawImage( this.messageImg,this.startX,this.startY,300,500)
this.drawBird()
break;
case 1:
this.drawBird()
this.context.drawImage( this.pipegreenImg,this.pipeX,this.pipeY,50,150)
break;
case 2:
this.context.drawImage( this.gameoverImg,this.startX,this.startY*3,300,90)
break
}
}页面状态有三：
- 0：等待开始界面
- 1：游戏进行
- 2：游戏结束
绘制 Bird：
drawBird() {
switch(this.birdType) {
case 0:
this.context.drawImage( this.midbirdImg,this.slotX,this.slotY,this.birdH,this.birdW)
break
case 1:
this.context.drawImage( this.upbirdImg,this.slotX,this.slotY,this.birdH,this.birdW)
break;
case 2:
this.context.drawImage( this.downbirdImg,this.slotX,this.slotY,this.birdH,this.birdW)
break;
default:
break;
}
}小鸟飞行状态有三种：
- 翅膀在中间：0
- 翅膀在上：1
- 翅膀在下：2
③游戏逻辑
简单的小游戏主体游戏逻辑为：等待开始，开始，结束流程图如下：
graph LR
等待开始 --> click[点击]
click[点击] --> 游戏开始
游戏开始 --> 点击 --> |游戏开始|小鸟飞,水管动 --> |小鸟碰到水管| 游戏结束 --> 点击 --> |游戏结束| 等待开始
小鸟飞,水管动 --> |小鸟没碰到水管| 游戏继续 --> 点击doClick() {
switch (this.flappyState) {
case 0:
{
// 开始
this.flappyState = 1
break
}
case 1:
{
//上下飞
// this.flappyState = 2
this.slotY -= this.flyHeight
console.log(this.slotY.toString())
break
}
case 2:
{
//由结束到待开始
this.flappyState = 0
this.slotY = this.slotStartY
this.pipeX = this.pipeStartX
break
}
default:
break
}
this.drawBlock()
}④完整逻辑
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
private baseImg:ImageBitmap = new ImageBitmap("common/images/base.png")
private messageImg:ImageBitmap = new ImageBitmap("common/images/message.png")
private zeroImg:ImageBitmap = new ImageBitmap("common/images/0.png")
private gameoverImg:ImageBitmap = new ImageBitmap("common/images/gameover.png")
private upbirdImg:ImageBitmap = new ImageBitmap("common/images/bluebirdupflap.png")
private midbirdImg:ImageBitmap = new ImageBitmap("common/images/bluebirdmidflap.png")
private downbirdImg:ImageBitmap = new ImageBitmap("common/images/bluebirddownflap.png")
private pipegreenImg:ImageBitmap = new ImageBitmap("common/images/pipegreen.png")
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private flappyState: number = 0
private startX = 30;
private startY = 100;
private slotStartY = 410;
private slotX = 50;
private slotY = this.slotStartY;
private baseX = 0;
private baseY = 650;
private pipeStartX = 330;
private pipeX = this.pipeStartX;
private pipeY = 500;
private birdH = 60;
private birdW = 50;
private birdTimer: number;
private birdType: number = 0;
private count = 1;
private flyHeight = 20;
private pipeMove = 10;
drawBird() {
switch(this.birdType) {
case 0:
this.context.drawImage( this.midbirdImg,this.slotX,this.slotY,this.birdH,this.birdW)
break
case 1:
this.context.drawImage( this.upbirdImg,this.slotX,this.slotY,this.birdH,this.birdW)
break;
case 2:
this.context.drawImage( this.downbirdImg,this.slotX,this.slotY,this.birdH,this.birdW)
break;
default:
break;
}
}
drawBlock() {
this.context.clearRect(0,0,this.context.width,this.context.height)
this.context.drawImage( this.baseImg,this.baseX,this.baseY,500,300)
switch(this.flappyState) {
case 0:
this.context.drawImage( this.messageImg,this.startX,this.startY,300,500)
this.drawBird()
break;
case 1:
this.drawBird()
this.context.drawImage( this.pipegreenImg,this.pipeX,this.pipeY,50,150)
break;
case 2:
this.context.drawImage( this.gameoverImg,this.startX,this.startY*3,300,90)
break
}
}
doClick() {
switch (this.flappyState) {
case 0:
{
// 开始
this.flappyState = 1
break
}
case 1:
{
//上下飞
// this.flappyState = 2
this.slotY -= this.flyHeight
console.log(this.slotY.toString())
break
}
case 2:
{
//由结束到待开始
this.flappyState = 0
this.slotY = this.slotStartY
this.pipeX = this.pipeStartX
break
}
default:
break
}
this.drawBlock()
}
doFly(): void {
console.log("dofly ------ !!")
this.birdType += 1
if (this.birdType/5 == 0) {
this.message = "dofly ---555--- !!"
}
}
async sleep(ms: number) {
return new Promise((r) => {
setInterval(() => {
this.birdType += 1
this.message = this.birdType.toString()
if (this.birdType == 3) {
this.birdType = 0
}
console.log(this.message)
if (this.flappyState == 1) {
this.pipeX -= this.pipeMove
if (this.pipeX < 0) {
this.pipeX = 330
}
this.slotY += this.flyHeight/5
}
if ((((this.pipeX-this.slotX) <= this.birdW) && ((this.pipeY-this.slotY) <= this.birdH)) ||
this.pipeY >= this.baseY) {
this.flappyState = 2
}
this.drawBlock()
}, ms)
})
}
aboutToDisappear() {
}
aboutToAppear() {
this.sleep(200)
}
build() {
Row() {
Column() {
Canvas(this.context)
.width('100%')
.height('100%')
.onClick((ev: ClickEvent) => {
console.info("click!!")
this.doClick()
})
.onReady(() =>{
this.context.imageSmoothingEnabled = false
this.drawBlock()
})
}
.width('100%')
}
.height('100%')
.backgroundImage($r("app.media.backgroundday"))
.backgroundImageSize(ImageSize.Cover)
}
}遗留问题：
- 水管只在下层显示：可以在上层显示；
- 地面没有让动
- 游戏声音问题：目前 ohos 不支持音频播放资源音频，看之后版本是否支持
- DevEcoy 用 setInterval 重绘 canvas 会导致 ide 崩溃
获取源码：
https://gitee.com/wshikh/ohosflappybird总结
本文主要介绍了小游戏的开发，画布功能的使用。
作者：王石
责任编辑：
