深鴻會深大小組：HarmonyOS手錶遊戲—數字華容道

前言
此前已經爲你們分享了黑白翻棋小遊戲的開發思路，感興趣的讀者能夠前往學習交流：黑白翻棋，如今爲你們分享第二個小遊戲的開發思路，也是一款十分經典的小遊戲——數字華容道，一樣是深鴻會深大小組學習完HarmonyOS後自行開發的一個鴻蒙demo，詳細講述了數字華容道的編寫思路，內含詳細解釋，同時也歡迎與各位感興趣的讀者一塊兒學習HarmonyOS開發，相互交流、共同進步。

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

1. 在初始界面中顯示4*4的方陣，方陣中分佈有隨意打亂的1至15的數字和一個空白方格，方陣上方增長一個計時器，顯示遊戲進行的時間，單位爲秒，方陣下方顯示一個「從新開始」的按鈕，爲用戶提供從新開始遊戲的機會。
2. 向上、下、左、右任一方向滑動，空白方格周圍對應位置的方格便會隨之向對應的方向移動一格，計時器也會顯示遊戲開始到當前的時間。
3. 通過若干次移動後，當全部的數字按順序排列後，則會彈出遊戲成功的界面，再滑動也不會有任何變化，此時方陣上方的計時器中止計時，點擊「從新開始」的按鈕後則會從新返回步驟1界面所示。

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

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

實現開始界面的佈局
首先，咱們要先畫出一個4*4的方陣，方陣中按照順序顯示1至15的數字，方陣上方顯示「當前秒數：0.0」，方陣下方有一個「從新開始」的按鈕。

1. 在index.hml中添加相應的頁面組件：首先建立一個基礎容器div類名爲container，用於盛裝全部的其餘組件；而後在此基礎容器中添加一個文字組件text類名爲seconds，且註明顯示的固定部分「當前秒數：」，爲動態變換部分賦予一個名爲currentSteps的變量，用於動態顯示遊戲進行的秒數；再添加一個畫布組件canvas類名爲canvas，增長一個引用屬性ref，用來指定指向子元素或子組件的引用信息，該引用將註冊到父組件的$refs 屬性對象上，以便在此畫布上畫出4*4的方陣；最後添加一個普通按鈕組件，類名爲bit，並賦值「從新開始」，用於從新開始遊戲

<div class="container" >
    <text class="seconds">
        當前秒數：{{currentSeconds}}
    </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；而後編寫seconds的樣式，font-size爲設置文本的尺寸，設定爲18px，text-align爲設置文本的文本對齊方式，選擇center（文本居中對齊），width、height分別設定爲300px和20px，letter-spacing爲設置文本的字符間距，設定爲0px，margin-top爲設置上外邊距，設定爲10px；再編寫canvas的樣式，width、height都設定爲320px，background-color爲設置背景顏色，設定爲#FFFFFF；最後編寫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;
}
.seconds{
    font-size: 18px;
    text-align:center;
    width:300px;
    height:20px;
    letter-spacing:0px;
    margin-top:10px;
}
.canvas{
    width:305px;
    height:305px;
    background-color: #FFFFFF;
}
.bit{
    width:150px;
    height:30px;
    background-color:#AD9D8F;
    font-size:24px;
    margin-top:10px;
}

3. 在index.js中描述頁面中的組件交互狀況：首先在data中爲當前秒數currentSeconds賦值爲0.0

data: {
        currentSeconds:'0.0',
    }

而後在文件開頭定義一個全局變量context，定義一個全局變量的二維數組grids，其中的值爲1至15和0，定義全局常量方格的邊長SIDELEN爲70，方格的間距MARGIN爲5，建立一個onReady()函數，用於定義2d繪畫工具

var grids=[[1, 2, 3, 4],
           [5, 6, 7, 8],
           [9, 10, 11, 12],
           [13, 14, 15, 0]];
var context;

const SIDELEN = 70;
const MARGIN = 5;

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

再建立drawGrids()函數，先將grids的值利用toString()函數所有轉化爲字符串，fillStyle爲畫圖工具context的方格的顏色，方格的背景顏色定義爲#BBADA0，數字的顏色定義爲#000000，fillRect爲畫圖工具context的畫圖矩形的大小，其中有四個參數，第一個參數指定矩形左上角的x座標，第二個參數指定矩形左上角的y座標，第三個參數指定矩形的高度，第四個參數指定矩形的寬度。font爲爲畫圖工具context的字體大小，定義爲30px HYQiHei-65S，由於要出現一個空白的方格，因此須要添加一個判斷語句，當數字爲0時不顯示數字。fillText爲畫圖工具context的文本字體大小，其中有三個參數，第一個參數爲繪製的文本，第二個參數指定文本左上角的x座標，第三個參數指定文本左上角的y座標，最後建立onShow()函數，用於調用drawGrids()函數

onShow() {
        this.drawGrids();
    },
    drawGrids() {
        for (let row = 0; row < 4; row++) {
            for (let column = 0; column < 4; column++) {
                let gridStr = grids[row][column].toString();

                context.fillStyle = "#BBADA0";
                let leftTopX = column * (MARGIN + SIDELEN) + MARGIN;
                let leftTopY = row * (MARGIN + SIDELEN) + MARGIN;
                context.fillRect(leftTopX, leftTopY, SIDELEN, SIDELEN);

                context.font = "30px HYQiHei-65S";
                if (gridStr != "0") {
                    context.fillStyle = "#000000";
                    let offsetX = (4 - gridStr.length) * (SIDELEN / 8);
                    let offsetY = (SIDELEN - 30) / 2;
                    context.fillText(gridStr, leftTopX + offsetX, leftTopY + offsetY);
                }
            }
        }
    }

至此，運行便可得出上述界面佈局了。

實現數字的隨機打亂和方格的移動

其次咱們要在屏幕上隨機生成一個數字被隨意打亂的4*4的方陣，而且向任意方向滑動屏幕，空白方格周圍對應位置的方格便會隨之向對應的方向移動一格

1. 在index.hml中添加相應的頁面組件：咱們須要在畫布中添加一個swipe屬性，用於響應滑動事件，賦予一個所自動調用的函數swipeGrids

<canvas class="canvas" ref="canvas" onswipe="swipeGrids"></canvas>

2. 在index.css中描述剛纔添加的頁面組件的樣式：這一部分不須要添加或修改頁面組件的樣式

3. 在index.js中描述頁面中的組件交互狀況：首先咱們得先實現方格的移動，建立一個函數changeGrids(direction)，接受一個參數direction指示滑動的方向，先找出空白方格所在位置對應的二維數組下標，接着判斷參數direction爲’left’、‘right’、‘up’ 或’down’時，當isShow爲false時，對應的方格和空白方格對應的二維數組的數值對調，建立響應滑動事件所自動調用的函數swipeGrids(event)，參數爲滑動事件，調用函數changeGrids(direction)，並傳入滑動的方向，最後調用函數drawGrids()

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

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

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

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