#2020徵文-手錶#深鴻會深大小組：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”，棋盤下方有一個“重新開始”的按鈕，如圖所示：
首先在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>
在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;
}
在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程式碼如下：
<div class="container" >
<text class="steps">
當前步數：{{currentSteps}}
</text>
<stack class="stack">
<canvas class="canvas" ref="canvas" ></canvas>
<input type="button" class="bitgrid1" onclick="getgrid1"/>
<input type="button" class="bitgrid2" onclick="getgrid2"/>
<input type="button" class="bitgrid3" onclick="getgrid3"/>
<input type="button" class="bitgrid4" onclick="getgrid4"/>
<input type="button" class="bitgrid5" onclick="getgrid5"/>
<input type="button" class="bitgrid6" onclick="getgrid6"/>
<input type="button" class="bitgrid7" onclick="getgrid7"/>
<input type="button" class="bitgrid8" onclick="getgrid8"/>
<input type="button" class="bitgrid9" onclick="getgrid9"/>
<input type="button" class="bitgrid10" onclick="getgrid10"/>
<input type="button" class="bitgrid11" onclick="getgrid11"/>
<input type="button" class="bitgrid12" onclick="getgrid12"/>
<input type="button" class="bitgrid13" onclick="getgrid13"/>
<input type="button" class="bitgrid14" onclick="getgrid14"/>
<input type="button" class="bitgrid15" onclick="getgrid15"/>
<input type="button" class="bitgrid16" onclick="getgrid16"/>
<input type="button" class="bitgrid17" onclick="getgrid17"/>
<input type="button" class="bitgrid18" onclick="getgrid18"/>
<input type="button" class="bitgrid19" onclick="getgrid19"/>
<input type="button" class="bitgrid20" onclick="getgrid20"/>
<input type="button" class="bitgrid21" onclick="getgrid21"/>
<input type="button" class="bitgrid22" onclick="getgrid22"/>
<input type="button" class="bitgrid23" onclick="getgrid23"/>
<input type="button" class="bitgrid24" onclick="getgrid24"/>
<input type="button" class="bitgrid25" onclick="getgrid25"/>
<input type="button" class="bitgrid26" onclick="getgrid26"/>
<input type="button" class="bitgrid27" onclick="getgrid27"/>
<input type="button" class="bitgrid28" onclick="getgrid28"/>
<input type="button" class="bitgrid29" onclick="getgrid29"/>
<input type="button" class="bitgrid30" onclick="getgrid30"/>
<input type="button" class="bitgrid31" onclick="getgrid31"/>
<input type="button" class="bitgrid32" onclick="getgrid32"/>
<input type="button" class="bitgrid33" onclick="getgrid33"/>
<input type="button" class="bitgrid34" onclick="getgrid34"/>
<input type="button" class="bitgrid35" onclick="getgrid35"/>
<input type="button" class="bitgrid36" onclick="getgrid36"/>
<input type="button" class="bitgrid37" onclick="getgrid37"/>
<input type="button" class="bitgrid38" onclick="getgrid38"/>
<input type="button" class="bitgrid39" onclick="getgrid39"/>
<input type="button" class="bitgrid40" onclick="getgrid40"/>
<input type="button" class="bitgrid41" onclick="getgrid41"/>
<input type="button" class="bitgrid42" onclick="getgrid42"/>
<input type="button" class="bitgrid43" onclick="getgrid43"/>
<input type="button" class="bitgrid44" onclick="getgrid44"/>
<input type="button" class="bitgrid45" onclick="getgrid45"/>
<input type="button" class="bitgrid46" onclick="getgrid46"/>
<input type="button" class="bitgrid47" onclick="getgrid47"/>
<input type="button" class="bitgrid48" onclick="getgrid48"/>
<input type="button" class="bitgrid49" onclick="getgrid49"/>
</stack>
<input type="button" value="重新開始" class="bit" />
</div>
```
2、編寫stack的樣式，width、height都設定為320px，margin-top設定為10px；分別編寫每個按鈕的樣式，left為指示距邊界框左上角的以畫素為單位的水平座標，top為指示距邊界框左上角的以畫素為單位的垂直座標，border-color為設定邊框顏色，transparent指透明顏色
.stack{
width: 320px;
height: 320px;
margin-top: 10px;
}
.bitgrid1{
left:5px;
top:5px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid2{
left:50px;
top:5px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid3{
left:95px;
top:5px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid4{
left:140px;
top:5px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid5{
left:185px;
top:5px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid6{
left:230px;
top:5px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid7{
left:275px;
top:5px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid8{
left:5px;
top:50px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid9{
left:50px;
top:50px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid10{
left:95px;
top:50px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid11{
left:140px;
top:50px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid12{
left:185px;
top:50px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid13{
left:230px;
top:50px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid14{
left:275px;
top:50px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid15{
left:5px;
top:95px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid16{
left:50px;
top:95px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid17{
left:95px;
top:95px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid18{
left:140px;
top:95px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid19{
left:185px;
top:95px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid20{
left:230px;
top:95px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid21{
left:275px;
top:95px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid22{
left:5px;
top:140px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid23{
left:50px;
top:140px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid24{
left:95px;
top:140px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid25{
left:140px;
top:140px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid26{
left:185px;
top:140px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid27{
left:230px;
top:140px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid28{
left:275px;
top:140px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid29{
left:5px;
top:185px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid30{
left:50px;
top:185px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid31{
left:95px;
top:185px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid32{
left:140px;
top:185px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid33{
left:185px;
top:185px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid34{
left:230px;
top:185px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid35{
left:275px;
top:185px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid36{
left:5px;
top:230px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid37{
left:50px;
top:230px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid38{
left:95px;
top:230px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid39{
left:140px;
top:230px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid40{
left:185px;
top:230px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid41{
left:230px;
top:230px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid42{
left:275px;
top:230px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid43{
left:5px;
top:275px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid44{
left:50px;
top:275px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid45{
left:95px;
top:275px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid46{
left:140px;
top:275px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid47{
left:185px;
top:275px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid48{
left:230px;
top:275px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
.bitgrid49{
left:275px;
top:275px;
width:40px;
height:40px;
border-color:transparent;
background-color:transparent;
}
[解鎖更多章節>>>](https://harmonyos.51cto.com/posts/2006#bky)
作者：wx5fa5fef168fd0
想了解更多內容，請訪問： 51CTO和華為官方戰略合作共建的鴻蒙技術社群[https://harmonyos.51cto.com](https://harmonyos.51cto.com#bky)
[【有獎直播-HarmonyOS驅動框架除錯總結 火熱報名中！】](https://harmonyos.51cto.com/activity/26#bky)