鸿蒙上开发“小蜜蜂”游戏

小时候我们有个熟悉的游戏叫小蜜蜂。本文教大家在鸿蒙上学做这个小蜜蜂游戏。

开发实战

①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 崩溃

	

	总结

	   本文主要介绍了小游戏的开发，画布功能的使用，获取源码请通过“阅读原文”下载附件。


	作者：王石 

	审核编辑：汤梓红