自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

2020征文-手表深鴻會深大小組：鴻蒙HarmonyOS手表游戲—數(shù)字華容道

作者：佚名
系統(tǒng) OpenHarmony
現(xiàn)在為大家分享第二個小游戲的開發(fā)思路，也是一款十分經(jīng)典的小游戲——數(shù)字華容道，同樣是深鴻會深大小組學習完HarmonyOS后自行開發(fā)的一個鴻蒙demo，詳細講述了數(shù)字華容道的編寫思路，內含詳細解釋，同時也歡迎與各位感興趣的讀者一起學習HarmonyOS開發(fā)，相互交流、共同進步。

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

51CTO和華為官方戰(zhàn)略合作共建的鴻蒙技術社區(qū)

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

前言

此前已經(jīng)為大家分享了黑白翻棋小游戲的開發(fā)思路，感興趣的讀者可以前往學習交流：黑白翻棋，現(xiàn)在為大家分享第二個小游戲的開發(fā)思路，也是一款十分經(jīng)典的小游戲——數(shù)字華容道，同樣是深鴻會深大小組學習完HarmonyOS后自行開發(fā)的一個鴻蒙demo，詳細講述了數(shù)字華容道的編寫思路，內含詳細解釋，同時也歡迎與各位感興趣的讀者一起學習HarmonyOS開發(fā)，相互交流、共同進步。

概述

本個demo將從零基礎開始完成鴻蒙小游戲APP在可穿戴設備上的編譯，此處以運動手表為例，在項目中我們所使用到的軟件為DevEco Studio，下載地址為：DevEco Studio下載、DevEco Studio安裝教程，在項目中我們要實現(xiàn)的內容為數(shù)字華容道APP的開發(fā)。

在初始界面中顯示4*4的方陣，方陣中分布有隨意打亂的1至15的數(shù)字和一個空白方格，方陣上方增加一個計時器，顯示游戲進行的時間，單位為秒，方陣下方顯示一個“重新開始”的按鈕，為用戶提供重新開始游戲的機會。


向上、下、左、右任一方向滑動，空白方格周圍對應位置的方格便會隨之向對應的方向移動一格，計時器也會顯示游戲開始到當前的時間。


經(jīng)過若干次移動后，當所有的數(shù)字按順序排列后，則會彈出游戲成功的界面，再滑動也不會有任何變化，此時方陣上方的計時器停止計時，點擊“重新開始”的按鈕后則會重新返回步驟1界面所示。


正文

創(chuàng)建項目

DevEco Studio下載安裝成功后，打開DevEco Studio，點擊左上角的File，點擊New，再選擇New Project，選擇Lite Wearable選項，選擇默認的模板，然后選擇保存路徑，將文件命名為Game1(文件名不能出現(xiàn)中文或者特殊字符，否則將無法成功創(chuàng)建項目文件)，最后點擊Finish。


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


實現(xiàn)開始界面的布局

首先，我們要先畫出一個4*4的方陣，方陣中按照順序顯示1至15的數(shù)字，方陣上方顯示“當前秒數(shù)：0.0”，方陣下方有一個“重新開始”的按鈕。


1。在index.hml中添加相應的頁面組件：首先創(chuàng)建一個基礎容器div類名為container，用于盛裝所有的其他組件;然后在此基礎容器中添加一個文字組件text類名為seconds，且注明顯示的固定部分“當前秒數(shù)：”，為動態(tài)變換部分賦予一個名為currentSteps的變量，用于動態(tài)顯示游戲進行的秒數(shù);再添加一個畫布組件canvas類名為canvas，增加一個引用屬性ref，用來指定指向子元素或子組件的引用信息，該引用將注冊到父組件的$refs 屬性對象上，以便在此畫布上畫出4*4的方陣;最后添加一個普通按鈕組件，類名為bit，并賦值“重新開始”，用于重新開始游戲

  1. <div class="container" > 
  2.     <text class="seconds"> 
  3.         當前秒數(shù)：{{currentSeconds}} 
  4.     </text> 
  5.     <canvas class="canvas" ref="canvas" ></canvas> 
  6.     <input type="button" value="重新開始" class="bit"/> 
  7. </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

  1. .container { 
  2.     flex-direction: column; 
  3.     justify-content: center; 
  4.     align-items: center; 
  5.     width:450px; 
  6.     height:450px; 
  7. } 
  8. .seconds{ 
  9.     font-size: 18px; 
  10.     text-align:center; 
  11.     width:300px; 
  12.     height:20px; 
  13.     letter-spacing:0px; 
  14.     margin-top:10px; 
  15. } 
  16. .canvas{ 
  17.     width:305px; 
  18.     height:305px; 
  19.     background-color: #FFFFFF; 
  20. } 
  21. .bit{ 
  22.     width:150px; 
  23.     height:30px; 
  24.     background-color:#AD9D8F; 
  25.     font-size:24px; 
  26.     margin-top:10px; 
  27. } 

 3. 在index.js中描述頁面中的組件交互情況：首先在data中為當前秒數(shù)currentSeconds賦值為0.0

  1. data: { 
  2.         currentSeconds:'0.0', 
  3.     } 

 然后在文件開頭定義一個全局變量context，定義一個全局變量的二維數(shù)組grids，其中的值為1至15和0，定義全局常量方格的邊長SIDELEN為70，方格的間距MARGIN為5，創(chuàng)建一個onReady()函數(shù)，用于定義2d繪畫工具

  1. var grids=[[1, 2, 3, 4], 
  2.  
  3. [5, 6, 7, 8], 
  4.  
  5. [9, 10, 11, 12], 
  6.  
  7. [13, 14, 15, 0]]; 
  8.  
  9. var context; 
  10.  
  11. const SIDELEN = 70; 
  12.  
  13. const MARGIN = 5; 
  14.  
  15. onReady(){ 
  16.  
  17. context=this.$refs.canvas.getContext('2d'); 
  18.  
  19. } 

 再創(chuàng)建drawGrids()函數(shù)，先將grids的值利用toString()函數(shù)全部轉化為字符串，fillStyle為畫圖工具context的方格的顏色，方格的背景顏色定義為#BBADA0，數(shù)字的顏色定義為#000000，fillRect為畫圖工具context的畫圖矩形的大小，其中有四個參數(shù)，第一個參數(shù)指定矩形左上角的x坐標，第二個參數(shù)指定矩形左上角的y坐標，第三個參數(shù)指定矩形的高度，第四個參數(shù)指定矩形的寬度。font為為畫圖工具context的字體大小，定義為30px HYQiHei-65S，因為要出現(xiàn)一個空白的方格，所以需要添加一個判斷語句，當數(shù)字為0時不顯示數(shù)字。fillText為畫圖工具context的文本字體大小，其中有三個參數(shù)，第一個參數(shù)為繪制的文本，第二個參數(shù)指定文本左上角的x坐標，第三個參數(shù)指定文本左上角的y坐標，最后創(chuàng)建onShow()函數(shù)，用于調用drawGrids()函數(shù)

  1. onShow() { 
  2.         this.drawGrids(); 
  3.     }, 
  4.     drawGrids() { 
  5.         for (let row = 0; row < 4; row++) { 
  6.             for (let column = 0; column < 4; column++) { 
  7.                 let gridStr = grids[row][column].toString(); 
  8.  
  9.                 context.fillStyle = "#BBADA0"; 
  10.                 let leftTopX = column * (MARGIN + SIDELEN) + MARGIN; 
  11.                 let leftTopY = row * (MARGIN + SIDELEN) + MARGIN; 
  12.                 context.fillRect(leftTopX, leftTopY, SIDELEN, SIDELEN); 
  13.  
  14.                 context.font = "30px HYQiHei-65S"; 
  15.                 if (gridStr != "0") { 
  16.                     context.fillStyle = "#000000"; 
  17.                     let offsetX = (4 - gridStr.length) * (SIDELEN / 8); 
  18.                     let offsetY = (SIDELEN - 30) / 2; 
  19.                     context.fillText(gridStr, leftTopX + offsetX, leftTopY + offsetY); 
  20.                 } 
  21.             } 
  22.         } 
  23.     } 

 至此，運行即可得出上述界面布局了。

實現(xiàn)數(shù)字的隨機打亂和方格的移動

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


1. 在index.hml中添加相應的頁面組件：我們需要在畫布中添加一個swipe屬性，用于響應滑動事件，賦予一個所自動調用的函數(shù)swipeGrids

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

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

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

  1. swipeGrids(event) { 
  2.  
  3. this.changeGrids(event.direction); 
  4.  
  5. this.drawGrids(); 
  6.  
  7. }, 
  8.  
  9. changeGrids(direction) { 
  10.  
  11. let x; 
  12.  
  13. let y; 
  14.  
  15. for (let row = 0; row < 4; row++) { 
  16.  
  17. for (let column = 0; column < 4; column++) { 
  18.  
  19. if (grids[row][column] == 0) { 
  20.  
  21. x = row; 
  22.  
  23. y = column; 
  24.  
  25. break; 
  26.  
  27. } 
  28.  
  29. } 
  30.  
  31. } 
  32.  
  33. let temp; 
  34.  
  35. if(this.isShow==false){ 
  36.  
  37. if (direction == 'left' && (y + 1) < 4) { 
  38.  
  39. temp = grids[x][y + 1]; 
  40.  
  41. grids[x][y + 1] = grids[x][y]; 
  42.  
  43. grids[x][y] = temp; 
  44.  
  45. } else if (direction == 'right' && (y - 1) > -1) { 
  46.  
  47. temp = grids[x][y - 1]; 
  48.  
  49. grids[x][y - 1] = grids[x][y]; 
  50.  
  51. grids[x][y] = temp; 
  52.  
  53. } else if (direction == 'up' && (x + 1) < 4) { 
  54.  
  55. temp = grids[x + 1][y]; 
  56.  
  57. grids[x + 1][y] = grids[x][y]; 
  58.  
  59. grids[x][y] = temp; 
  60.  
  61. } else if (direction == 'down' && (x - 1) > -1) { 
  62.  
  63. temp = grids[x - 1][y]; 
  64.  
  65. grids[x - 1][y] = grids[x][y]; 
  66.  
  67. grids[x][y] = temp; 
  68.  
  69. } 
  70.  
  71. } 

 然后添加一個函數(shù)initGrids()，用于隨機打亂排列規(guī)則的數(shù)字，先創(chuàng)建一個一維數(shù)組變量array，賦值為上下左右四個方向"left",“up”,“right”,“down”，Math.random()函數(shù)是隨機[0,1)內的小數(shù)，Math.random() * 4是隨機[0,4)內的小數(shù)，Math.floor(x)為得出小于或等于x的最大整數(shù)，隨機生成一個數(shù)字，讀取數(shù)組array對應的值，調用函數(shù)this.changeGrids(direction)并將剛才的array對應的值傳入，便能移動一次方格，循環(huán)此步驟若干次便可隨機打亂排列規(guī)則的數(shù)字，生成一個數(shù)字被隨意打亂的4*4的方陣

  1. initGrids(){ 
  2.  
  3. let array=["left","up","right","down"]; 
  4.  
  5. for (let i = 0; i < 100; i++){ 
  6.  
  7. let randomIndex = Math.floor(Math.random() * 4); 
  8.  
  9. let direction = array[randomIndex]; 
  10.  
  11. this.changeGrids(direction); 
  12.  
  13. } 
  14.  
  15. } 

 最后在函數(shù)onShow()中調用函數(shù)initGrids()

  1. onShow() { 
  2.  
  3. this.initGrids(); 
  4.  
  5. this.drawGrids(); 
  6.  
  7. } 

 至此，運行即可得出上述界面布局了。

實現(xiàn)計時器、重新開始和游戲成功

最后我們要在方陣上方動態(tài)顯示游戲開始到當前的時間，并且當數(shù)字按順序排列后彈出“游戲成功”界面，點擊“重新開始”按鈕能夠重新隨機生成一個數(shù)字被隨意打亂的4*4的方陣，當前秒數(shù)置為0 ，且能夠重新開始計時，如圖所示：

 


1. 在index.hml中添加相應的頁面組件：為了使數(shù)字按順序排列后才顯示“游戲成功”界面，需要添加一個棧stack類名設定為stack，使畫布先進棧，“游戲成功”后進棧，這樣就能達到“游戲成功”界面顯示在畫布上方了;在棧stack組件中增加一個游戲成功的容器div類名為subcontainer，以isShow控制該容器是否進棧，當isShow為true時才進棧，增加文本組件text，類名gameover，并賦值“游戲成功”;最后為“重新開始”按鈕增加一個點擊事件click，所調用的函數(shù)為restartGame

  1. <div class="container" > 
  2.     <text class="seconds"> 
  3.         當前秒數(shù)：{{currentSeconds}} 
  4.     </text> 
  5.     <stack class="stack"> 
  6.         <canvas class="canvas" ref="canvas" onswipe="swipeGrids"></canvas> 
  7.         <div class="subcontainer" show="{{isShow}}"> 
  8.             <text class="gameover"> 
  9.                 游戲成功 
  10.             </text> 
  11.         </div> 
  12.     </stack> 
  13.     <input type="button" value="重新開始" class="bit" onclick="restartGame"/> 
  14. </div> 

 2. 在index.css中描述剛才添加的頁面組件的樣式：首先編寫stack的樣式，width、height都設定為320px，margin-top設定為10px;然后編寫subcontainer的樣式，left為指示距邊界框左上角的以像素為單位的水平坐標，top為指示距邊界框左上角的以像素為單位的垂直坐標，width、height分別設定為220px和130px，justify-content選擇center，align-items選擇center， background-color設定為#E9C2A6;最后編寫gameover的樣式，font-size設定為38px，color設定為black

  1. .stack{ 
  2.  
  3. width: 305px; 
  4.  
  5. height: 305px; 
  6.  
  7. margin-top: 10px; 
  8.  
  9. } 
  10.  
  11. .subcontainer { 
  12.  
  13. left:50px; 
  14.  
  15. top:95px; 
  16.  
  17. width: 220px; 
  18.  
  19. height: 130px; 
  20.  
  21. justify-content: center; 
  22.  
  23. align-items: center; 
  24.  
  25. background-color: #E9C2A6; 
  26.  
  27. } 
  28.  
  29. .gameover { 
  30.  
  31. font-size: 38px; 
  32.  
  33. color: black; 
  34.  
  35. } 

 3. 在index.js中描述頁面中的組件交互情況：首先在data函數(shù)中給isShow賦值為false，將開頭的全局變量grids賦值刪除，增加一個函數(shù)onInit()給grids賦值，并調用函數(shù)initGrids()和this.drawGrids() 

  1. var grids; 
  2.  
  3. data: { 
  4.  
  5. currentSeconds:0, 
  6.  
  7. isShow: false 
  8.  
  9. }, 
  10.  
  11. onInit() { 
  12.  
  13. grids=[[1, 2, 3, 4], 
  14.  
  15. [5, 6, 7, 8], 
  16.  
  17. [9, 10, 11, 12], 
  18.  
  19. [13, 14, 15, 0]]; 
  20.  
  21. this.initGrids(); 
  22.  
  23. this.drawGrids(); 
  24.  
  25. } 

 然后在開頭定義一個全局變量timer賦值為null，在函數(shù)onShow()中增加一個計時器setInterval()，其中有兩個參數(shù)，第一個參數(shù)為調用的函數(shù)，第二個參數(shù)為每隔多長時間調用一次函數(shù)，單位為毫秒，再定義調用的函數(shù)run()，用于每次currentSeconds加0.1，parseFloat是使字符串轉換為單精度浮點數(shù)，至此計時器便完成了

  1. var timer = null; 
  2.  
  3. onShow() { 
  4.  
  5. this.initGrids(); 
  6.  
  7. this.drawGrids(); 
  8.  
  9. timer = setInterval(this.run, 100); 
  10.  
  11. } 
  12.  
  13. run(){ 
  14.  
  15. this.currentSeconds = (Math.floor(parseFloat(this.currentSeconds) * 10+ 1) / 10).toString(); 
  16.  
  17. if(parseFloat(this.currentSeconds) % 1 == 0){ 
  18.  
  19. this.currentSeconds = this.currentSeconds + ".0"; 
  20.  
  21. } 
  22.  
  23. } 

 創(chuàng)建一個函數(shù)gameover()判斷數(shù)字是否有順序地排列好即判斷游戲是否成功，循環(huán)判斷當前二維數(shù)組的數(shù)值是否等于有順序排列好的二維數(shù)組的數(shù)值即可判斷游戲是否成功，當游戲成功時返回true，否則返回false，在函數(shù)中swipeGrids(event)調用函數(shù)gameover()，當返回值為true時將isShow賦值為true，使游戲成功界面顯示在最上方，并且調用函數(shù)clearInterval停止計時

  1. swipeGrids(event) { 
  2.  
  3. this.changeGrids(event.direction); 
  4.  
  5. this.drawGrids(); 
  6.  
  7. if(this.gameover()){ 
  8.  
  9. clearInterval(timer); 
  10.  
  11. this.isShow = true; 
  12.  
  13. } 
  14.  
  15. }, 
  16.  
  17. gameover(){ 
  18.  
  19. let originalgrids=[[1, 2, 3, 4], 
  20.  
  21. [5, 6, 7, 8], 
  22.  
  23. [9, 10, 11, 12], 
  24.  
  25. [13, 14, 15, 0]]; 
  26.  
  27. for (let row = 0; row < 4; row++) { 
  28.  
  29. for (let column = 0; column < 4; column++) { 
  30.  
  31. if (grids[row][column] != originalgrids[row][column]){ 
  32.  
  33. return false; 
  34.  
  35. } 
  36.  
  37. } 
  38.  
  39. } 
  40.  
  41. return true; 
  42.  
  43. } 

 最后創(chuàng)建點擊“重新開始”按鈕所自動調用的函數(shù)restartGame()，調用函數(shù)onInit()，重新隨機生成一個數(shù)字被隨意打亂的4*4的方陣，將isShow賦值為false，使“游戲成功”界面隱藏，將currentSeconds置為0，將time賦值為null，調用函數(shù)onShow()重新開始計時

  1. restartGame(){ 
  2.  
  3. this.currentSeconds = "0.0"; 
  4.  
  5. this.isShow = false; 
  6.  
  7. this.onShow(); 
  8.  
  9. } 

 至此，整個demo也全部完成了。

結語

以上就是數(shù)字華容道小游戲代碼的主要編寫思路以及代碼，源碼將放在附件中，歡迎大家下載，感興趣的讀者可以自行跟著編寫學習，相信你們也能夠完成的。如果有遇到什么問題，或者查找出其中的錯誤之處，或者能夠優(yōu)化代碼。

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

51CTO和華為官方戰(zhàn)略合作共建的鴻蒙技術社區(qū)

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

 

責任編輯：jianghua 來源： 鴻蒙社區(qū)
鴻蒙HarmonyOS
相關推薦

2020-12-22 11:20:36

鴻蒙HarmonyOS游戲

2020-12-14 09:58:28

鴻蒙HarmonyOS手表游戲

2020-12-23 09:58:37

HarmonyOSHAPAPP

2020-12-31 12:02:15

鴻蒙Hi3861環(huán)境搭建

2021-11-02 14:55:42

鴻蒙HarmonyOS應用

2021-08-25 09:54:51

鴻蒙HarmonyOS應用

2021-10-22 19:41:01

鴻蒙HarmonyOS應用

2020-12-18 11:05:25

鴻蒙HarmonyOS游戲

2021-10-09 14:49:50

鴻蒙HarmonyOS應用

2020-12-14 11:44:29

開發(fā)js智能手表wearablewea

2012-11-04 14:54:24

2024-09-27 08:51:58

2021-01-12 12:16:55

鴻蒙HarmonyOS游戲

2013-10-15 09:48:03

C++Lambda函數(shù)式編程

2014-11-05 16:37:54

2022-04-13 11:49:37

HarmonyOS操作系統(tǒng)鴻蒙

2017-09-25 16:55:35

點贊
收藏

51CTO技術棧公眾號