前言
之前發(fā)過兩篇黑白翻棋游戲的手表版本，這次給大家?guī)淼男》窒硎呛诎追宓?a target="_blank">手機(jī)版本，也是JS寫的，功能代碼基本一致（采用第二篇的算法），只是布局會(huì)作相應(yīng)修改。

概述

該游戲會(huì)隨機(jī)生成一個(gè)題目，最終當(dāng)棋盤上的方格都為白色的時(shí)候游戲成功，效果如下

正文

1.創(chuàng)建一個(gè)空白的工程
DevEco Studio下載安裝成功后，打開DevEco Studio，點(diǎn)擊左上角的File，點(diǎn)擊New，再選擇New Project，選擇Empty Ability,然后點(diǎn)擊Next,給項(xiàng)目命名PhoneGame_BW，選擇設(shè)備類型Phone，選擇語言類型JS最后點(diǎn)擊Finish。

2.界面布局

2.1 代碼刪除的部分

先在entry>src>main>js>default>pages.index>index.hml文件里把以下代碼刪掉

class="title">    {{ $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文件里把container部分以下的代碼刪掉

2.2 棋盤設(shè)置
這里以畫布組件canvas來描繪棋盤

index.hml

class="canvas" ref="canvas"> 

index.css

.canvas{  width:320px;  height:320px;  background-color: #BBADA0;}

打開模擬器

2.3 棋子設(shè)置
棋子是通過canvas組件的方法來繪制填充多個(gè)正方形，這里我設(shè)置的棋盤是7x7的，每個(gè)方格的邊長(zhǎng)SIDELEN為40，方格間的間距MARGIN為5，以一個(gè)數(shù)組來表示每個(gè)方格，并初始化賦值為0，用0表示白色，1代表黑色，這樣我們就能定義一個(gè)用0和1表示鍵，顏色表示值的字典COLORS

index.js,在export default上方添加以下代碼

var grids=[[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]];var context;const SIDELEN=40;const MARGIN=5;
const COLORS = {  "0": "#FFFFFF",  "1": "#000000"}

在export default下方添加以下代碼，遍歷數(shù)組grids的每一個(gè)元素，將其轉(zhuǎn)換成String型，對(duì)應(yīng)的是COLORS中的顏色，然后調(diào)用畫布組件中的方法fillRect填充方格的顏色，參數(shù)為方格的左上角的坐標(biāo)及方格的長(zhǎng)寬

  drawGrids(){    context=this.$refs.canvas.getContext('2d');    for (let row = 0 ;row < 7 ;row++){      for (let column = 0; column < 7;column++){        let gridStr = grids[row][column].toString();
        context.fillStyle = COLORS[gridStr];        let leftTopX = column * (MARGIN + SIDELEN) + MARGIN;        let leftTopY = row * (MARGIN + SIDELEN) + MARGIN;        context.fillRect(leftTopX, leftTopY, SIDELEN, SIDELEN);      }    }  },

最后在drawGrids函數(shù)上方添加以下代碼調(diào)用drawGrids

onShow(){    this.drawGrids();  },

打開模擬器，就能有如下效果

3.游戲規(guī)則的設(shè)置

3.1.獲取點(diǎn)擊位置的坐標(biāo)并對(duì)應(yīng)方格

給畫布組件添加點(diǎn)擊事件onclick和觸摸事件touchstart

index.hml

    class="canvas" ref="canvas" onclick="click" @touchstart='touchstartfunc'> 

事件touchstart，在手指剛觸摸屏幕時(shí)就觸發(fā)該事件，其參數(shù)為TouchEvent，其對(duì)象屬性touches包含屏幕觸摸點(diǎn)的信息數(shù)組，而我們需要的坐標(biāo)信息就包含在這個(gè)數(shù)組里；這里我們需要獲取到的坐標(biāo)是相對(duì)于組件左上角的，即localX和localY，這樣也方便我們?cè)O(shè)置點(diǎn)擊范圍來觸發(fā)色塊的翻轉(zhuǎn)（獲取坐標(biāo)這塊詳細(xì)可看我上一篇文章）其次，參數(shù)a和b分別代表傳遞的方格的行列值。

index.js

var localx;var localy;var a;var b;

touchstartfunc(msg) {    localx=msg.touches[0].localX;    localy=msg.touches[0].localY;  },getgrid() {  if (MARGIN < localx && localx < (MARGIN + SIDELEN)) {    b = 0;  }  if (1 * (MARGIN + SIDELEN) + MARGIN < localx && localx < 2 * (MARGIN + SIDELEN)) {    b = 1;  }  if (2 * (MARGIN + SIDELEN) + MARGIN < localx && localx < 3 * (MARGIN + SIDELEN)) {    b = 2;  }  if (3 * (MARGIN + SIDELEN) + MARGIN < localx && localx < 4 * (MARGIN + SIDELEN)) {    b = 3;  }  if (4 * (MARGIN + SIDELEN) + MARGIN < localx && localx < 5 * (MARGIN + SIDELEN)) {    b = 4;  }  if (5 * (MARGIN + SIDELEN) + MARGIN < localx && localx < 6 * (MARGIN + SIDELEN)) {    b = 5;  }  if (6 * (MARGIN + SIDELEN) + MARGIN < localx && localx < 7 * (MARGIN + SIDELEN)) {    b = 6;  }  if (MARGIN < localy && localy < (MARGIN + SIDELEN)) {    a = 0;  }  if (1 * (MARGIN + SIDELEN) + MARGIN < localy && localy < 2 * (MARGIN + SIDELEN)) {    a = 1;  }  if (2 * (MARGIN + SIDELEN) + MARGIN < localy && localy < 3 * (MARGIN + SIDELEN)) {    a = 2;  }  if (3 * (MARGIN + SIDELEN) + MARGIN < localy && localy < 4 * (MARGIN + SIDELEN)) {    a = 3;  }  if (4 * (MARGIN + SIDELEN) + MARGIN < localy && localy < 5 * (MARGIN + SIDELEN)) {    a = 4;  }  if (5 * (MARGIN + SIDELEN) + MARGIN < localy && localy < 6 * (MARGIN + SIDELEN)) {    a = 5;  }  if (6 * (MARGIN + SIDELEN) + MARGIN < localy && localy < 7 * (MARGIN + SIDELEN)) {    a = 6;  }}

3.2 點(diǎn)擊的方格及其上下左右都變色

change控制變色，若值為0則變?yōu)?，若為1則變?yōu)?。方格的橫縱坐標(biāo)都是0~6，changeOneGrids第一個(gè)判斷是被點(diǎn)擊的方格的變色，第二個(gè)判斷是右邊的格子是否在棋盤上，假如被點(diǎn)擊的格子是右邊界，則判斷為假，右格子不會(huì)變色。以此類推對(duì)左格，上格，下格作判斷，最后調(diào)用drawGrids繪制方格。

index.js

change(x,y){       if(grids[x][y] == 0){       grids[x][y] = 1;     }else{       grids[x][y] = 0;     }   },changeOneGrids(x,y){   if(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);   }   if(x>-1 && y-1>-1 && x<7 && y-1<7){     this.change(x,y-1);   }   this.drawGrids();}

最后在點(diǎn)擊事件上調(diào)用getgrid和changeOneGrids

click(){   this.getgrid();   this.changeOneGrids(a,b); }

到此，效果如下

3.3 生成隨機(jī)打亂的棋盤（游戲題目）

先將數(shù)組以坐標(biāo)形式存儲(chǔ)在array，共49組坐標(biāo)，然后隨機(jī)生成0~48的整數(shù)，取該組坐標(biāo)中第一個(gè)元素作為橫坐標(biāo)，第二個(gè)元素作為縱坐標(biāo)，這里設(shè)置的是隨機(jī)生成點(diǎn)擊10下后的題目（后期為在此基礎(chǔ)上以不同次數(shù)來設(shè)置不同難度）

initGrids(){    let array = [];    for (let row = 0; row < 7; row++) {      for (let column = 0; column < 7; column++) {        if (grids[row][column] == 0) {          array.push([row, column])                       }      }    }    for (let i = 0; i < 10; i++){      let randomIndex = Math.floor(Math.random() * array.length);        let row = array[randomIndex][0];                     let column = array[randomIndex][1];                    this.changeOneGrids(row,column);    }  }

然后在onshow上調(diào)用initGrids，注意initGrids要放在drawGrids之前

  onShow(){    this.initGrids();    this.drawGrids();  },

4.設(shè)置步數(shù)顯示及游戲的重新開始

4.1 步數(shù)顯示
步數(shù)這個(gè)文本組件顯示在棋盤上方，故在index.hml文件里，將以下代碼放在canvas上方，其中由于步數(shù)是個(gè)變量，故以currentSteps的值的變動(dòng)來動(dòng)態(tài)更新步數(shù)

index.hml

class="steps">    當(dāng)前步數(shù)：{{currentSteps}}  

index.css

.steps {  font-size: 21px;  text-align:center;  width:200px;  height:39px;  letter-spacing:0px;  margin-top:10px;  background-color: #BBAD20;}

由于initGrids會(huì)隨機(jī)點(diǎn)擊10下，為了使步數(shù)清零，在data里給它賦初值-10

index.js

data: {    currentSteps:-10,  },

在changeOneGrids上添加以下代碼，使每次點(diǎn)擊步數(shù)加一

this.currentSteps+=1;

4.2 游戲的重新開始
重新開始的按鈕在棋盤的下方，故index.hml文件中在canvas下方添加代碼

"button" value="重新開始" class="bit" onclick="restartGame"/>

index.css

.bit {  top: 20px;  width: 220px;  height: 40px;  background-color: #AD9D8F;  font-size: 25px;  margin-top: 10px;}

游戲重新開始時(shí)，會(huì)再次隨機(jī)生成游戲題目，并且步數(shù)重置為0

index.js

  restartGame(){    this.initGrids();    this.drawGrids();    this.currentSteps = 0;  }

5.游戲成功的設(shè)置

游戲成功的彈窗是顯示在棋盤（canvas）上方的，該實(shí)現(xiàn)可通過添加一個(gè)堆疊容器stack，將游戲成功的文本組件放在畫布組件之后；其次，“游戲成功”的顯示在初始時(shí)不會(huì)顯示，所以要設(shè)置屬性show,對(duì)應(yīng)設(shè)一個(gè)布爾型變量isShow，并令isShow的初始值為假，游戲成功時(shí)其值為真，當(dāng)為真時(shí)就可以顯示了

index.hml

  class="stack">    class="canvas" ref="canvas" onclick="click" @touchstart='touchstartfunc'>     
class="subcontainer" show="{{isShow}}">      class="gameover">        游戲成功          
  

index.css

.stack{  width: 320px;  height: 320px;  margin-top: 10px;}
.subcontainer{  left: 50px;  top: 95px;  width: 220px;  height: 130px;  justify-content: center;  align-content: center;  background-color: #E9C2A6;}
.gameover{  font-size: 38px;  color:black;  justify-content: center;  margin-top: 30px;}

index.js

data: {    currentSteps:-10,    isShow:false  },

  gameover(){    for (let row = 0 ;row < 7 ;row++){      for (let column = 0; column < 7;column++){        if (grids[row][column]==1){          return false;        }      }    }    return true;  },

在changeOneGrids中給“步數(shù)增加”添加判斷條件

if(this.isShow==false){      this.currentSteps+=1;    }    if(this.gameover()){      this.isShow=true;    }

在restartGame中添加代碼

 this.isShow = false;

恭喜你！！完成以上步驟后你就可以開始玩啦！！O(∩_∩)O

結(jié)語

以上就是我這次的小分享啦??！后續(xù)會(huì)有該游戲的進(jìn)階版，我會(huì)不斷完善的(? ?_?)?
責(zé)任編輯：haq