手游-黑白棋

更多内容请访问：鸿蒙科技社区https://harmonyos.51cto.com，与华为官方共同建立，感兴趣的uu可以点击👉穿梭1和穿梭2。这次给大家带来的小分享是黑白棋手机版，也是用JS写的。功能代码基本相同（使用第二篇的算法），只是布局会做相应的修改。概述游戏会随机生成一个题目，最后当棋盘上的方块全部为白色时，游戏成功，效果如下👇正文1.创建一个空白项目DevEcoStudio下载安装成功后，打开DevEcoStudio，点击左上角的File，点击New，然后选择NewProject，选择EmptyAbility，然后点击Next，将项目命名为PhoneGame_BW，选择设备类型Phone，选择语言类型JS，点击Finish。二、界面布局1、代码删除部分先删除entry>src>main>js>default>pages.index>index.hml文件{{$t('strings.hello')}}{{title}}在entry>src>main>js>default>pages.index>index.js文件中，删除如下代码title:""onInit(){this.title=this.$t('strings.world');}entry>src>main>js>default>pages.index>index.css文件中，删掉containerpart2下面的代码，这里设置棋盘作为画布组件画布来描述画板index.css.canvas{width:320px;height:320px;background-color:#BBADA0;}打开模拟器，界面如下3.通过canvas组件设置棋子绘制填充多个方格。这里我将棋盘设置为7x7。每个正方形的边长为SIDELEN40，正方形之间的距离为5。MARGIN是一个数组。代表每一个方块，并初始化赋值为0，用0代表白色，用1代表黑色，这样我们就可以定义一个字典COLORSindex.js，用0和1代表键，颜色代表值，并添加以下代码导出默认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]];varcontext;constSIDELEN=40;constMARGIN=5;constCOLORS={"0":"#FFFFFF","1":"#000000"}在exportdefault下面添加如下代码，遍历数组grids的每个元素，转换成String类型，对应COLORS中的颜色.然后调用canvas组件中的方法fillRect给网格填充颜色，参数为网格左上角坐标和网格长宽drawGrids(){context=this.$refs.canvas.getContext('2d');for(letrow=0;row<7;row++){for(letcolumn=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);}}},和最后在drawGrids函数上面添加如下代码，调用drawGridsonShow(){this.drawGrids();}，打开模拟器，可以有如下效果3.游戏规则设置1.获取点击位置的坐标，添加单击事件onclick和touchgrid对应的canvas组件上的eventtouchstartTouchEvent，它的对象属性touches包含了屏幕触摸点的信息数组，我们需要的坐标信息就包含在这个数组中；这里我们需要获取的坐标是相对于组件左上角的坐标，即localX和localY，也方便我们设置点击范围触发色块的翻转（获取坐标详见参考我之前的文章）其次，参数a和b分别代表传递的网格的行值和列值index.jsvarlocalx;varlocaly;vara;varb;touchstartfunc(msg){localx=msg.touches[0].localX;localy=msg.touches[0].localY;},getgrid(){if(MARGIN-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);}if(x>-1&&y-1>-1&&x<7&&y-1<7){this.change(x,y-1);}this.drawGrids();}最后在点击事件上调用getgrid和changeOneGridsclick(){this.getgrid();this.changeOneGrids(a,b);}，效果如下3.生成随机数hits随机棋盘（游戏题目）先将数组以坐标的形式存储在array中，共49组坐标，然后随机生成0到48的整数，取坐标组中的第一个元素为横坐标，第二个元素为纵坐标Coordinates，这里的设置是点击10次后随机生成标题（后期不同难度会在此基础上设置不同时间）initGrids(){letarray=[];for(让row=0;row<7;row++){for(letcolumn=0;column<7;column++){if(grids[row][column]==0){array.push([row,column])}}}for(leti=0;i<10;i++){letrandomIndex=Math.floor(Math.random()*array.length);letrow=array[randomIndex][0];letcolumn=array[randomIndex][1];this.changeOneGrids(row,column);}}然后在onshow上调用initGrids，注意initGrids要放在drawGridsonShow(){this.initGrids();this.drawGrids();},4.设置步数显示并重启游戏1.显示步数步数的文本组件显示在棋盘上方，所以在index.hml文件中，把下面的代码放在画布上面，这里的步数是一个变量，所以用currentSteps的值来动态更新步数index.hml的当前步数：{{currentSteps}}index.css.steps{font-size:21px;text-align:center;width:200px;height:39px;letter-spacing:0px;margin-top:10px;background-color:#BBAD20;}由于initGrids点击10次会随机，为了清除步数，给它赋初值-10index.jsdata:{currentSteps:-10,}在data中，并将以下代码添加到changeOneGrids每次点击增加一个步数this.currentSteps+=1;2.游戏的重启按钮在棋盘底部，所以在index.hml文件的画布下添加代码index.css.bit{top:20px;width:220px;height:40px;background-color:#AD9D8F;font-size:25px;margin-top:10px;}游戏重启时会再次随机生成的游戏标题，步数重置为0index.jsrestartGame(){this.initGrids();this.drawGrids();this.currentSteps=0;}5.游戏成功的设置游戏成功的弹窗显示在棋盘（画布）上方。该实现可以在游戏中添加一个stack容器stack，成功的text组件放在canvas组件之后；其次，一开始不会显示“游戏成功”的显示，所以要设置属性show，对应设置一个布尔变量isShow，isShow的初值为false，游戏成功时值为true，可以显示index.hml游戏结束