入口>src>main>js>default>pages.index>index中设置相应的组件大小和颜色属性。css文件由class设置的名称设置，代码如下：.container{flex-direction:column;justify-content:center;align-items:center;width:240px;height:240px;}.steps{字体大小：10px；文本对齐：居中；宽度：100px；高度：18px；字母间距：0px；margin-top：5px；}.canvas{宽度：160px；身高：160px;背景色：#BBADA0;}.bit{width:75px;height:15px;background-color:#AD9D8F;font-size:10px;margin-top:5px;}.stack{width:160px;height:160px;margin-top:5px;}.subcontainer{left:25px;top:47.5px;width:110px;height:65px;justify-content:center;align-content:center;background-color:#E9C2A6;}。gameover{font-size:19px;color:black;}代码更新部分：组件大小的数据在原文章源代码的基础上全部减半再微调，即原创文章不适用，以上代码是我自己调整修改的最后3.要实现色块的翻转，首先要在运动手表上生成一个7*7的棋盘格，棋盘格上的任意一个色块都应该是点击后，上、下、左、右四个色块也会一起变色（边缘的色块只会改变其中几个色块的颜色）原来的实现方法文章是给49个色块各添加一个按钮，分别添加点击事件在布局上，如前所述，色块（按钮）显示在棋盘（画布）上，游戏成功界面显示在色块（按钮）和画布上，所以在栈中的顺序应该是canvas,button,gameover;并且按钮的大小和间距的数据要修改如上“代码更新部分”，代码（修改部分）如下：.bitgrid1{left:2.5px;top:2.5像素；宽度：20像素；高度：20像素；border-color:transparent;background-color:transparent}.bitgrid2{left:25px;top:2.5px;width:20px;height:20px;border-color:transparent;background-color:transparent}.bitgrid3{left:47.5px;top:2.5px;width:20px;height:20px;border-color:transparent;background-color:transparent}.bitgrid4{left:70px;top:2.5px;width:20px;height:20px;border-color:transparent;background-color:transparent}.bitgrid5{left:92.5px;top:2.5px;width:20px;height:20px;border-color:transparent;background-color:transparent}.bitgrid6{left:115px;top:2.5px;width:20px;height:20px;border-color:transparent;background-color:transparent}.bitgrid7{left:137.5px;top:2.5px;width:20px;height:20px;border-color:transparent;background-color:transparent}.bitgrid8{left:2.5px;top:25px;width:20px;height:20px;border-颜色：透明；背景颜色：透明；}.bitgrid9{left:25px;top:25px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid10{left:47.5px;top:25px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid11{left:70px;top:25px;width:20px;height:20px;border-color:透明；背景颜色：透明；}.bitgrid12{left:92.5px;top:25px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid13{left:115px;top:25px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid14{left:137.5px;top:25px;width:20px;height:20px;border-color:transparent;背景颜色：透明；}.bitgrid15{left:2.5px;top:47.5px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid16{left:25px;top:47.5px;宽度：20px;高度：20px;边框颜色：透明;背景颜色：透明;}.bitgrid17{left:47.5px;top:47.5px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid18{left:70px;top:47.5px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid19{left:92.5px;top:47.5px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid20{left:115px;top:47.5px;宽度：20px；高度：20px；边框颜色：透明；背景颜色：透明；}.bitgrid21{left：137.5px；顶部：47.5px；宽度：20px；高度：20px；边框颜色：透明；背景-颜色：透明；}.bitgrid22{left:2.5px;top:70px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid23{l??eft:25px;top:70px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid24{left:47.5px;top:70px;width:20px;height:20px;border-color:transparent;background-color:透明;}.bitgrid25{left:70px;top:70px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid26{left:92.5px;top:70px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid27{left:115px;top:70px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid28{left:137.5px;top:70px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid29{left:2.5px;top:92.5px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid30{left:25px;top:92.5px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid31{left:47.5px;top:92.5px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid32{left:70px;top:92.5px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid33{left:92.5px;top:92.5px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid34{left:115px;top:92.5px;width:20px;height:20px;border-color:transparent;背景颜色：透明;}.bitgrid35{left:137.5px;top:92.5px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid36{left:2.5px;top:115px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid37{left:25px;top:115px;width:20px;height:20px;border-color:transparent;背景颜色：透明;}.bitgrid38{left:47.5px;top:115px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid39{left:70px;top:115px；宽度：20px；高度：20px；边框颜色：透明；背景颜色：透明；}.bitgrid40{left：92.5px；顶部：115px；宽度：20px；高度：20px；边框颜色：透明；背景-color:transparent;}.bitgrid41{left:115px;top:115px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid42{left:137.5px;top:115px;宽度：20像素；高度：20像素；边框颜色：透明；背景颜色：透明；}.bitgrid43{左：2.5像素；顶部：137.5像素；宽度：20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid44{left:25px;top:137.5px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid45{left:47.5px;top:137.5px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid46{left:70px;top:137.5px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid47{left:92.5px;top:137.5px;width:20px;height:20px;border-color:transparent;background-color:透明;}.bitgrid48{left:115px;top:137.5px;width:20px;height:20px;border-color:transparent;background-color:transparent;}.bitgrid49{left:137.5px;top:137.5px;width:20px;height:20px;border-color:transparent;background-color:transparent;}然后在index.js文件中，用一个7*7的数组表示色块，其中0代表白色，1代表黑色，所以我们可以定义一个字典COLORS，用0和1代表key，颜色代表value，定义全局常量边长SIDELEN为20，间距MARGIN为2.5，定义一个全局变量的二维数组grids，其中的值都是0vargrids=[[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=20;constMARGIN=2.5;constCOLORS={"0":"#FFFFFF","1":"#000000"}设置色块的点击事件。正方形的位置（比如当正方形在第三行第四个时，坐标为(2,3)），坐标传递给函数changeOneGrids判断顶部、底部是否有正方形,left,right的正方形，并调用函数change来变换其数组的值——如果0变成1，如果1变成0change(x,y){if(this.isShow==false){if(网格[x][y]==0){网格[x][y]=1;}else{网格[x][y]=0;}}},changeOneGrids(x,y){if(x>-1&&y>-1&&x<7&&y<7){这个。变化(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);}if(x>-1&&y-1>-1&&x<7&&y-1<7){this.change(x,y-1);}}最后调用函数drawgrids给“color”drawGrids(){context=this.$refs.canvas.getContext('2d');for(letrow=0;row<7;row++){for(letccolumn=0;column<7;column++){letgridStr=grids[row][column].toString();context.fillStyle=COLORS[gridStr];letleftTopX=column*(MARGIN+SIDELEN)+MARGIN;letleftTopY=row*(MARGIN+SIDELEN)+MARGIN;context.fillRect(leftTopX,leftTopY,SIDELEN,SIDELEN);}}},4.实现标题的随机生成随机生成一个7x7的棋盘，色块打乱，这里是原全20黑色方块随机生成在白板上重点：将二维数组的下标放入一个列表中，Math.random()函数是[0,1中的随机小数]，Math.floor(x)是小于等于x的最大整数，每次第二次随机生成一个数后，读取刚才list对应的下标，即获取一个7x7范围内的随机坐标，调用函数changeOneGrids(x,y)initGrids(){letarray=[];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);letrow=array[randomIndex][0];letcolumn=array[randomIndex][1];这。changeOneGrids(row,column);}}5.游戏结束。当7x7数组的值全为1时，游戏成功。此时isShow的值为true，色块的点击事件就不起作用了（在change函数中加入一对isShow真假判断）gameover(){for(letrow=0;row<7;row++){for(letcolumn=0;column<7;column++){if(grids[row][column]==1){returnfalse;}}}returntrue;}然后在changeOneGrids函数中调用gameover函数；同时，每次点击都会调用changeOneGrids函数，所以每次调用changeOneGrids函数时可以直接累加步数的增加if(this.isShow==false){this.currentSteps+=1;;}if(this.gameover()){this.isShow=true;}6.重启最后写重启按钮对应的函数restartGame()，是一个二维数组，isShow和当前步数都设置到初始化接口restartGame(){this.initGrids();this.drawGrids();这。isShow=false;this.currentSteps=0;}修改说明1.canvas组件的getContext不支持在onInit和onReady中调用，所以我在drawGrids中调用，然后在onShow中调用drawGrids2。随机产生中断显示色块时，会调用changeOneGrids函数，步数增加20data:{currentSteps:-20,}3。同1，在onShow中也调用了色块的随机生成函数initGrids。结论以上是我初步的学习笔记，我修改的源码会上传到附件中。更详细的标注步骤请参考原文。我会在本文的基础上做进一步的修改，同时也会做一个小分享相关的知识注释，敬请期待(●ˇ?ˇ●)文章相关附件可以点击下方链接下载https://和谐。51cto.com/resource/1222更多信息请访问：与华为共同建立的鸿蒙科技社区https://harmonyos.51cto.com