小蜜蜂游戏 鸿蒙上开发

大家好，今天小编来为大家解答小蜜蜂游戏这个问题，鸿蒙上开发很多人还不知道，现在让我们一起来看看吧！

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

前面我们介绍了简单的Hap应用的开发以及基础控件的介绍，这里我们就不赘述Hap项目的建立过程，以下就是基础的Hap的page文件：index.ets。

build(){\nRow(){\nColumn(){\nCanvas(this.context)\n.width('100%')\n.height('100%')\n.onClick((ev:ClickEvent)=>{\nconsole.info("click!!")\nthis.doClick()\n})\n.onReady(()=>{\nthis.context.imageSmoothingEnabled=false\nthis.drawall()\n})\n}\n.width('100%')\n}\n.height('100%')\n.backgroundColor("#000000")\n}

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

declareclassCustomComponent{\n/**\n*Customizethepop-upcontentconstructor.\n*@since7\n*/\nbuild():void;\n\n/**\n*aboutToAppearMethod\n*@since7\n*/\naboutToAppear?():void;\n\n/**\n*aboutToDisappearMethod\n*@since7\n*/\naboutToDisappear?():void;\n\n/**\n*onPageShowMethod\n*@since7\n*/\nonPageShow?():void;\n\n/**\n*onPageHideMethod\n*@since7\n*/\nonPageHide?():void;\n\n/**\n*onBackPressMethod\n*@since7\n*/\nonBackPress?():void;\n}

②Canvas介绍

canvas是画布组件用于自定义绘制图形，具体的API页面如下：

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

页面显示前会调用aboutToAppear()函数，此函数为页面生命周期函数。

canvas组件初始化完毕后会调用onReady()函数，函数内部实现小游戏的初始页面的绘制。

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

绘制飞机：

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

绘制害虫：

drawEn(){\nfor(letline=0;line<this.enemylist.length;line++){\nfor(letrow=0;row<this.enemylist[line].length;row++){\nif(this.enemylist[line][row]==1){\nif(line==0){\nthis.context.drawImage(this.en1Img,this.en1slotX+row*this.birdW,this.en1slotY-line*this.birdH,this.birdH,this.birdW);\n}elseif(line==1){\nthis.context.drawImage(this.en2Img,this.en1slotX+row*this.birdW,this.en1slotY-line*this.birdH,this.birdH,this.birdW);\n}elseif(line==2){\nthis.context.drawImage(this.en3Img,this.en1slotX+row*this.birdW,this.en1slotY-line*this.birdH,this.birdH,this.birdW);\n}\n}\n}\n}\n}

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

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

doClick(){\nif(this.en1slotX<=50){\nthis.en1slotX+=this.birdW\n}else{\nthis.en1slotX-=this.birdW\n}\nconsole.log("doclick----")\nthis.moveFj();\n}④完整逻辑

@Entry\n@Component\nstructIndex{\n@Statemessage:string='HelloWorld'\nprivatesettings:RenderingContextSettings=newRenderingContextSettings(true);\nprivatecontext:CanvasRenderingContext2D=newCanvasRenderingContext2D(this.settings);\nprivateblockType:number=0\nprivateblockSize:number=30\nprivateen1Img:ImageBitmap=newImageBitmap("common/images/mf1.png")\nprivateen2Img:ImageBitmap=newImageBitmap("common/images/mf2.png")\nprivateen3Img:ImageBitmap=newImageBitmap("common/images/mf3.png")\nprivatefjImg:ImageBitmap=newImageBitmap("common/images/fj.png")\n\nprivatestartX=30;\nprivatestartY=100;\nprivateenStartY=140;\nprivatefjStartX=50;\nprivatefjStartY=610;\nprivatefjslotX=50;\nprivatefjslotY=this.fjStartY;\nprivateen1slotX=50;\nprivateen1slotY=this.enStartY;\nprivateen2slotX=50;\nprivateen2slotY=this.enStartY;\nprivatebulletX=65;\nprivatebulletY=550;\nprivatebirdH=40;\nprivatebirdW=40;\nprivatescore=0;\nprivatefjDirection=1;\n\nprivateenemylist=[\n[1,1,1,1,1],\n[1,1,1,1,1],\n[1,1,1,1,1],\n]\n\nmoveFj(){\nthis.fjStartX=this.fjStartX+this.fjDirection*this.birdW\nif(this.fjStartX>=210){\nthis.fjDirection=-1\n}elseif(this.fjStartX<=50){\nthis.fjDirection=1\n}\n}\n\ndrawFj(){\nthis.context.drawImage(this.fjImg,this.fjStartX,this.fjslotY,this.birdH,this.birdW)\n}\n\ndrawEn(){\nfor(letline=0;line<this.enemylist.length;line++){\nfor(letrow=0;row<this.enemylist[line].length;row++){\nif(this.enemylist[line][row]==1){\nif(line==0){\nthis.context.drawImage(this.en1Img,this.en1slotX+row*this.birdW,this.en1slotY-line*this.birdH,this.birdH,this.birdW);\n}elseif(line==1){\nthis.context.drawImage(this.en2Img,this.en1slotX+row*this.birdW,this.en1slotY-line*this.birdH,this.birdH,this.birdW);\n}elseif(line==2){\nthis.context.drawImage(this.en3Img,this.en1slotX+row*this.birdW,this.en1slotY-line*this.birdH,this.birdH,this.birdW);\n}\n}\n}\n}\n}\n\ndrawBullet(){\nletisfind=false\nthis.context.fillStyle='rgb(250,250,250)'\nthis.context.font='80pxsans-serif'\nthis.bulletX=this.fjStartX+20\nthis.context.fillText(":",this.fjStartX+20,this.bulletY)\nfor(letline=0;line<this.enemylist.length;line++){\nif(Math.abs(this.bulletY-(this.en1slotY-line*this.birdH))<=this.birdH){\nconsole.log("findline:"+line)\nfor(letrow=0;row<this.enemylist[line].length;row++){\nletmatchsize=Math.abs(this.bulletX-(this.en1slotX+row*this.birdW))\n//console.log("findszie:"+matchsize.toString()+"row:"+row.toString()+"line:"+line.toString()+"bulletX:"+this.bulletX.toString()+"bulletY:"+\n//this.bulletY.toString()+"en1slotX"+this.en1slotX.toString()+"en1slotY"+this.en1slotY.toString())\nif(matchsize<=this.birdW){\nif(this.enemylist[line][row]==1){\nconsole.log("row:"+row.toString()+"line:"+line.toString()+"bulletX:"+this.bulletX.toString()+"bulletY:"+\nthis.bulletY.toString()+"en1slotX"+this.en1slotX.toString()+"en1slotY"+this.en1slotY.toString());\nthis.enemylist[line][row]=0\nisfind=true\nswitch(line){\ncase0:\nthis.score+=1;\nbreak;\ncase1:\nthis.score+=2;\nbreak;\ncase2:\nthis.score+=3;\nbreak;\ndefault:\nbreak;\n}\n//console.log("score:"+this.score.toString())\nbreak\n}\n}\n}\nif(isfind){\nbreak;\n}\n}\n}\nif(this.bulletY<=100||isfind==true){\nthis.bulletY=550\n}else{\nthis.bulletY-=50;\n}\n}\n\ndrawScore(){\nthis.context.fillStyle='rgb(250,250,250)'\nthis.context.font='80pxsans-serif'\nthis.context.fillText("Score:"+this.score.toString(),20,750)\n//this.context.fillText(":",65,550)\n}\n\ndrawall(){\nthis.context.clearRect(0,0,this.context.width,this.context.height)\nthis.drawFj();\nthis.drawEn();\nthis.drawBullet();\nthis.drawScore();\n}\n\nasyncsleep(ms:number){\nvarthat=this;\nreturnnewPromise((r)=>{\nsetInterval(()=>{\nif(that.en1slotX<=50){\nthat.en1slotX+=that.birdW\n}else{\nthat.en1slotX-=that.birdW\n}\n\nconsole.log(that.en1slotX.toString())\nthat.drawall()\n\n},ms)\n})\n}\n\ndoClick(){\nif(this.en1slotX<=50){\nthis.en1slotX+=this.birdW\n}else{\nthis.en1slotX-=this.birdW\n}\nconsole.log("doclick----")\nthis.moveFj();\n}\n\naboutToAppear(){\nthis.sleep(1000)\n}\n\nbuild(){\nRow(){\nColumn(){\nCanvas(this.context)\n.width('100%')\n.height('100%')\n.onClick((ev:ClickEvent)=>{\nconsole.info("click!!")\nthis.doClick()\n})\n.onReady(()=>{\nthis.context.imageSmoothingEnabled=false\nthis.drawall()\n})\n}\n.width('100%')\n}\n.height('100%')\n.backgroundColor("#000000")\n}\n}

遗留问题：

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

好了，本文到此结束，如果可以帮助到大家，还望关注本站哦！