成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

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

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

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

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

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

前言

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

概述

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

在初始界面中顯示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”，方陣下方有一個“重新開始”的按鈕。


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

  1. <div class="container" > 
  2.     <text class="seconds"> 
  3.         當前秒數：{{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中為當前秒數currentSeconds賦值為0.0

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

 然后在文件開頭定義一個全局變量context，定義一個全局變量的二維數組grids，其中的值為1至15和0，定義全局常量方格的邊長SIDELEN為70，方格的間距MARGIN為5，創建一個onReady()函數，用于定義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. } 

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

  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.     } 

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

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

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


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

  1. 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()

  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. } 

 然后添加一個函數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的方陣

  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. } 

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

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

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

實現計時器、重新開始和游戲成功

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

 


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

  1. <div class="container" > 
  2.     <text class="seconds"> 
  3.         當前秒數：{{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函數中給isShow賦值為false，將開頭的全局變量grids賦值刪除，增加一個函數onInit()給grids賦值，并調用函數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，在函數onShow()中增加一個計時器setInterval()，其中有兩個參數，第一個參數為調用的函數，第二個參數為每隔多長時間調用一次函數，單位為毫秒，再定義調用的函數run()，用于每次currentSeconds加0.1，parseFloat是使字符串轉換為單精度浮點數，至此計時器便完成了

  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. } 

 創建一個函數gameover()判斷數字是否有順序地排列好即判斷游戲是否成功，循環判斷當前二維數組的數值是否等于有順序排列好的二維數組的數值即可判斷游戲是否成功，當游戲成功時返回true，否則返回false，在函數中swipeGrids(event)調用函數gameover()，當返回值為true時將isShow賦值為true，使游戲成功界面顯示在最上方，并且調用函數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. } 

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

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

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

結語

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

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

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

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

 

責任編輯：jianghua 來源： 鴻蒙社區
鴻蒙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環境搭建

2020-12-18 11:05:25

鴻蒙HarmonyOS游戲

2021-11-02 14:55:42

鴻蒙HarmonyOS應用

2021-10-22 19:41:01

鴻蒙HarmonyOS應用

2021-08-25 09:54:51

鴻蒙HarmonyOS應用

2021-10-09 14:49:50

鴻蒙HarmonyOS應用

2020-12-14 11:44:29

開發js智能手表wearablewea

2024-09-27 08:51:58

2012-11-04 14:54:24

2021-01-12 12:16:55

鴻蒙HarmonyOS游戲

2013-10-15 09:48:03

C++Lambda函數式編程

2014-11-05 16:37:54

2022-04-13 11:49:37

HarmonyOS操作系統鴻蒙

2022-04-14 11:35:01

HarmonyOS手表Demo操作系統
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板： 日韩欧美一级 | 日韩在线精品强乱中文字幕 | 欧美一级片中文字幕 | 精品国产一区二区在线 | 欧美日韩久久精品 | 欧美日韩精品一区二区三区四区 | 婷婷综合五月天 | 国产在线精品一区二区 | 亚洲福利网站 | 婷婷国产一区 | av在线播放一区二区 | 一区二区三区av | 91久久夜色精品国产网站 | 精品在线看| 国产高清在线 | 成人影院在线视频 | 黄色片网站在线观看 | 久久久精品影院 | 欧美一级黄色片 | 日韩第一夜 | 中文字幕高清av | 凹凸日日摸日日碰夜夜 | 国产日韩欧美在线观看 | 四虎影视免费观看 | 天天射视频 | 91成人在线| 国产精品一区网站 | 超碰天天| 91中文在线观看 | 成人福利网站 | 国产精品人人做人人爽 | 奇米影视77 | 国产99久久久国产精品下药 | 日韩电影中文字幕 | 日日干天天操 | 99热精品在线观看 | 国产亚洲精品久久久久久牛牛 | 欧美亚洲国产一区 | 欧美专区在线观看 | 国产一区二区三区免费 | 两性午夜视频 |