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

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

开发实战

①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") }

build 是基础页面的构造函数，用于界面的元素构造，其他的页面的生命周期函数如下：

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

页面显示前会调用 aboutToAppear() 函数，此函数为页面生命周期函数。 canvas 组件初始化完毕后会调用 onReady() 函数，函数内部实现小游戏的初始页面的绘制。

初始化页面数据：

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< this.enemylist.length; line++) { for (let row=0; row < this.enemylist[line].length; row++) { if (this.enemylist[line][row] == 1) { if (line == 0) { this.context.drawImage( this.en1Img, this.en1slotX+row*this.birdW,this.en1slotY-line*this.birdH,this.birdH,this.birdW); } else if (line == 1) { this.context.drawImage( this.en2Img, this.en1slotX+row*this.birdW,this.en1slotY-line*this.birdH,this.birdH,this.birdW); } else if (line == 2) { this.context.drawImage( this.en3Img, this.en1slotX+row*this.birdW,this.en1slotY-line*this.birdH,this.birdH,this.birdW); } } } } }

不同行的害虫长相不同，分值不同。

③游戏逻辑

简单的小游戏主体游戏逻辑为：点击鼠标移动飞机，飞机发射子弹，命中害虫，计算分数：

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 < this.enemylist.length; line++) { for (let row=0; row < this.enemylist[line].length; row++) { if (this.enemylist[line][row] == 1) { if (line == 0) { this.context.drawImage( this.en1Img, this.en1slotX+row*this.birdW,this.en1slotY-line*this.birdH,this.birdH,this.birdW); } else if (line == 1) { this.context.drawImage( this.en2Img, this.en1slotX+row*this.birdW,this.en1slotY-line*this.birdH,this.birdH,this.birdW); } else if (line == 2) { this.context.drawImage( this.en3Img, this.en1slotX+row*this.birdW,this.en1slotY-line*this.birdH,this.birdH,this.birdW); } } } } } drawBullet() { let isfind = false this.context.fillStyle = 'rgb(250,250,250)' this.context.font = '80px sans-serif' this.bulletX = this.fjStartX + 20 this.context.fillText(":", this.fjStartX+20, this.bulletY) for (let line=0; line < this.enemylist.length; line++) { if (Math.abs(this.bulletY - (this.en1slotY-line*this.birdH)) <= this.birdH) { console.log("find line: "+line) for (let row = 0; row < this.enemylist[line].length; row++) { let matchsize = Math.abs(this.bulletX - (this.en1slotX+row*this.birdW)) // console.log("find szie: "+matchsize.toString()+" row:"+row.toString()+" line:"+line.toString()+" bulletX:"+this.bulletX.toString()+" bulletY:"+ // this.bulletY.toString()+" en1slotX"+this.en1slotX.toString()+" en1slotY"+this.en1slotY.toString()) if (matchsize <= this.birdW) { if (this.enemylist[line][row] == 1) { console.log("row:"+row.toString()+" line:"+line.toString()+" bulletX:"+this.bulletX.toString()+" bulletY:"+ this.bulletY.toString()+" en1slotX"+this.en1slotX.toString()+" en1slotY"+this.en1slotY.toString()); this.enemylist[line][row] = 0 isfind = true switch (line) { case 0: this.score += 1; break; case 1: this.score += 2; break; case 2: this.score += 3; break; default: break; } //console.log("score: "+this.score.toString()) break } } } if (isfind) { break; } } } if (this.bulletY <= 100 || isfind == true) { this.bulletY = 550 } else { this.bulletY -= 50; } } drawScore() { this.context.fillStyle = 'rgb(250,250,250)' this.context.font = '80px sans-serif' this.context.fillText("Score:"+this.score.toString(), 20, 750) // this.context.fillText(":", 65, 550) } drawall() { this.context.clearRect(0,0,this.context.width,this.context.height) this.drawFj(); this.drawEn(); this.drawBullet(); this.drawScore(); } async sleep(ms: number) { var that = this; return new Promise((r) =>{ 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 崩溃

总结

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

作者：王石

审核编辑：汤梓红