小時候我們有個熟悉的游戲叫小蜜蜂。本文教大家在鴻蒙上學做這個小蜜蜂游戲。

開發實戰

①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.drawall()
})
}
.width('100%')
}
.height('100%')
.backgroundColor("#000000")
}

declareclassCustomComponent{
/**
*Customizethepop-upcontentconstructor.
*@since7
*/
build():void;

/**
*aboutToAppearMethod
*@since7
*/
aboutToAppear?():void;

/**
*aboutToDisappearMethod
*@since7
*/
aboutToDisappear?():void;

/**
*onPageShowMethod
*@since7
*/
onPageShow?():void;

/**
*onPageHideMethod
*@since7
*/
onPageHide?():void;

/**
*onBackPressMethod
*@since7
*/
onBackPress?():void;
}

②Canvas 介紹

canvas 是畫布組件用于自定義繪制圖形，具體的 API 頁面如下：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-components-canvas-canvas-0000001333641081

初始化頁面數據：

drawall(){
this.context.clearRect(0,0,this.context.width,this.context.height)
this.drawFj();
this.drawEn();
this.drawBullet();
this.drawScore();
}

drawFj(){
this.context.drawImage(this.fjImg,this.fjStartX,this.fjslotY,this.birdH,this.birdW)
}

drawEn(){
for(letline=0;line

	

	不同行的害蟲長相不同，分值不同。

	③游戲邏輯

	簡單的小游戲主體游戲邏輯為：點擊鼠標移動飛機，飛機發射子彈，命中害蟲，計算分數：

	
doClick(){
if(this.en1slotX<=?50)?{
??????this.en1slotX?+=?this.birdW
????}?else?{
??????this.en1slotX?-=?this.birdW
????}
????console.log("doclick----")
????this.moveFj();
??}



	

	④完整邏輯

	
@Entry
@Component
structIndex{
@Statemessage:string='HelloWorld'
privatesettings:RenderingContextSettings=newRenderingContextSettings(true);
privatecontext:CanvasRenderingContext2D=newCanvasRenderingContext2D(this.settings);
privateblockType:number=0
privateblockSize:number=30
privateen1Img:ImageBitmap=newImageBitmap("common/images/mf1.png")
privateen2Img:ImageBitmap=newImageBitmap("common/images/mf2.png")
privateen3Img:ImageBitmap=newImageBitmap("common/images/mf3.png")
privatefjImg:ImageBitmap=newImageBitmap("common/images/fj.png")

privatestartX=30;
privatestartY=100;
privateenStartY=140;
privatefjStartX=50;
privatefjStartY=610;
privatefjslotX=50;
privatefjslotY=this.fjStartY;
privateen1slotX=50;
privateen1slotY=this.enStartY;
privateen2slotX=50;
privateen2slotY=this.enStartY;
privatebulletX=65;
privatebulletY=550;
privatebirdH=40;
privatebirdW=40;
privatescore=0;
privatefjDirection=1;

privateenemylist=[
[1,1,1,1,1],
[1,1,1,1,1],
[1,1,1,1,1],
]

moveFj(){
this.fjStartX=this.fjStartX+this.fjDirection*this.birdW
if(this.fjStartX>=210){
this.fjDirection=-1
}elseif(this.fjStartX<=?50)?{
??????this.fjDirection?=?1
????}
??}

??drawFj()?{
????this.context.drawImage(?this.fjImg,?this.fjStartX,?this.fjslotY,this.birdH,this.birdW)
??}

??drawEn()?{
????for?(let?line=0;?line?{
setInterval(()=>{
if(that.en1slotX<=?50)?{
??????????that.en1slotX?+=?that.birdW
????????}?else?{
??????????that.en1slotX?-=?that.birdW
????????}

????????console.log(that.en1slotX.toString())
????????that.drawall()

??????},?ms)
????})
??}

??doClick()?{
????if?(this.en1slotX?<=?50)?{
??????this.en1slotX?+=?this.birdW
????}?else?{
??????this.en1slotX?-=?this.birdW
????}
????console.log("doclick----")
????this.moveFj();
??}

??aboutToAppear()?{
????this.sleep(1000)
??}

??build()?{
????Row()?{
??????Column()?{
????????Canvas(this.context)
??????????.width('100%')
??????????.height('100%')
??????????.onClick((ev:?ClickEvent)?=>{
console.info("click!!")
this.doClick()
})
.onReady(()=>{
this.context.imageSmoothingEnabled=false
this.drawall()
})
}
.width('100%')
}
.height('100%')
.backgroundColor("#000000")
}
}

遺留問題：

	

	飛機的子彈可以多發

	害蟲可以攻擊飛機

	游戲聲音問題：目前 ohos 不支持音頻播放資源音頻，看之后版本是否支持

	DevEco 用 setInterval 重繪 canvas 會導致 ide 崩潰

	

	總結

	   本文主要介紹了小游戲的開發，畫布功能的使用，獲取源碼請通過“閱讀原文”下載附件。


	作者：王石 

	審核編輯：湯梓紅