手表游戲—黑白翻棋之學習筆記（前篇）

作者：潘穎琳 2021-09-17 14:47:33

開發前端

去年我們木棉花組織發過一篇文章“HarmonyOS手表游戲——黑白翻棋”，本文是我對該文章的一個學習筆記，隨著IDE的升級，一些代碼也需要作修改。以下是我的學習筆記及部分代碼的修改O(∩_∩)O

[[424571]]

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

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

https://harmonyos.51cto.com

前言

源代碼請移步至→原文章地址

概述

正文內容只展示部分代碼，完整代碼可以下載附件(附件1是源代碼的代碼更新)。效果圖如下：

【木棉花】：手表游戲——黑白翻棋之學習筆記（前篇）-鴻蒙HarmonyOS技術社區

正文

1.創建一個空白的工程

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

2.界面布局

通過效果圖可見，初始布局分三個部分，由上至下分別是文本框、棋盤(畫布組件)、按鈕;游戲成功的布局有四個部分：文本框、棋盤(畫布組件)、游戲成功界面、按鈕。(完整代碼及解釋可以去看原文章)

這里記幾個小要點：

1.當前步數顯示的是一個動態的值，不是一個固定的值，這里以動態變量currentSteps來顯示數據

2.游戲成功的文本框是顯示在畫布組件之上的(覆蓋)，而不是在畫布組件的下方。該實現可通過添加一個堆疊容器stack，將游戲成功的文本組件放在畫布組件之后

3.“游戲成功”的顯示在初始時不會顯示，所以要設置屬性show,對應設一個布爾型變量isShow，并令isShow的初始值為假，游戲成功時其值為真，當為真時就可以顯示了

<div class="container"> 
    <text class="steps"> 
        當前步數：{{currentSteps}} 
    </text> 
    <stack class="stack"> 
        <canvas class="canvas" ref="canvas"></canvas> 
            <div class="subcontainer" show="{{isShow}}"> 
                <text class="gameover"> 
                    游戲成功 
                </text> 
            </div> 
    </stack> 
    <input type="button" value="重新開始" class="bit" onclick="restartGame"/> 
</div>

相應的組件大小顏色等屬性設置在entry>src>main>js>default>pages.index>index.css文件里通過class設定的名稱來去設置，代碼如下：

.container { 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    width:240px; 
    height:240px; 
} 
.steps { 
    font-size: 10px; 
    text-align:center; 
    width:100px; 
    height:18px; 
    letter-spacing:0px; 
    margin-top:5px; 
} 
.canvas{ 
    width:160px; 
    height:160px; 
    background-color: #BBADA0; 
} 
.bit { 
    width: 75px; 
    height: 15px; 
    background-color: #AD9D8F; 
    font-size: 10px; 
    margin-top: 5px; 
} 
 
.stack{ 
    width: 160px; 
    height: 160px; 
    margin-top: 5px; 
} 
 
.subcontainer{ 
    left: 25px; 
    top: 47.5px; 
    width: 110px; 
    height: 65px; 
    justify-content: center; 
    align-content: center; 
    background-color: #E9C2A6; 
} 
 
.gameover{ 
    font-size: 19px; 
    color:black; 
}

代碼更新部分：組件大小的數據全部都在原文章源代碼的基礎上減半再作微調，即原文章的數據不適用，以上代碼是我調整修改后的

3.實現色塊的翻轉

要先在運動手表上生成一個7*7的棋盤，并且點擊棋盤中任一色塊，其上下左右四個色塊也會跟著一起變色(在邊緣的色塊則只會改變其中若干個色塊的顏色)

原文章的實現方法是給這49個色塊分別添加一個按鈕，并分別添加點擊事件。

布局方面如上所述，色塊(按鈕)是顯示在棋盤(畫布)之上，而游戲成功界面是顯示在色塊(按鈕)及畫布之上，因此stack里的順序應該是canvas、button、gameover;且按鈕的相關大小間距的數據也要如上“代碼更新部分”一樣作修改，代碼(修改的部分)如下：

.bitgrid1{ 
    left:2.5px; 
    top:2.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent 
 
} 
.bitgrid2{ 
    left:25px; 
    top:2.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent 
} 
.bitgrid3{ 
    left:47.5px; 
    top:2.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent 
} 
.bitgrid4{ 
    left:70px; 
    top:2.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent 
 
} 
.bitgrid5{ 
    left:92.5px; 
    top:2.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent 
} 
.bitgrid6{ 
    left:115px; 
    top:2.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent 
} 
.bitgrid7{ 
    left:137.5px; 
    top:2.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent 
} 
.bitgrid8{ 
    left:2.5px; 
    top:25px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid9{ 
    left:25px; 
    top:25px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid10{ 
    left:47.5px; 
    top:25px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid11{ 
    left:70px; 
    top:25px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
 
} 
.bitgrid12{ 
    left:92.5px; 
    top:25px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid13{ 
    left:115px; 
    top:25px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid14{ 
    left:137.5px; 
    top:25px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid15{ 
    left:2.5px; 
    top:47.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid16{ 
    left:25px; 
    top:47.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid17{ 
    left:47.5px; 
    top:47.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid18{ 
    left:70px; 
    top:47.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
 
} 
.bitgrid19{ 
    left:92.5px; 
    top:47.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid20{ 
    left:115px; 
    top:47.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid21{ 
    left:137.5px; 
    top:47.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid22{ 
    left:2.5px; 
    top:70px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid23{ 
    left:25px; 
    top:70px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid24{ 
    left:47.5px; 
    top:70px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid25{ 
    left:70px; 
    top:70px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
 
} 
.bitgrid26{ 
    left:92.5px; 
    top:70px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid27{ 
    left:115px; 
    top:70px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid28{ 
    left:137.5px; 
    top:70px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid29{ 
    left:2.5px; 
    top: 92.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid30{ 
    left:25px; 
    top:92.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid31{ 
    left:47.5px; 
    top:92.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid32{ 
    left:70px; 
    top:92.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
 
} 
.bitgrid33{ 
    left:92.5px; 
    top:92.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid34{ 
    left:115px; 
    top:92.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid35{ 
    left:137.5px; 
    top:92.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid36{ 
    left:2.5px; 
    top:115px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid37{ 
    left:25px; 
    top:115px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid38{ 
    left:47.5px; 
    top:115px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid39{ 
    left:70px; 
    top:115px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
 
} 
.bitgrid40{ 
    left:92.5px; 
    top:115px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid41{ 
    left:115px; 
    top:115px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid42{ 
    left:137.5px; 
    top:115px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid43{ 
    left:2.5px; 
    top:137.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid44{ 
    left:25px; 
    top:137.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid45{ 
    left:47.5px; 
    top:137.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid46{ 
    left:70px; 
    top:137.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
 
} 
.bitgrid47{ 
    left:92.5px; 
    top:137.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid48{ 
    left:115px; 
    top:137.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
} 
.bitgrid49{ 
    left:137.5px; 
    top:137.5px; 
    width:20px; 
    height:20px; 
    border-color:transparent; 
    background-color:transparent; 
}

然后在index.js文件里用一個7*7的數組表示色塊，其中0表示白色，1代表黑色，這樣我們就能定義一個用0和1表示鍵，顏色表示值的字典COLORS，并且定義全局常量邊長SIDELEN為20，間距MARGIN為2.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=20; 
const MARGIN=2.5; 
const COLORS = { 
    "0": "#FFFFFF", 
    "1": "#000000" 
}

設置色塊的點擊事件

要點：點擊時對應獲取該方塊的位置(例如該方塊時第3行第4個，則坐標為(2，3))，并將該坐標傳給函數changeOneGrids，去判斷該方塊上下左右是否有方塊，并調用函數change變換其數組的值——若0則變為1，若1則變為0

change(x,y){ 
        if(this.isShow==false){ 
            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); 
        } 
}

最后調用函數drawgrids去“上色”

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); 
            } 
        } 
    },

4.實現題目的隨機生成

隨機生成一個色塊被打亂的7x7的棋盤，這里是在原來全白的棋盤上隨機生成20個黑色塊。

要點：把二維數組的下標放進一個列表中,Math.random()函數是隨機[0,1)內的小數，Math.floor(x)為得出小于或等于x的最大整數，每次隨機生成一個數后，讀取剛才的列表對應的下標,即獲得一個在7x7內的隨機的坐標，調用函數changeOneGrids(x,y)

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 < 20; i++){ 
            let randomIndex = Math.floor(Math.random() * array.length); 
            let row = array[randomIndex][0]; 
            let column = array[randomIndex][1]; 
            this.changeOneGrids(row,column); 
        } 
    }

5.游戲結束

當該7x7數組的值全為1時游戲成功，此時isShow的值為真，色塊的點擊事件就不起效(change函數里加個對isShow的真假判斷)

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函數里調用gameover函數;同時，隨著每一次點擊，都會調用changeOneGrids函數，所以步數的增加可以直接在每次changeOneGrids函數被調用時累加

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

6.重新開始

最后編寫重新按鈕對應的函數restartGame()，作用是是二維數組、isShow和當前步數全部置為初始化界面

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

修改的說明

1.畫布組件的getContext不支持在onInit和onReady中進行調用，因此我改在drawGrids中調用，然后再在onShow中調用drawGrids

2.隨機生成打亂的色塊時，會調用changeOneGrids函數，此時會增加步數20

data: { 
        currentSteps: -20, 
    }

3.同1，色塊的隨機生成函數initGrids也放在onShow中調用

結語

以上是我的初步學習筆記啦，我修改過的源代碼會上傳到附件，更多詳細的注解步驟可去看原文章。該學習筆記還有后續哦，后續是對其中一些功能實現采用另一種算法來實現，代碼會在該篇的基礎上再作修改，并且還會對相關知識注解作一個小分享，敬請期待(●ˇ∀ˇ●)

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

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

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

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

https://harmonyos.51cto.com

責任編輯：jianghua 來源：鴻蒙社區

鴻蒙 HarmonyOS 應用

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

手表游戲—黑白翻棋 之 學習筆記（前篇）

[[424571]] 想了解更多內容，請訪問： 51CTO和華為官方合作共建的鴻蒙技術社區 https://harmonyos.51cto.com

前言

概述

正文