您現在的位置是：首頁 > 運動
HarmonyOS手錶遊戲——黑白翻棋
翻轉游戲棋怎麼玩
概述
本個demo將從零開始完成鴻織湯蒙小遊戲APP在可穿戴裝置上的編譯，此處以運動手錶為例，在專案中我們魔保量所使用到的軟體為DevEco Studio，下載地址為：
DevEco Studio下載
，在專案中我們要實現的內容套粒既為黑白翻棋APP的開發。
在初始介面中顯示7*7的棋盤，棋盤中黑白色塊為隨意打亂的，棋盤上面顯示遊戲翻轉的次數，棋盤下方顯示一個“重新開始”的按鈕，為使用者提供重新開始改遊戲。
點選7*7棋盤中任一色塊，其上下左右四個色塊也會跟著一起變色（在邊緣的色塊則只會改變其中若干個色塊的顏色），棋盤上方的當前步數則會相應依次增加。
經過若干次點選後，當所有的色塊都為白色時，則會彈出遊戲成功介面，此時再點選棋盤，不會有任何變化，點選“重新開始”的按鈕時則會重新返回步驟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，並賦值“重新開始”
當前步數：{{currentSteps}}
在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的棋盤，並且點選棋盤中任一色塊，其上下左右四個色塊也會跟著一起變色（在邊緣的色塊則只會改變其中若干個色塊的顏色），棋盤上方的當前步數則會相應依次增加，如圖所示：
為了使點選任意一個色塊時能得到其對應的二維陣列的下標，我們需要給每個色塊新增一個按鈕button，並增加一個點選事件click，分別給這些按鈕設定一個類名和點選按鈕所呼叫的函式然後為了使按鈕顯示在棋盤格子的上方，需要新增一個棧stack類名設定位stack，使畫布先進棧，按鈕後進棧，這樣就能達到預期效果了，index。hml程式碼如下：
當前步數：{{currentSteps}}
編寫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；
}
先增加一個函式change（x，y），接受二維陣列的下標，用來改變二維數字的值，當isShow為false才使二維陣列的值發生變化，這樣就能達到當遊戲成功時再點選色塊時顏色不再發生變化，如果值為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），接受二維陣列的下標，呼叫剛才編寫的函式change（x，y），改變其上下左右四個色塊對應的二維陣列的值，並且呼叫函式drawGrids（）重新畫圖實現顏色的變化，當isShow為false才使currentSteps加1，這樣就能達到當遊戲成功時再點選色塊時currentSteps不再發生變化
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）；
}
this。drawGrids（）；
if（this。isShow==false）{
this。currentSteps+=1；；
}
}
再編寫49個按鈕對應的49個函式，作用是讀取當前二維陣列位置的下標，並且呼叫函式changeOneGrids（x，y）
getgrid1（）{
this。changeOneGrids（0，0）；
}，
getgrid2（）{
this。changeOneGrids（0，1）；
}，
getgrid3（）{
this。changeOneGrids（0，2）；
}，
getgrid4（）{
this。changeOneGrids（0，3）；
}，
getgrid5（）{
this。changeOneGrids（0，4）；
}，
getgrid6（）{
this。changeOneGrids（0，5）；
}，
getgrid7（）{
this。changeOneGrids（0，6）；
}，
getgrid8（）{
this。changeOneGrids（1，0）；
}，
getgrid9（）{
this。changeOneGrids（1，1）；
}，
getgrid10（）{
this。changeOneGrids（1，2）；
}，
getgrid11（）{
this。changeOneGrids（1，3）；
}，
getgrid12（）{
this。changeOneGrids（1，4）；
}，
getgrid13（）{
this。changeOneGrids（1，5）；
}，
getgrid14（）{
this。changeOneGrids（1，6）；
}，
getgrid15（）{
this。changeOneGrids（2，0）；
}，
getgrid16（）{
this。changeOneGrids（2，1）；
}，
getgrid17（）{
this。changeOneGrids（2，2）；
}，
getgrid18（）{
this。changeOneGrids（2，3）；
}，
getgrid19（）{
this。changeOneGrids（2，4）；
}，
getgrid20（）{
this。changeOneGrids（2，5）；
}，
getgrid21（）{
this。changeOneGrids（2，6）；
}，
getgrid22（）{
this。changeOneGrids（3，0）；
}，
getgrid23（）{
this。changeOneGrids（3，1）；
}，
getgrid24（）{
this。changeOneGrids（3，2）；
}，
getgrid25（）{
this。changeOneGrids（3，3）；
}，
getgrid26（）{
this。changeOneGrids（3，4）；
}，
getgrid27（）{
this。changeOneGrids（3，5）；
}，
getgrid28（）{
this。changeOneGrids（3，6）；
}，
getgrid29（）{
this。changeOneGrids（4，0）；
}，
getgrid30（）{
this。changeOneGrids（4，1）；
}，
getgrid31（）{
this。changeOneGrids（4，2）；
}，
getgrid32（）{
this。changeOneGrids（4，3）；
}，
getgrid33（）{
this。changeOneGrids（4，4）；
}，
getgrid34（）{
this。changeOneGrids（4，5）；
}，
getgrid35（）{
this。changeOneGrids（4，6）；
}，
getgrid36（）{
this。changeOneGrids（5，0）；
}，
getgrid37（）{
this。changeOneGrids（5，1）；
}，
getgrid38（）{
this。changeOneGrids（5，2）；
}，
getgrid39（）{
this。changeOneGrids（5，3）；
}，
getgrid40（）{
this。changeOneGrids（5，4）；
}，
getgrid41（）{
this。changeOneGrids（5，5）；
}，
getgrid42（）{
this。changeOneGrids（5，6）；
}，
getgrid43（）{
this。changeOneGrids（6，0）；
}，
getgrid44（）{
this。changeOneGrids（6，1）；
}，
getgrid45（）{
this。changeOneGrids（6，2）；
}，
getgrid46（）{
this。changeOneGrids（6，3）；
}，
getgrid47（）{
this。changeOneGrids（6，4）；
}，
getgrid48（）{
this。changeOneGrids（6，5）；
}，
getgrid49（）{
this。changeOneGrids（6，6）；
}
最後是隨機生成一個色塊被打亂的7 7的棋盤，首先我們得先把二維陣列的下標放進一個列表中，Math。random（）函式是隨機［0，1）內的小數，Math。floor（x）為得出小於或等於x的最大整數，每次隨機生成一個數後，讀取剛才的列表對應的下標，呼叫函式changeOneGrids（x，y），重複此操作若干次，這樣就能隨機生成一個色塊被打亂的7*7的棋盤
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）；
}
}
至此，這一部分內容已經全部編寫完畢。
實現遊戲結束頁面
最後我們要實現當色塊的顏色全部為白色時彈出遊戲成功介面，並使按鈕“重新開始”能夠重新隨機生成隨機生成一個色塊被打亂的7*7的棋盤，當前步數置為0，如圖所示：
首先我們得在棧stack元件中增加一個遊戲成功的容器div類名為subcontainer，以isShow控制該容器是否進棧，增加文字元件text，類名gameover，並賦值“遊戲成功”，再為重新開始按鈕增加一個點選事件click，所呼叫的函式為restartGame
遊戲成功
編寫剛才增加元件的樣式，編寫subcontainer的樣式和gameover的樣式
。subcontainer {
left：50px；
top：95px；
width： 220px；
height： 130px；
justify-content： center；
align-items： center；
background-color： #E9C2A6；
}
。gameover {
font-size： 38px；
color： black；
}
首先給isShow賦值false，將開頭的全域性變數grids賦值刪除，增加一個函式給grids賦值，並呼叫函式initGrids（）
var grids；
data： {
currentSteps： 0，
isShow： false
}
onInit（） {
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］］；
this。initGrids（）；
}
增加一個函式gameover（），當棋盤所有色塊顏色為白色時返回true，否則返回false，即當二維陣列的值全為0時返回true，否則返回false
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（x，y）中添加當函式gameover（）為true時，將isShow賦值為true，使遊戲成功介面顯示在最上方，當isShow為false時，步數增加1
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）；
}
this。drawGrids（）；
if（this。isShow==false）{
this。currentSteps+=1；；
}
if（this。gameover（））{
this。isShow=true；
}
}
最後編寫重新按鈕對應的函式restartGame（），作用是是二維陣列、isShow和當前步數全部置為初始化介面
restartGame（）{
this。onInit（）；
this。drawGrids（）；
this。isShow = false；
this。currentSteps = 0；
}
至此，整個demo全部完成了。
推薦文章
- 兩性感情中：中年夫妻的冷暴力並不是“無性”，而是這三點
乍一聽，好像夫妻雙方的確需要冷靜一些，但你仔細一想：冷靜是雙方共同協商溝通好解決問題，而不是雙方不理不睬，透過一個人的沉默不溝通解決問題，這不是冷靜，這就是冷暴力... - 《小寡婦招夫記》我掙的錢全是娘子的，一路甜寵的種田文
成了親就要攢錢了林潛的師兄弟們覺得這陣子林潛有了人間煙火味，以前他不拿錢當回事，現在懂得賺錢了，還給人跑鏢...
- 老話二十句，凝結著做人智慧
人一旦作惡，就會比兇獸更狠毒...