日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
手機(jī)游戲—黑白翻棋

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

都昌ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來(lái)市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.

前言

之前發(fā)過(guò)兩篇黑白翻棋游戲的手表版本，感興趣的uu們可以點(diǎn)擊 穿梭機(jī)1和穿梭機(jī)2。這次給大家?guī)?lái)的小分享是黑白翻棋的手機(jī)版本，也是JS寫的，功能代碼基本一致(采用第二篇的算法)，只是布局會(huì)作相應(yīng)修改。

概述

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

正文

一.創(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，選擇語(yǔ)言類型JS最后點(diǎn)擊Finish。

二.界面布局

1.代碼刪除的部分

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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.         {{ $t('strings.hello') }} {{ title }}
    3. 
  
  
  
  
  3.     
    4.

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

 
 
 
 
    
  
  
  
  
  1. title:" "
    2. 
  
  
  
  
  2.    onInit() {
    3. 
  
  
  
  
  3.         this.title = this.$t('strings.world');
    4. 
  
  
  
  
  4.     }
    5.

在entry>src>main>js>default>pages.index>index.css 文件里把container部分以下的代碼刪掉

2.棋盤設(shè)置

這里以畫布組件canvas來(lái)描繪棋盤

 
 
 
 
    
  
  
  
  
  1.  
    2.

index.css

 
 
 
 
    
  
  
  
  
  1. .canvas{
    2. 
  
  
  
  
  2.     width:320px;
    3. 
  
  
  
  
  3.     height:320px;
    4. 
  
  
  
  
  4.     background-color: #BBADA0;
    5. 
  
  
  
  
  5. }
    6.

打開模擬器，界面如下

3.棋子設(shè)置

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

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

 
 
 
 
    
  
  
  
  
  1. var grids=[[0, 0, 0, 0, 0, 0, 0],
    2. 
  
  
  
  
  2.            [0, 0, 0, 0, 0, 0, 0],
    3. 
  
  
  
  
  3.            [0, 0, 0, 0, 0, 0, 0],
    4. 
  
  
  
  
  4.            [0, 0, 0, 0, 0, 0, 0],
    5. 
  
  
  
  
  5.            [0, 0, 0, 0, 0, 0, 0],
    6. 
  
  
  
  
  6.            [0, 0, 0, 0, 0, 0, 0],
    7. 
  
  
  
  
  7.            [0, 0, 0, 0, 0, 0, 0],
    8. 
  
  
  
  
  8.            [0, 0, 0, 0, 0, 0, 0]];
    9. 
  
  
  
  
  9. var context;
    10. 
  
  
  
  
  10. const SIDELEN=40;
    11. 
  
  
  
  
  11. const MARGIN=5;
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. const COLORS = {
    14. 
  
  
  
  
  14.     "0": "#FFFFFF",
    15. 
  
  
  
  
  15.     "1": "#000000"
    16. 
  
  
  
  
  16. }
    17.

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

 
 
 
 
    
  
  
  
  
  1. drawGrids(){
    2. 
  
  
  
  
  2.       context=this.$refs.canvas.getContext('2d');
    3. 
  
  
  
  
  3.       for (let row = 0 ;row < 7 ;row++){
    4. 
  
  
  
  
  4.           for (let column = 0; column < 7;column++){
    5. 
  
  
  
  
  5.               let gridStr = grids[row][column].toString();
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.               context.fillStyle = COLORS[gridStr];
    8. 
  
  
  
  
  8.               let leftTopX = column * (MARGIN + SIDELEN) + MARGIN;
    9. 
  
  
  
  
  9.               let leftTopY = row * (MARGIN + SIDELEN) + MARGIN;
    10. 
  
  
  
  
  10.               context.fillRect(leftTopX, leftTopY, SIDELEN, SIDELEN);
    11. 
  
  
  
  
  11.           }
    12. 
  
  
  
  
  12.       }
    13. 
  
  
  
  
  13.   },
    14.

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

 
 
 
 
    
  
  
  
  
  1. onShow(){
    2. 
  
  
  
  
  2.        this.drawGrids();
    3. 
  
  
  
  
  3.    },
    4.

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

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

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

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

 
 
 
 
    
  
  
  
  
  1.  
    2.

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

index.js

 
 
 
 
    
  
  
  
  
  1. var localx;
    2. 
  
  
  
  
  2. var localy;
    3. 
  
  
  
  
  3. var a;
    4. 
  
  
  
  
  4. var b;
    5. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. touchstartfunc(msg) {
    2. 
  
  
  
  
  2.         localx=msg.touches[0].localX;
    3. 
  
  
  
  
  3.         localy=msg.touches[0].localY;
    4. 
  
  
  
  
  4.     },
    5. 
  
  
  
  
  5. getgrid() {
    6. 
  
  
  
  
  6.     if (MARGIN < localx && localx < (MARGIN + SIDELEN)) {
    7. 
  
  
  
  
  7.         b = 0;
    8. 
  
  
  
  
  8.     }
    9. 
  
  
  
  
  9.     if (1 * (MARGIN + SIDELEN) + MARGIN < localx && localx < 2 * (MARGIN + SIDELEN)) {
    10. 
  
  
  
  
  10.         b = 1;
    11. 
  
  
  
  
  11.     }
    12. 
  
  
  
  
  12.     if (2 * (MARGIN + SIDELEN) + MARGIN < localx && localx < 3 * (MARGIN + SIDELEN)) {
    13. 
  
  
  
  
  13.         b = 2;
    14. 
  
  
  
  
  14.     }
    15. 
  
  
  
  
  15.     if (3 * (MARGIN + SIDELEN) + MARGIN < localx && localx < 4 * (MARGIN + SIDELEN)) {
    16. 
  
  
  
  
  16.         b = 3;
    17. 
  
  
  
  
  17.     }
    18. 
  
  
  
  
  18.     if (4 * (MARGIN + SIDELEN) + MARGIN < localx && localx < 5 * (MARGIN + SIDELEN)) {
    19. 
  
  
  
  
  19.         b = 4;
    20. 
  
  
  
  
  20.     }
    21. 
  
  
  
  
  21.     if (5 * (MARGIN + SIDELEN) + MARGIN < localx && localx < 6 * (MARGIN + SIDELEN)) {
    22. 
  
  
  
  
  22.         b = 5;
    23. 
  
  
  
  
  23.     }
    24. 
  
  
  
  
  24.     if (6 * (MARGIN + SIDELEN) + MARGIN < localx && localx < 7 * (MARGIN + SIDELEN)) {
    25. 
  
  
  
  
  25.         b = 6;
    26. 
  
  
  
  
  26.     }
    27. 
  
  
  
  
  27.     if (MARGIN < localy && localy < (MARGIN + SIDELEN)) {
    28. 
  
  
  
  
  28.         a = 0;
    29. 
  
  
  
  
  29.     }
    30. 
  
  
  
  
  30.     if (1 * (MARGIN + SIDELEN) + MARGIN < localy && localy < 2 * (MARGIN + SIDELEN)) {
    31. 
  
  
  
  
  31.         a = 1;
    32. 
  
  
  
  
  32.     }
    33. 
  
  
  
  
  33.     if (2 * (MARGIN + SIDELEN) + MARGIN < localy && localy < 3 * (MARGIN + SIDELEN)) {
    34. 
  
  
  
  
  34.         a = 2;
    35. 
  
  
  
  
  35.     }
    36. 
  
  
  
  
  36.     if (3 * (MARGIN + SIDELEN) + MARGIN < localy && localy < 4 * (MARGIN + SIDELEN)) {
    37. 
  
  
  
  
  37.         a = 3;
    38. 
  
  
  
  
  38.     }
    39. 
  
  
  
  
  39.     if (4 * (MARGIN + SIDELEN) + MARGIN < localy && localy < 5 * (MARGIN + SIDELEN)) {
    40. 
  
  
  
  
  40.         a = 4;
    41. 
  
  
  
  
  41.     }
    42. 
  
  
  
  
  42.     if (5 * (MARGIN + SIDELEN) + MARGIN < localy && localy < 6 * (MARGIN + SIDELEN)) {
    43. 
  
  
  
  
  43.         a = 5;
    44. 
  
  
  
  
  44.     }
    45. 
  
  
  
  
  45.     if (6 * (MARGIN + SIDELEN) + MARGIN < localy && localy < 7 * (MARGIN + SIDELEN)) {
    46. 
  
  
  
  
  46.         a = 6;
    47. 
  
  
  
  
  47.     }
    48. 
  
  
  
  
  48. }
    49.

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

 
 
 
 
    
  
  
  
  
  1. change(x,y){
    2. 
  
  
  
  
  2.     
    3. 
  
  
  
  
  3.          if(grids[x][y] == 0){
    4. 
  
  
  
  
  4.              grids[x][y] = 1;
    5. 
  
  
  
  
  5.          }else{
    6. 
  
  
  
  
  6.              grids[x][y] = 0;
    7. 
  
  
  
  
  7.          }
    8. 
  
  
  
  
  8.      
    9. 
  
  
  
  
  9.  }, 
    10. 
  
  
  
  
  10. changeOneGrids(x,y){
    11. 
  
  
  
  
  11.      if(x>-1 && y>-1 && x<7 && y<7){
    12. 
  
  
  
  
  12.          this.change(x,y);
    13. 
  
  
  
  
  13.      }
    14. 
  
  
  
  
  14.      if(x+1>-1 && y>-1 && x+1<7 && y<7){
    15. 
  
  
  
  
  15.          this.change(x+1,y);
    16. 
  
  
  
  
  16.      }
    17. 
  
  
  
  
  17.      if(x-1>-1 && y>-1 && x-1<7 && y<7){
    18. 
  
  
  
  
  18.          this.change(x-1,y);
    19. 
  
  
  
  
  19.      }
    20. 
  
  
  
  
  20.      if(x>-1 && y+1>-1 && x<7 && y+1<7){
    21. 
  
  
  
  
  21.          this.change(x,y+1);
    22. 
  
  
  
  
  22.      }
    23. 
  
  
  
  
  23.      if(x>-1 && y-1>-1 && x<7 && y-1<7){
    24. 
  
  
  
  
  24.          this.change(x,y-1);
    25. 
  
  
  
  
  25.      }
    26. 
  
  
  
  
  26.      this.drawGrids();
    27. 
  
  
  
  
  27. }
    28.

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

 
 
 
 
    
  
  
  
  
  1. click(){
    2. 
  
  
  
  
  2.       this.getgrid();
    3. 
  
  
  
  
  3.       this.changeOneGrids(a,b);
    4. 
  
  
  
  
  4.   }
    5.

 到此，效果如下

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ù)來(lái)設(shè)置不同難度)

 
 
 
 
    
  
  
  
  
  1. initGrids(){
    2. 
  
  
  
  
  2.         let array = [];
    3. 
  
  
  
  
  3.         for (let row = 0; row < 7; row++) {
    4. 
  
  
  
  
  4.             for (let column = 0; column < 7; column++) {
    5. 
  
  
  
  
  5.                 if (grids[row][column] == 0) {
    6. 
  
  
  
  
  6.                     array.push([row, column])                            
    7. 
  
  
  
  
  7.                  }
    8. 
  
  
  
  
  8.             }
    9. 
  
  
  
  
  9.         }
    10. 
  
  
  
  
  10.         for (let i = 0; i < 10; i++){
    11. 
  
  
  
  
  11.             let randomIndex = Math.floor(Math.random() * array.length);   
    12. 
  
  
  
  
  12.             let row = array[randomIndex][0];                              
    13. 
  
  
  
  
  13.             let column = array[randomIndex][1];                           
    14. 
  
  
  
  
  14.             this.changeOneGrids(row,column);
    15. 
  
  
  
  
  15.         }
    16. 
  
  
  
  
  16.     }
    17.

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

 
 
 
 
    
  
  
  
  
  1. onShow(){
    2. 
  
  
  
  
  2.        this.initGrids();
    3. 
  
  
  
  
  3.        this.drawGrids();
    4. 
  
  
  
  
  4.    },
    5.

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

1.步數(shù)顯示

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

index.hml

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.         當(dāng)前步數(shù)：{{currentSteps}}
    3. 
  
  
  
  
  3.     
    4.

 index.css

 
 
 
 
    
  
  
  
  
  1. .steps {
    2. 
  
  
  
  
  2.     font-size: 21px;
    3. 
  
  
  
  
  3.     text-align:center;
    4. 
  
  
  
  
  4.     width:200px;
    5. 
  
  
  
  
  5.     height:39px;
    6. 
  
  
  
  
  6.     letter-spacing:0px;
    7. 
  
  
  
  
  7.     margin-top:10px;
    8. 
  
  
  
  
  8.     background-color: #BBAD20;
    9. 
  
  
  
  
  9. }
    10.

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

index.js

 
 
 
 
    
  
  
  
  
  1. data: {
    2. 
  
  
  
  
  2.        currentSteps:-10,
    3. 
  
  
  
  
  3.    },
    4.

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

 
 
 
 
    
  
  
  
  
  1. this.currentSteps+=1;
    2.

2.游戲的重新開始

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

 
 
 
 
    
  
  
  
  
    2.

index.css

 
 
 
 
    
  
  
  
  
  1. .bit {
    2. 
  
  
  
  
  2.     top: 20px;
    3. 
  
  
  
  
  3.     width: 220px;
    4. 
  
  
  
  
  4.     height: 40px;
    5. 
  
  
  
  
  5.     background-color: #AD9D8F;
    6. 
  
  
  
  
  6.     font-size: 25px;
    7. 
  
  
  
  
  7.     margin-top: 10px;
    8. 
  
  
  
  
  8. }
    9.

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

index.js

 
 
 
 
    
  
  
  
  
  1. restartGame(){
    2. 
  
  
  
  
  2.        this.initGrids();
    3. 
  
  
  
  
  3.        this.drawGrids();
    4. 
  
  
  
  
  4.        this.currentSteps = 0;
    5. 
  
  
  
  
  5.    }
    6.

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

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

index.hml

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.         
    3. 
  
  
  
  
  3.        
    4. 
  
  
  
  
  4.            
    5. 
  
  
  
  
  5.                游戲成功
    6. 
  
  
  
  
  6.            
    7. 
  
  
  
  
  7.        
  •    

    • index.css

     
 
 
 
      
  
  
  
  
    1. .stack{
      2. 
  
  
  
  
    2.     width: 320px;
      3. 
  
  
  
  
    3.     height: 320px;
      4. 
  
  
  
  
    4.     margin-top: 10px;
      5. 
  
  
  
  
    5. }
      6. 
  
  
  
  
    6. 
  
  
  
  
    7. .subcontainer{
      8. 
  
  
  
  
    8.     left: 50px;
      9. 
  
  
  
  
    9.     top: 95px;
      10. 
  
  
  
  
    10.     width: 220px;
      11. 
  
  
  
  
    11.     height: 130px;
      12. 
  
  
  
  
    12.     justify-content: center;
      13. 
  
  
  
  
    13.     align-content: center;
      14. 
  
  
  
  
    14.     background-color: #E9C2A6;
      15. 
  
  
  
  
    15. }
      16. 
  
  
  
  
    16. 
  
  
  
  
    17. .gameover{
      18. 
  
  
  
  
    18.     font-size: 38px;
      19. 
  
  
  
  
    19.     color:black;
      20. 
  
  
  
  
    20.     justify-content: center;
      21. 
  
  
  
  
    21.     margin-top: 30px;
      22. 
  
  
  
  
    22. }
      23.

     index.js

     
 
 
 
      
  
  
  
  
    1. data: {
      2. 
  
  
  
  
    2.        currentSteps:-10,
      3. 
  
  
  
  
    3.        isShow:false
      4. 
  
  
  
  
    4.    },
      5. 
 
 
 
 
     
 
 
 
      
  
  
  
  
    1. gameover(){
      2. 
  
  
  
  
    2.       for (let row = 0 ;row < 7 ;row++){
      3. 
  
  
  
  
    3.           for (let column = 0; column < 7;column++){
      4. 
  
  
  
  
    4.               if (grids[row][column]==1){
      5. 
  
  
  
  
    5.                   return false;
      6. 
  
  
  
  
    6.               }
      7. 
  
  
  
  
    7.           }
      8. 
  
  
  
  
    8.       }
      9. 
  
  
  
  
    9.       return true;
      10. 
  
  
  
  
    10.   },
      11.

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

     
 
 
 
      
  
  
  
  
    1. if(this.isShow==false){
      2. 
  
  
  
  
    2.             this.currentSteps+=1;
      3. 
  
  
  
  
    3.         }
      4. 
  
  
  
  
    4.         if(this.gameover()){
      5. 
  
  
  
  
    5.             this.isShow=true;
      6. 
  
  
  
  
    6.         }
      7.

    在restartGame中添加代碼

     
 
 
 
      
  
  
  
  
    1. this.isShow = false;
      2.

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

    結(jié)語(yǔ)

    以上就是我這次的小分享啦!后續(xù)會(huì)有該游戲的進(jìn)階版，我會(huì)不斷完善的(? ?_?)?


    網(wǎng)頁(yè)名稱：手機(jī)游戲—黑白翻棋
    文章來(lái)源：http://m.5511xx.com/article/djjggeg.html