深鴻會深大小組：HarmonyOS手錶遊戲——黑白翻棋

前言
這次是深鴻會深大小組（Zzt_01-23）學習完HarmonyOS後，自行開發的第一個demo——黑白翻棋，詳細講述了黑白翻棋的編寫思路，內含詳細解釋，同時也歡迎與各位感興趣的讀者一塊兒學習HarmonyOS開發，相互交流、共同進步。

概述
本個demo將從零開始完成鴻蒙小遊戲APP在可穿戴設備上的編譯，此處以運動手錶爲例，在項目中咱們所使用到的軟件爲DevEco Studio，下載地址爲：DevEco Studio下載，在項目中咱們要實現的內容爲黑白翻棋APP的開發。

1.  在初始界面中顯示7*7的棋盤，棋盤中黑白色塊爲隨意打亂的，棋盤上面顯示遊戲翻轉的次數，棋盤下方顯示一個「從新開始」的按鈕，爲用戶提供從新開始改遊戲。
2. 點擊7*7棋盤中任一色塊，其上下左右四個色塊也會跟着一塊兒變色（在邊緣的色塊則只會改變其中若干個色塊的顏色），棋盤上方的當前步數則會相應依次增長。
3. 通過若干次點擊後，當全部的色塊都爲白色時，則會彈出遊戲成功界面，此時再點擊棋盤，不會有任何變化，點擊「從新開始」的按鈕時則會從新返回步驟1界面所示。

正文
建立項目文件
DevEco Studio下載成功後，點擊左上角的File，點擊New，再選擇New Project，選擇Lite Wearable選項，選擇默認的模板，而後選擇保存路徑，將文件命名爲MyGame（文件名不能出現中文或者特殊字符，不然將沒法成功建立項目文件），如圖所示。 

主要編寫的文件爲index.css、index.hml和index.js，打開路徑如圖所示，index.hml用於描述頁面中包含哪些組件，index.css用於描述頁面中的組件都長什麼樣，index.js用於描述頁面中的組件是如何進行交互的。

實現開始界面的佈局
首先咱們要先在運動手錶上畫出一個7*7的棋盤，色塊顏色先設定爲全是白色，棋盤上方顯示「當前步數：0」，棋盤下方有一個「從新開始」的按鈕，如圖所示：

1. 首先在index.hml文件中建立一個基礎容器div類名爲container，在此容器中間添加一個文字組件text類名爲steps，而且寫上顯示的固定部分」當前步數：」，爲動態變換部分賦予一個名爲currentSteps的變量，再添加一個畫布組件canvas類名爲canvas，增長一個引用屬性ref，以便在此畫布上畫出7*7表格，最後添加一個普通按鈕，類名爲bit，並賦值「從新開始」

   <div class="container" >
       <text class="steps">
           當前步數：{{currentSteps}}
       </text>
       <canvas class="canvas" ref="canvas" ></canvas>
       <input type="button" value="從新開始" class="bit" />
   </div>

2. 在index.css編寫剛纔添加組件的樣式，首先編寫container的樣式，flex-direction爲容器主軸方向，選擇column（垂直方向從上到下），justify-content爲容器當前行的主軸對齊格式，選擇center（項目位於容器的中心），align-items爲容器當前行的交叉軸對齊格式，選擇center（元素在交叉軸居中），width、height分別爲容器以像素爲單位的寬度和高度，都設定爲450px；編寫steps的樣式，font-size爲設置文本的尺寸，設定爲18px，text-align爲設置文本的文本對齊方式，選擇center（文本居中對齊），width、height分別設定爲300px和20px，letter-spacing爲設置文本的字符間距，設定爲0px，margin-top爲設置上外邊距，設定爲10px；編寫canvas的樣式，width、height都設定爲320px，background-color爲設置背景顏色，設定爲#BBADA0；編寫bit的樣式，width、height分別設定爲150px和30px，background-color設定爲#AD9D8F，font-size設定爲24px，margin-top設定爲10px

   .container {
       flex-direction: column;
       justify-content: center;
       align-items: center;
       width:450px;
       height:450px;
   }
   .steps {
       font-size: 18px;
       text-align:center;
       width:300px;
       height:20px;
       letter-spacing:0px;
       margin-top:10px;
   }
   .canvas{
       width:320px;
       height:320px;
       background-color: #BBADA0;
   }
   .bit{
       width:150px;
       height:30px;
       background-color:#AD9D8F;
       font-size:24px;
       margin-top:10px;
   }

3. 在index.js編寫描述頁面中的組件是如何進行交互的，首先在data函數中爲當前步數賦值爲0

   data: {
           currentSteps: 0,
       }

   在文件開頭定義一個全局變量量context，建立一個onReady()函數，用於定義2d繪畫工具

   var context;
   
   onReady(){
           context=this.$refs.canvas.getContext('2d');
       }

   用0表示白色，1表明黑色，這樣咱們就能定義一個用0和1表示鍵，顏色表示值的字典COLORS，而且定義全局常量邊長SIDELEN爲40，間距MARGIN爲5，定義一個全局變量的二維數組grids，其中的值全爲0

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

   建立drawGrids()函數，先將grids的值利用toString()函數所有轉化爲字符串，fillStyle表社畫圖的背景顏色，引用字典便可，fillRect表示畫矩形的大小，其中有四個參數，第一個參數指定矩形左上角的x座標，第二參數指定矩形左上角的y座標，第三個參數指定矩形的高度，第四個參數指定矩形的寬度，最後建立onShow()調用drawGrids()函數便可

   onShow(){
           this.drawGrids();
       },
       drawGrids(){
           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);
               }
           }
       }

   運行便可得出開始界面佈局了。

 

實現題目的隨機生成和色塊的翻轉
其次咱們要先在運動手錶上隨機生成一個色塊被打亂的7*7的棋盤，而且點擊棋盤中任一色塊，其上下左右四個色塊也會跟着一塊兒變色（在邊緣的色塊則只會改變其中若干個色塊的顏色），棋盤上方的當前步數則會相應依次增長，如圖所示：

1. 爲了使點擊任意一個色塊時能獲得其對應的二維數組的下標，咱們須要給每一個色塊添加一個按鈕button，並增長一個點擊事件click，分別給這些按鈕設定一個類名和點擊按鈕所調用的函數而後爲了使按鈕顯示在棋盤格子的上方，須要添加一個棧stack類名設定位stack，使畫布先進棧，按鈕後進棧，這樣就能達到預期效果了，index.hml代碼以下：

文章後續內容和附件能夠點擊下面的原文連接前往學習
原文連接：https://harmonyos.51cto.com/posts/2002#bkwz

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

51CTO和華爲官方戰略合做共建的鴻蒙技術社區

https://harmonyos.51cto.com/#bkwz