??想了解更多關(guān)于開源的內(nèi)容，請(qǐng)?jiān)L問：??
??51CTO 開源基礎(chǔ)軟件社區(qū)??
??https://ost.51cto.com??
簡(jiǎn)介
記得很久以前有個(gè)大火的像素游戲叫FlappyBird，我們就一起看看如何能用OpenHarmony學(xué)習(xí)做個(gè)FlappyBird。本文中引用的圖片資源均來自與Github。
![#跟著小白一起學(xué)鴻蒙# [番外]一起學(xué)做FlappyBird-開源基礎(chǔ)軟件社區(qū)](https://dl-harmonyos.51cto.com/images/202211/87ffb251403d407cc83278a304a8b5a4c947f5.gif "#跟著小白一起學(xué)鴻蒙# [番外]一起學(xué)做FlappyBird-開源基礎(chǔ)軟件社區(qū)")
開發(fā)
1、HAP應(yīng)用建立
這里我們就不贅述Hap項(xiàng)目的建立過程，以下就是基礎(chǔ)的Hap的page文件：index.ets
build() {
Row() {
Column() {
Canvas(this.context)
.width('100%')
.height('100%')
.onClick((ev: ClickEvent) => {
console.info("click!!")
//響應(yīng)鼠標(biāo)左擊
this.doClick()
})
.onReady(() =>{
//繪制基礎(chǔ)
this.context.imageSmoothingEnabled = false
this.drawBlock()
})
}
.width('100%')
}
.height('100%')
.backgroundImage($r("app.media.backgroundday"))
.backgroundImageSize(ImageSize.Cover)
}build是基礎(chǔ)頁(yè)面的構(gòu)造函數(shù)，用于界面的元素構(gòu)造，其他的頁(yè)面的生命周期函數(shù)如下：
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;
}2、Canvas介紹
canvas是畫布組件用于自定義繪制圖形，具體的API頁(yè)面如下：
https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-components-canvas-canvas-0000001333641081。
頁(yè)面顯示前會(huì)調(diào)用aboutToAppear()函數(shù)，此函數(shù)為頁(yè)面生命周期函數(shù)。
canvas組件初始化完畢后會(huì)調(diào)用onReady()函數(shù)，函數(shù)內(nèi)部實(shí)現(xiàn)小游戲的初始頁(yè)面的繪制。
（1）初始化頁(yè)面數(shù)據(jù)
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
}
}頁(yè)面狀態(tài)有三：
- 0：等待開始界面
- 1：游戲進(jìn)行
- 2：游戲結(jié)束
（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;
}
}小鳥飛行狀態(tài)有三種：
3、游戲邏輯
簡(jiǎn)單的小游戲主體游戲邏輯為：等待開始，開始，結(jié)束流程圖如下：
graph LR
等待開始 --> click[點(diǎn)擊]
click[點(diǎn)擊] --> 游戲開始
游戲開始 --> 點(diǎn)擊 --> |游戲開始|小鳥飛,水管動(dòng) --> |小鳥碰到水管| 游戲結(jié)束 --> 點(diǎn)擊 --> |游戲結(jié)束| 等待開始
小鳥飛,水管動(dòng) --> |小鳥沒碰到水管| 游戲繼續(xù) --> 點(diǎn)擊
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:
{
//由結(jié)束到待開始
this.flappyState = 0
this.slotY = this.slotStartY
this.pipeX = this.pipeStartX
break
}
default:
break
}
this.drawBlock()
}4、完整邏輯
@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:
{
//由結(jié)束到待開始
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)
}
}
遺留問題：
- 水管只在下層顯示：可以在上層顯示；
- 地面沒有讓動(dòng)
- 游戲聲音問題：目前ohos不支持音頻播放資源音頻，看之后版本是否支持
- DevEcoy用setInterval重繪canvas會(huì)導(dǎo)致ide崩潰
5、獲取源碼
見附件
https://gitee.com/wshikh/ohosflappybird。
總結(jié)
本文主要介紹了小游戲的開發(fā)，畫布功能的使用。
??想了解更多關(guān)于開源的內(nèi)容，請(qǐng)?jiān)L問：??
??51CTO 開源基礎(chǔ)軟件社區(qū)??
??https://ost.51cto.com??。
