成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

手機游戲—黑白翻棋

作者：潘穎琳
開發
這次給大家帶來的小分享是黑白翻棋的手機版本，也是JS寫的，功能代碼基本一致(采用第二篇的算法)，只是布局會作相應修改。

[[427565]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com

前言

之前發過兩篇黑白翻棋游戲的手表版本，感興趣的uu們可以點擊👉 穿梭機1和穿梭機2。這次給大家帶來的小分享是黑白翻棋的手機版本，也是JS寫的，功能代碼基本一致(采用第二篇的算法)，只是布局會作相應修改。

概述

該游戲會隨機生成一個題目，最終當棋盤上的方格都為白色的時候游戲成功，效果如下👇

【木棉花】：手機游戲——黑白翻棋-鴻蒙HarmonyOS技術社區【木棉花】：手機游戲——黑白翻棋-鴻蒙HarmonyOS技術社區

正文

一.創建一個空白的工程

DevEco Studio下載安裝成功后，打開DevEco Studio，點擊左上角的File，點擊New，再選擇New Project，選擇Empty Ability,然后點擊Next,給項目命名PhoneGame_BW，選擇設備類型Phone，選擇語言類型JS最后點擊Finish。

【木棉花】：手機游戲——黑白翻棋-鴻蒙HarmonyOS技術社區
【木棉花】：手機游戲——黑白翻棋-鴻蒙HarmonyOS技術社區

二.界面布局

1.代碼刪除的部分

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

  1. <text class="title"> 
  2.         {{ $t('strings.hello') }} {{ title }} 
  3.     </text> 

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

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

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

2.棋盤設置

這里以畫布組件canvas來描繪棋盤

  1. <canvas class="canvas" ref="canvas"> </canvas> 

index.css

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

打開模擬器，界面如下

【木棉花】：手機游戲——黑白翻棋-鴻蒙HarmonyOS技術社區

3.棋子設置

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

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

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

 在export default下方添加以下代碼，遍歷數組grids的每一個元素，將其轉換成String型，對應的是COLORS中的顏色，然后調用畫布組件中的方法fillRect填充方格的顏色，參數為方格的左上角的坐標及方格的長寬

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

 最后在drawGrids函數上方添加以下代碼調用drawGrids

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

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

【木棉花】：手機游戲——黑白翻棋-鴻蒙HarmonyOS技術社區

三.游戲規則的設置

1.獲取點擊位置的坐標并對應方格

給畫布組件添加點擊事件onclick和觸摸事件touchstart

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

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

index.js

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

2.點擊的方格及其上下左右都變色

change控制變色，若值為0則變為1，若為1則變為0。方格的橫縱坐標都是0~6，changeOneGrids第一個判斷是被點擊的方格的變色，第二個判斷是右邊的格子是否在棋盤上，假如被點擊的格子是右邊界，則判斷為假，右格子不會變色。以此類推對左格，上格，下格作判斷，最后調用drawGrids繪制方格。

index.js

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

 最后在點擊事件上調用getgrid和changeOneGrids

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

 到此，效果如下

【木棉花】：手機游戲——黑白翻棋-鴻蒙HarmonyOS技術社區

3.生成隨機打亂的棋盤(游戲題目)

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

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

 然后在onshow上調用initGrids，注意initGrids要放在drawGrids之前

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

四.設置步數顯示及游戲的重新開始

1.步數顯示

步數這個文本組件顯示在棋盤上方，故在index.hml文件里，將以下代碼放在canvas上方，其中由于步數是個變量，故以currentSteps的值的變動來動態更新步數

index.hml

  1. <text class="steps"> 
  2.         當前步數：{{currentSteps}} 
  3.     </text> 

 index.css

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

 由于initGrids會隨機點擊10下，為了使步數清零，在data里給它賦初值-10

index.js

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

 在changeOneGrids上添加以下代碼，使每次點擊步數加一

  1. this.currentSteps+=1; 

2.游戲的重新開始

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

  1. <input type="button" value="重新開始" class="bit" onclick="restartGame"/> 

index.css

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

游戲重新開始時，會再次隨機生成游戲題目，并且步數重置為0

index.js

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

五.游戲成功的設置

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

index.hml

  1. <stack class="stack"> 
  2.        <canvas class="canvas" ref="canvas" onclick="click" @touchstart='touchstartfunc'> </canvas> 
  3.        <div class="subcontainer" show="{{isShow}}"> 
  4.            <text class="gameover"> 
  5.                游戲成功 
  6.            </text> 
  7.        </div> 
  8.    </stack> 

index.css

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

 index.js

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

 在changeOneGrids中給“步數增加”添加判斷條件

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

在restartGame中添加代碼

  1. this.isShow = false; 

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

結語

以上就是我這次的小分享啦❀❀!后續會有該游戲的進階版，我會不斷完善的(ง •_•)ง

文章相關附件可以點擊下面的原文鏈接前往下載

https://harmonyos.51cto.com/resource/1288

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com

 

責任編輯：jianghua 來源： 鴻蒙社區
鴻蒙HarmonyOS應用
相關推薦

2021-09-17 14:47:33

鴻蒙HarmonyOS應用

2022-08-22 17:28:34

ArkUI鴻蒙

2020-12-14 09:58:28

鴻蒙HarmonyOS手表游戲

2022-11-01 15:17:48

JS鴻蒙小游戲

2013-07-24 10:10:08

2022-12-19 16:56:48

游戲開發鴻蒙

2012-12-28 09:54:29

手機游戲產品設計

2024-01-15 07:47:09

井字棋游戲編程練習Python

2013-04-07 14:36:19

手機游戲手機游戲引擎

2016-12-29 13:34:04

阿爾法狗圍棋計算機

2013-03-29 11:47:37

2012-05-04 10:24:18

手機游戲微軟

2009-04-17 09:17:04

2013-07-31 10:34:30

手機游戲營銷手游市場盈利

2022-10-31 15:22:37

JS鴻蒙小游戲

2011-05-13 13:35:42

手機游戲游戲營銷iOS

2011-10-18 09:46:16

諾基亞NFC手機游戲

2016-04-13 13:56:43

IT討厭理由

2016-04-14 16:48:56

WOT2016運維與開發者大會51CTO

2011-04-29 14:08:19

手機社交游戲游戲開發
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板： 久久久毛片| 538在线精品 | 久久亚洲一区 | www性色| 亚洲欧美日韩在线 | 精品美女视频在线观看免费软件 | 中文字幕国产精品 | 成人a在线 | 亚洲视频一区在线播放 | 一区二区三区免费 | 亚洲精品一区在线 | 久久久久国产一区二区三区 | 日韩欧美在线播放 | 草逼网站 | 午夜三级网站 | 午夜免费在线观看 | 黑人精品 | 日韩欧美三级 | 日韩中文字幕在线视频观看 | 成人免费视频网站在线看 | 成人欧美一区二区三区在线观看 | 成人婷婷 | 日本网站免费观看 | 日韩一区二区三区在线 | 激情91 | 无人区国产成人久久三区 | 日韩精品免费视频 | 日本特黄特色aaa大片免费 | 亚洲精品自在在线观看 | 午夜精品久久久久久久 | 国产中文字幕在线观看 | 狠狠干天天干 | 中文av在线播放 | 亚洲一区视频在线 | 色网在线看 | 日韩欧美国产一区二区三区 | 欧美日韩一区二区三区四区五区 | 日中文字幕在线 | 国产欧美精品 | 一级片在线视频 | 国产精品视频一区二区三区四蜜臂 |