目錄：javascript
前言
此前已經爲你們分享了黑白翻棋小遊戲的開發思路，感興趣的讀者能夠前往學習交流：黑白翻棋，如今爲你們分享第二個小遊戲的開發思路，也是一款十分經典的小遊戲——數字華容道，一樣是深鴻會深大小組學習完HarmonyOS後自行開發的一個鴻蒙demo，詳細講述了數字華容道的編寫思路，內含詳細解釋，同時也歡迎與各位感興趣的讀者一塊兒學習HarmonyOS開發，相互交流、共同進步。java
概述
本個demo將從零基礎開始完成鴻蒙小遊戲APP在可穿戴設備上的編譯，此處以運動手錶爲例，在項目中咱們所使用到的軟件爲DevEco Studio，下載地址爲：DevEco Studio下載、DevEco Studio安裝教程，在項目中咱們要實現的內容爲數字華容道APP的開發。canvas
- 在初始界面中顯示4*4的方陣，方陣中分佈有隨意打亂的1至15的數字和一個空白方格，方陣上方增長一個計時器，顯示遊戲進行的時間，單位爲秒，方陣下方顯示一個「從新開始」的按鈕，爲用戶提供從新開始遊戲的機會
- 向上、下、左、右任一方向滑動，空白方格周圍對應位置的方格便會隨之向對應的方向移動一格，計時器也會顯示遊戲開始到當前的時間。
- 通過若干次移動後，當全部的數字按順序排列後，則會彈出遊戲成功的界面，再滑動也不會有任何變化，此時方陣上方的計時器中止計時，點擊「從新開始」的按鈕後則會從新返回步驟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」，方陣下方有一個「從新開始」的按鈕。dom
- 在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設定爲10pxide
.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()
swipeGrids(event) {
this.changeGrids(event.direction);
this.drawGrids();
},
changeGrids(direction) {
let x;
let y;
for (let row = 0; row < 4; row++) {
for (let column = 0; column < 4; column++) {
if (grids[row][column] == 0) {
x = row;
y = column;
break;
}
}
}
let temp;
if(this.isShow==false){
if (direction == 'left' && (y + 1) < 4) {
temp = grids[x][y + 1];
grids[x][y + 1] = grids[x][y];
grids[x][y] = temp;
} else if (direction == 'right' && (y - 1) > -1) {
temp = grids[x][y - 1];
grids[x][y - 1] = grids[x][y];
grids[x][y] = temp;
} else if (direction == 'up' && (x + 1) < 4) {
temp = grids[x + 1][y];
grids[x + 1][y] = grids[x][y];
grids[x][y] = temp;
} else if (direction == 'down' && (x - 1) > -1) {
temp = grids[x - 1][y];
grids[x - 1][y] = grids[x][y];
grids[x][y] = temp;
}
}
而後添加一個函數initGrids()，用於隨機打亂排列規則的數字，先建立一個一維數組變量array，賦值爲上下左右四個方向"left",「up」,「right」,「down」，Math.random()函數是隨機[0,1)內的小數，Math.random() * 4是隨機[0,4)內的小數，Math.floor（x）爲得出小於或等於x的最大整數，隨機生成一個數字，讀取數組array對應的值，調用函數this.changeGrids(direction)並將剛纔的array對應的值傳入，便能移動一次方格，循環此步驟若干次即可隨機打亂排列規則的數字，生成一個數字被隨意打亂的4*4的方陣
initGrids(){
let array=["left","up","right","down"];
for (let i = 0; i < 100; i++){
let randomIndex = Math.floor(Math.random() * 4);
let direction = array[randomIndex];
this.changeGrids(direction);
}
}
最後在函數onShow()中調用函數initGrids()
onShow() {
this.initGrids();
this.drawGrids();
}
至此，運行便可得出上述界面佈局了。
實現計時器、從新開始和遊戲成功
做者：wx5fa5fef168fd0
想了解更多內容，請訪問： 51CTO和華爲官方戰略合做共建的鴻蒙技術社區https://harmonyos.51cto.com