HarmonyOS-基于ArkUI（JS）开发的黑白棋类游戏

时间：2023-03-14 21:08:31 科技观察

了解更多开源请访问：开源基础软件社区https://ost.51cto.com前言经过一段时间的HarmonyOS学习，我用我学到的知识做了一个黑白棋游戏来测试我的学习成果。本文详细介绍了黑白逆转棋的写作思路，并附有详尽的解说。有兴趣的朋友可以自己制作自己的黑白颠倒棋游戏。效果显示功能实现了转黑白棋的功能。屏幕上有7*7个方块，每个方块随机刷新成黑色或白色。点击一个方块，它本身和上下左右四个方块会变成相反的。颜色，板上方的当前步数将相应增加。当所有方块都变成白色时，游戏就赢了。实现第1步，hml部分>

2,csspart.container{flex-direction:column;证明内容：居中；对齐项目：居中；宽度：450px；高度：450px;}.steps{字体大小：18px;文本对齐：居中；宽度：300px；高度：20px；字母间距：0px；:320px;高度：320px；背景色：#BBADA0;}.bit{width:150px;高度：30px；背景色：#AD9D8F；字体大小：24px；margin-top:10px;}3.js部分在文件开头定义一个全局变量context，在onShow中绑定2d绘图工具到context，创建currentSteps，代表步数，初始值为0.定时器的设置是为了保证context总能被分配。如果没有问题，可以将其删除。varcontext;exportdefault{data:{currentSteps:0,}onShow(){setTimeout(()=>{context=this.$refs.canvas.getContext('2d');this.drawGrids();},200)},}用0表示白色，用1表示黑色，这样我们就可以定义一个字典COLORS，用0和1表示键，用颜色表示值，定义全局常量边长SIDELEN为40，而spacingMARGIN为5，定义一个全局变量的二维数组grids，其值全为0。vargrids=[[0,0,0,0,0,0,0],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0]];constSIDELEN=40;constMARGIN=5;constCOLORS={"0":"#FFFFFF","1":"#000000"}首先创建一个drawGrids()函数使用toString()函数将网格的所有值都转成字符串，fillStyle表示绘图的背景色，直接使用字典即可??，fillRect表示输入绘制矩形的大小。onShow(){this.drawGrids();},drawGrids(){for(letrow=0;row<7;row++){for(letcolumn=0;column<7;column++){letgridStr=grids[row][column].toString();context.fillStyle=COLORS[gridStr];让leftTopX=column*(MARGIN+SIDELEN)+MARGIN;让leftTopY=row*(MARGIN+SIDELEN)+MARGIN;context.fillRect(leftTopX,leftTopY,SIDELEN,SIDELEN);}}}初步框架完成，接下来实现色块的随机生成。为了在点击任意一个色块时得到对应二维数组的下标，我们为每个小方块添加一个按钮和一个点击事件，并为这些按钮设置一个类名和点击按钮调用的方法。然后该函数需要添加一个stack栈（stack是一个栈容器，可以让输入按钮显示在画布上方），以便让按钮出现在棋盘格上方。类名设置为stack，这样画布就进栈，按钮就进栈。当前步骤：{{currentSteps}}

设置每个小方块坐标，让每个小方块方形浮动在画布上。设第x个小方块的坐标为(y,z)y代表二维数组的第一个数，z代表二维数组的第二个数。比如数组中第17个方块用[2,1]表示我们需要按照这个规则写出49个这样的样式。创建一个函数change，用当前传入的横纵坐标改变框的颜色change(x,y){if(this.isShow==false){if(grids[x][y]==0){网格[x][y]=1;}else{网格[x][y]=0;}}}创建一个函数changeOneGrids，改变当前点击的网格的上下左右颜色??（调用change函数）。当isShow为flase时，点击事件可以增加步数。游戏结束时isShow为true，点击不再增加步数效果。changeOneGrids(x,y){如果(x>-1&&y>-1&&x<7&&y<7){this.change(x,y);}if(x+1>-1&&y>-1&&x+1<7&&y<7){this.change(x+1,y);}if(x-1>-1&&y>-1&&x-1<7&&y<7){this.change(x-1,y);}if(x>-1&&y+1>-1&&x<7&&y+1<7){this.change(x,y+1);}如果(x>-1&&y-1>-1&&x<7&&y-1<7){this.change(x,y-1);}this.drawGrids();如果（this.isShow==false）{this.currentSteps+=1;;}}为每个按钮写一个对应的函数，并传入对应的坐标。getgrid(index){console.log('getgrid:'+index)this.changeOneGrids(parseInt(index/7),index%7);最后，我们需要实现随机生成棋盘的功能，让一个array数组，把当前的grids二维数组的下标放到数组中，然后使用Math.random()函数和Math.random()函数。floor(x)函数产生一个随机数，然后调用changeOneGrids()函数改变自身和上下左右方块的颜色。initGrids(){让数组=[];for(letrow=0;row<7;row++){for(letcolumn=0;column<7;column++){if(grids[row][column]==0){array.push([row,column])}}}for(leti=0;i<20;i++){letrandomIndex=Math.floor(Math.random()*array.length);让row=array[randomIndex][0];让column=array[randomIndex][1];this.changeOneGrids（行，列）；}}实现游戏成功页面首先我们要在stack组件中添加一个游戏成功容器div类，将其命名为subcontainer，使用isShow控制容器是否入栈，添加text组件text，类名gameover，赋值“游戏成功”。游戏成功