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

原子化服務(wù)卡片還原經(jīng)典小游戲—數(shù)字華容道

作者：木棉花HOS
開(kāi)發(fā) 前端
服務(wù)卡片也能玩游戲了，今天就來(lái)還原經(jīng)典小游戲——數(shù)字華容道。詳細(xì)講述了數(shù)字華容道在服務(wù)卡片上的開(kāi)發(fā)思路，內(nèi)含詳細(xì)注釋。趕緊動(dòng)手來(lái)開(kāi)發(fā)一張服務(wù)卡片，休閑時(shí)刻來(lái)一局!

[[419330]]

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

前言

服務(wù)卡片也能玩游戲了，今天就來(lái)還原經(jīng)典小游戲——數(shù)字華容道。詳細(xì)講述了數(shù)字華容道在服務(wù)卡片上的開(kāi)發(fā)思路，內(nèi)含詳細(xì)注釋。趕緊動(dòng)手來(lái)開(kāi)發(fā)一張服務(wù)卡片，休閑時(shí)刻來(lái)一局!

概述

老規(guī)矩，先上效果圖。

分別調(diào)出兩種類(lèi)型的服務(wù)卡片，效果如下：

【木棉花】原子化服務(wù)卡片還原經(jīng)典小游戲——數(shù)字華容道-鴻蒙HarmonyOS技術(shù)社區(qū)

點(diǎn)擊開(kāi)始按鈕，游戲頁(yè)面服務(wù)卡片的文本會(huì)隨機(jī)打亂，開(kāi)始進(jìn)行計(jì)時(shí)。點(diǎn)擊上下左右四個(gè)按鈕，文本會(huì)向?qū)?yīng)的方向移動(dòng)一格。

【木棉花】原子化服務(wù)卡片還原經(jīng)典小游戲——數(shù)字華容道-鴻蒙HarmonyOS技術(shù)社區(qū)

當(dāng)游戲結(jié)束時(shí)或者游戲頁(yè)面服務(wù)卡片被刪除時(shí)，控制頁(yè)面服務(wù)卡片會(huì)停止計(jì)時(shí)。

【木棉花】原子化服務(wù)卡片還原經(jīng)典小游戲——數(shù)字華容道-鴻蒙HarmonyOS技術(shù)社區(qū)

正文

一、創(chuàng)建一個(gè)空白的工程

1. 安裝和配置DevEco Studio 2.1 Release

DevEco Studio 2.1 Release下載、DevEco Studio 2.1 Release安裝

2. 創(chuàng)建一個(gè)Empty JS Phone應(yīng)用

DevEco Studio下載安裝成功后，打開(kāi)DevEco Studio，點(diǎn)擊左上角的File，點(diǎn)擊New，再選擇New Project，選擇Empty Ability(JS)選項(xiàng)，點(diǎn)擊Next按鈕。

【木棉花】原子化服務(wù)卡片還原經(jīng)典小游戲——數(shù)字華容道-鴻蒙HarmonyOS技術(shù)社區(qū)

將文件命名為MyCardGame(文件名不能出現(xiàn)中文或者特殊字符，否則將無(wú)法成功創(chuàng)建項(xiàng)目文件)，選擇保存路徑，選擇API5，設(shè)備勾選Phone，最后點(diǎn)擊Finish按鈕。

【木棉花】原子化服務(wù)卡片還原經(jīng)典小游戲——數(shù)字華容道-鴻蒙HarmonyOS技術(shù)社區(qū)

3. 創(chuàng)建兩個(gè)空白的服務(wù)卡片

在MyCarGame->entry->src->main->js中點(diǎn)擊右鍵，在彈出的菜單項(xiàng)中選擇New，再在彈出的子菜單項(xiàng)中選擇Service Widget。

【木棉花】原子化服務(wù)卡片還原經(jīng)典小游戲——數(shù)字華容道-鴻蒙HarmonyOS技術(shù)社區(qū)

選擇Image With Information。

【木棉花】原子化服務(wù)卡片還原經(jīng)典小游戲——數(shù)字華容道-鴻蒙HarmonyOS技術(shù)社區(qū)

1)在配置列表中，Service Widget Name中命名為ControlPage，Description中命名為T(mén)his is a control widget，Type選擇JS，JS Component Name中命名為ControlPage，Support Dimensions勾選2 * 4。

2)再重復(fù)上述操作創(chuàng)建第二個(gè)新的服務(wù)卡片，在配置列表中，Service Widget Name中命名為GamePage，Description中命名為T(mén)his is a game widget，Type選擇JS，JS Component Name中命名為GamePage，Support Dimensions勾選2 * 4。

【木棉花】原子化服務(wù)卡片還原經(jīng)典小游戲——數(shù)字華容道-鴻蒙HarmonyOS技術(shù)社區(qū)
【木棉花】原子化服務(wù)卡片還原經(jīng)典小游戲——數(shù)字華容道-鴻蒙HarmonyOS技術(shù)社區(qū)

4. 設(shè)置首卡片尺寸

在MyCarGame->entry->src->main->config.json中，將服務(wù)卡片ControlPage中defaultDimension的屬性值修改為2 * 4，將服務(wù)卡片GamePage中defaultDimension的屬性值修改為2 * 4。

  1. "forms": [ 
  2.           { 
  3.             "jsComponentName": "ControlPage", 
  4.             "isDefault": true, 
  5.             "scheduledUpdateTime": "10:30", 
  6.             "defaultDimension": "2*4", 
  7.             ...... 
  8.           }, 
  9.           { 
  10.             "jsComponentName": "GamePage", 
  11.             "isDefault": false, 
  12.             "scheduledUpdateTime": "10:30", 
  13.             "defaultDimension": "2*4", 
  14.             ...... 
  15.           } 
  16.         ] 

二、完善兩個(gè)服務(wù)卡片頁(yè)面布局

1. 完善控制服務(wù)卡片頁(yè)面布局

在MyCarGame->entry->src->main->js->ControlPage->pages->index->index.hml中將原有的容器代碼全部刪除。

添加一個(gè)基礎(chǔ)容器div，增加類(lèi)選擇器為class。添加一個(gè)基礎(chǔ)容器div，類(lèi)選擇器為class_text，內(nèi)部添加兩個(gè)text組件，類(lèi)選擇器均為text，第一個(gè)text組件的文本為“時(shí)間：”，第二個(gè)text組件的文本為{{time}}，即動(dòng)態(tài)綁定變量time，以顯示游戲的時(shí)間。

最后依次添加五個(gè)按鈕，按鈕上的文本分別為“上”、“左”、“右”、“開(kāi)始”和“下”，類(lèi)選擇器分別為btn_up、btn_left、btn_right、btn_start和btn_down，分別添加一個(gè)點(diǎn)擊事件click_up、click_left、click_right、start和click_down。其中“左”和“右”兩個(gè)按鈕置于類(lèi)選擇器為class_button的基礎(chǔ)容器div中，“開(kāi)始”和“下”兩個(gè)按鈕置于類(lèi)選擇器為class_button的基礎(chǔ)容器div中。

  1. <div class="class"> 
  2.     <div class="class_text"> 
  3.         <text class="text">時(shí)間：</text> 
  4.         <text class="text">{{time}}</text> 
  5.     </div> 
  6.     <button class="btn_up" onclick="click_up">上</button> 
  7.     <div class="class_button"> 
  8.         <button class="btn_left" onclick="click_left">左</button> 
  9.         <button class="btn_right" onclick="click_right">右</button> 
  10.     </div> 
  11.     <div class="class_button"> 
  12.         <button class="btn_start" onclick="btn_start">開(kāi)始</button> 
  13.         <button class="btn_down" onclick="click_down">下</button> 
  14.     </div> 
  15. </div> 

在MyCarGame->entry->src->main->js->ControlPage->pages->index->index.css中將原有的類(lèi)選擇器全部刪除。

各個(gè)類(lèi)選擇器配置如下：

  1. .class{ 
  2.     width: 100%; 
  3.     height: 100%; 
  4.     flex-direction: column; 
  5.     align-items: flex-start; 
  6.     background-color: antiquewhite; 
  7. } 
  8.  
  9. .class_text{ 
  10.     flex-direction: row; 
  11. } 
  12.  
  13. .text{ 
  14.     font-size: 30px; 
  15.     margin-top:3%; 
  16.     text-align: center; 
  17. } 
  18.  
  19. .btn_up{ 
  20.     width: 20%; 
  21.     height: 20%; 
  22.     margin-top: 3%; 
  23.     margin-left: 40%; 
  24.     align-items: center; 
  25. } 
  26.  
  27. .class_button{ 
  28.     flex-direction: row; 
  29. } 
  30.  
  31. .btn_left{ 
  32.     width: 20%; 
  33.     height: 20%; 
  34.     margin-top: 3%; 
  35.     margin-left: 20%; 
  36.     align-items: center; 
  37. } 
  38.  
  39. .btn_right{ 
  40.     width: 20%; 
  41.     height: 20%; 
  42.     margin-top: 3%; 
  43.     margin-left: 20%; 
  44.     align-items: center; 
  45. } 
  46.  
  47. .btn_start{ 
  48.     width: 20%; 
  49.     height: 20%; 
  50.     margin-top: 3%; 
  51.     margin-left: 10%; 
  52.     align-items: center; 
  53. } 
  54.  
  55. .btn_down{ 
  56.     width: 20%; 
  57.     height: 20%; 
  58.     margin-top: 3%; 
  59.     margin-left: 10%; 
  60.     align-items: center; 
  61. } 

在MyCarGame->entry->src->main->js->ControlPage->pages->index->index.json中將data原有的數(shù)據(jù)全部刪除，在data中將time初始化為“00:00:00”。

添加actions數(shù)組，actions數(shù)組是所有事件的集合，數(shù)組的每個(gè)屬性包括每個(gè)事件的名稱，名稱里面又含有事件的類(lèi)型“action”和攜帶的參數(shù)“params”?，F(xiàn)在為上述五個(gè)點(diǎn)擊事件分別配置屬性：

  1. { 
  2.   "data": { 
  3.     "time": "00:00:00" 
  4.   }, 
  5.   "actions": { 
  6.     "click_up": { 
  7.       "action": "message", 
  8.       "params": { 
  9.         "message": "click_up" 
  10.       } 
  11.     }, 
  12.     "click_left": { 
  13.       "action": "message", 
  14.       "params": { 
  15.         "message": "click_left" 
  16.       } 
  17.     }, 
  18.     "click_right": { 
  19.       "action": "message", 
  20.       "params": { 
  21.         "message": "click_right" 
  22.       } 
  23.     }, 
  24.     "click_down": { 
  25.       "action": "message", 
  26.       "params": { 
  27.         "message": "click_down" 
  28.       } 
  29.     }, 
  30.     "click_start": { 
  31.       "action": "message", 
  32.       "params": { 
  33.         "message": "click_start" 
  34.       } 
  35.     } 
  36.   } 
  37. } 

2. 完善控制服務(wù)卡片頁(yè)面布局

在MyCarGame->entry->src->main->js->GamePage->pages->index->index.hml中將原有的容器代碼全部刪除。

添加一個(gè)基礎(chǔ)容器div，增加類(lèi)選擇器為class。依次添加16個(gè)text組件，類(lèi)選擇器均為text，文本分別為{{text1}}、{{text2}}、……、{{text16}}，即分別動(dòng)態(tài)綁定一個(gè)變量。其中，每四個(gè)text組件置于類(lèi)選擇器為class_text的基礎(chǔ)容器div中。

  1. <div class="class"> 
  2.     <div class="class_text"> 
  3.         <text class="text">{{text1}}</text> 
  4.         <text class="text">{{text2}}</text> 
  5.         <text class="text">{{text3}}</text> 
  6.         <text class="text">{{text4}}</text> 
  7.     </div> 
  8.     <div class="class_text"> 
  9.         <text class="text">{{text5}}</text> 
  10.         <text class="text">{{text6}}</text> 
  11.         <text class="text">{{text7}}</text> 
  12.         <text class="text">{{text8}}</text> 
  13.     </div> 
  14.     <div class="class_text"> 
  15.         <text class="text">{{text9}}</text> 
  16.         <text class="text">{{text10}}</text> 
  17.         <text class="text">{{text11}}</text> 
  18.         <text class="text">{{text12}}</text> 
  19.     </div> 
  20.     <div class="class_text"> 
  21.         <text class="text">{{text13}}</text> 
  22.         <text class="text">{{text14}}</text> 
  23.         <text class="text">{{text15}}</text> 
  24.         <text class="text">{{text16}}</text> 
  25.     </div> 
  26. </div> 

在MyCarGame->entry->src->main->js->GamePage->pages->index->index.css中將原有的類(lèi)選擇器全部刪除。

各個(gè)類(lèi)選擇器配置如下：

  1. .class{ 
  2.     width: 100%; 
  3.     height: 100%; 
  4.     flex-direction: column; 
  5.     align-items: flex-start; 
  6. } 
  7.  
  8. .class_text{ 
  9.     flex-direction: row; 
  10. } 
  11.  
  12. .text{ 
  13.     width: 25%; 
  14.     height: 25%; 
  15.     text-color: black; 
  16.     font-size: 30px; 
  17.     background-color: aquamarine; 
  18.     text-align: center; 
  19. } 

在MyCarGame->entry->src->main->js->GamePage->pages->index->index.json中將data原有的數(shù)據(jù)全部刪除，在data中將text1、text2、……、text16初始化為“1”、“2”、……、“15”、“”。

  1. { 
  2.   "data": { 
  3.     "text1": "1", 
  4.     "text2": "2", 
  5.     "text3": "3", 
  6.     "text4": "4", 
  7.     "text5": "5", 
  8.     "text6": "6", 
  9.     "text7": "7", 
  10.     "text8": "8", 
  11.     "text9": "9", 
  12.     "text10": "10", 
  13.     "text11": "11", 
  14.     "text12": "12", 
  15.     "text13": "13", 
  16.     "text14": "14", 
  17.     "text15": "15", 
  18.     "text16": "" 
  19.   } 
  20. } 

三、響應(yīng)點(diǎn)擊事件

在MyCarGame->entry->src->main->java->com->test->mycargame->MainAbility.java中修改以下代碼。

1. 修改onCreateForm()方法

onCreateForm()方法在兩種情況被調(diào)用。第一種情況是上滑呼出卡片的時(shí)候，這時(shí)候上滑卡片的動(dòng)作就會(huì)調(diào)用一次onCreateForm()方法生成一張卡片;

第二種情形是長(zhǎng)按應(yīng)用，然后點(diǎn)擊"服務(wù)卡片",此時(shí)會(huì)顯示該應(yīng)用的所有卡片，每一張卡片都會(huì)回調(diào)一次onCreateForm()方法并生成一張對(duì)應(yīng)的卡片。當(dāng)選擇了其中一張卡片添加到桌面后，其他卡片回調(diào)onDeleteForm()方法來(lái)刪除該卡片。

為了保證控制頁(yè)面服務(wù)卡片和游戲頁(yè)面服務(wù)卡片只對(duì)對(duì)應(yīng)類(lèi)型卡片的第一張起作用，分別定義兩個(gè)long類(lèi)型的全局變量ControlPanelFormId和GamePanelFormId，并初始化為0。在onCreateForm()方法中，根據(jù)服務(wù)卡片的名字formName來(lái)判斷是哪種類(lèi)型的服務(wù)卡片，如果對(duì)應(yīng)的變量為0，即表示該種類(lèi)型的卡片還沒(méi)有生成，則使該卡片的id賦值給對(duì)應(yīng)的變量。

  1. public static long ControlPanelFormId = 0; 
  2.  public static long GamePanelFormId = 0; 
  3.  
  4.  protected ProviderFormInfo onCreateForm(Intent intent) { 
  5.      ...... 
  6.  
  7.      if(formName.equals("ControlPage")) { 
  8.          if(ControlPanelFormId == 0) { 
  9.              ControlPanelFormId = formId; 
  10.          } 
  11.      } 
  12.      if(formName.equals("GamePage")) { 
  13.          if(GamePanelFormId == 0) { 
  14.              GamePanelFormId = formId; 
  15.          } 
  16.      } 
  17.  
  18.      return formController.bindFormData(); 
  19.  } 

2. 修改onDeleteForm()方法

為了使卡片刪除后再生成卡片時(shí)，游戲仍然能夠繼續(xù)進(jìn)行，我們需要對(duì)onDeleteForm()方法進(jìn)行修改。刪除卡片時(shí)，判斷卡片的id和ControlPanelFormId、GamePanelFormId是否相同。如果相同，則說(shuō)明刪除的是響應(yīng)游戲功能的卡片，需要將對(duì)應(yīng)的變量賦值為0，等待下一次生成該種類(lèi)型的卡片。

  1. protected void onDeleteForm(long formId) { 
  2.      ..... 
  3.  
  4.      if(ControlPanelFormId == formId){ 
  5.          ControlPanelFormId = 0; 
  6.      } 
  7.      if(GamePanelFormId == formId){ 
  8.          GamePanelFormId = 0; 
  9.      } 
  10.  } 

3. 添加文本更新方法

為了響應(yīng)控制頁(yè)面服務(wù)卡片的上、下、左、右的點(diǎn)擊事件，從而使游戲頁(yè)面服務(wù)卡片的文本進(jìn)行更新操作，因此在響應(yīng)點(diǎn)擊事件前，先增加文本更新方法。

添加兩個(gè)int類(lèi)型的全局變量row_0和column_0，并初始化為4，以記錄空文本的位置。添加一個(gè)int[][]類(lèi)型的變量grids，并初始化為{{1,2,3,4},{5,6,7,8},{9,10,11,12},{13,14,15,0}}，以記錄游戲頁(yè)面服務(wù)卡片各位置上的文本。

添加一個(gè)名為upText的函數(shù)，形參為(String direction)。根據(jù)傳入的參數(shù)的值(click_up、click_left、click_right和click_down)，通過(guò)zsonObject.put(key, value)和updateForm(formId, formBindingData)對(duì)游戲頁(yè)面服務(wù)卡片的文本進(jìn)行更新。并且對(duì)變量grids也進(jìn)行同步更新。

  1. private static int row_0 = 4; 
  2.  private static int column_0 = 4; 
  3.  private static int[][] grids = {{1, 2, 3, 4}, 
  4.                                  {5, 6, 7, 8}, 
  5.                                  {9, 10, 11, 12}, 
  6.                                  {13, 14, 15, 0}}; 
  7.  
  8.  public void upText(String direction){ 
  9.      if(direction == "click_up"){ 
  10.          if(row_0 != 4){ 
  11.              try{ 
  12.                  ZSONObject zsonObject = new ZSONObject(); 
  13.                  zsonObject.put("text" + ((row_0 - 1) * 4 + column_0), Integer.toString(grids[row_0][column_0 - 1])); 
  14.                  zsonObject.put("text" + ((row_0) * 4 + column_0), ""); 
  15.                  FormBindingData formBindingData = new FormBindingData(zsonObject); 
  16.                  updateForm(GamePanelFormId, formBindingData); 
  17.                   
  18.                  int temp = grids[row_0][column_0 - 1]; 
  19.                  grids[row_0][column_0 - 1] = 0; 
  20.                  grids[row_0 - 1][column_0 - 1] = temp; 
  21.                  row_0++; 
  22.              } catch (Exception e){ 
  23.  
  24.              } 
  25.          } 
  26.      }else if(direction == "click_left"){ 
  27.          if(column_0 != 4){ 
  28.              try{ 
  29.                  ZSONObject zsonObject = new ZSONObject(); 
  30.                  zsonObject.put("text" + ((row_0 - 1) * 4 + column_0), Integer.toString(grids[row_0 - 1][column_0])); 
  31.                  zsonObject.put("text" + ((row_0 - 1) * 4 + column_0 + 1), ""); 
  32.                  FormBindingData formBindingData = new FormBindingData(zsonObject); 
  33.                  updateForm(GamePanelFormId, formBindingData); 
  34.                   
  35.                  int temp = grids[row_0 - 1][column_0]; 
  36.                  grids[row_0 - 1][column_0] = 0; 
  37.                  grids[row_0 - 1][column_0 - 1] = temp; 
  38.                  column_0++; 
  39.              }catch (Exception e){ 
  40.  
  41.              } 
  42.          } 
  43.      }else if(direction == "click_right"){ 
  44.          if(column_0 != 1){ 
  45.              try{ 
  46.                  ZSONObject zsonObject = new ZSONObject(); 
  47.                  zsonObject.put("text" + ((row_0 - 1) * 4 + column_0), Integer.toString(grids[row_0 - 1][column_0 - 2])); 
  48.                  zsonObject.put("text" + ((row_0 - 1) * 4 + column_0 - 1), ""); 
  49.                  FormBindingData formBindingData = new FormBindingData(zsonObject); 
  50.                  updateForm(GamePanelFormId, formBindingData); 
  51.  
  52.                  int temp = grids[row_0 - 1][column_0 - 2]; 
  53.                  grids[row_0 - 1][column_0 - 2] = 0; 
  54.                  grids[row_0 - 1][column_0 - 1] = temp; 
  55.                  column_0--; 
  56.              }catch (Exception e){ 
  57.  
  58.              } 
  59.          } 
  60.      }else if(direction == "click_down"){ 
  61.          if(row_0 != 1){ 
  62.              try{ 
  63.                  ZSONObject zsonObject = new ZSONObject(); 
  64.                  zsonObject.put("text" + ((row_0 - 1) * 4 + column_0), Integer.toString(grids[row_0 - 2][column_0 - 1])); 
  65.                  zsonObject.put("text" + ((row_0 - 2) * 4 + column_0), ""); 
  66.                  FormBindingData formBindingData = new FormBindingData(zsonObject); 
  67.                  updateForm(GamePanelFormId, formBindingData); 
  68.  
  69.                  int temp = grids[row_0 - 2][column_0 - 1]; 
  70.                  grids[row_0 - 2][column_0 - 1] = 0; 
  71.                  grids[row_0 - 1][column_0 - 1] = temp; 
  72.                  row_0--; 
  73.              }catch (Exception e){ 
  74.                   
  75.              } 
  76.          } 
  77.      } 
  78.  } 

4. 響應(yīng)上下左右四個(gè)按鈕的點(diǎn)擊事件

點(diǎn)擊事件的回調(diào)方法為onTriggerFormEvent()。在onTriggerFormEvent()方法中，通過(guò)zsonObject.getString接受事件的參數(shù)，先判斷GamePanelFormId不等于0，即已經(jīng)生成游戲頁(yè)面服務(wù)卡片，再根據(jù)參數(shù)的不同來(lái)調(diào)用函數(shù)upText。

  1. protected void onTriggerFormEvent(long formId, String message) { 
  2.      ...... 
  3.  
  4.      ZSONObject zsonObject = ZSONObject.stringToZSON(message); 
  5.      String direction = zsonObject.getString("message"); 
  6.  
  7.      if(GamePanelFormId != 0){ 
  8.          if (direction.equals("click_up")) { 
  9.              upText("click_up"); 
  10.          }else if(direction.equals("click_left")){ 
  11.              upText("click_left"); 
  12.          }else if(direction.equals("click_right")){ 
  13.              upText("click_right"); 
  14.          }else if(direction.equals("click_down")){ 
  15.              upText("click_down"); 
  16.          } 
  17.      } 
  18.  } 

5. 添加時(shí)間更新方法和文本打亂方法

為了響應(yīng)控制頁(yè)面服務(wù)卡片的開(kāi)始的點(diǎn)擊事件，從而使游戲頁(yè)面服務(wù)卡片的文本進(jìn)行打亂操作和控制頁(yè)面服務(wù)卡片的時(shí)間進(jìn)行更新操作，因此在響應(yīng)點(diǎn)擊事件前，先增加時(shí)間更新方法和文本打亂方法。

添加一個(gè)Timer類(lèi)型的全局變量timer，以進(jìn)行時(shí)間疊加更新。添加一個(gè)int類(lèi)型的全局變量time，以記錄當(dāng)前時(shí)間進(jìn)度。添加一個(gè)boolean類(lèi)型的全局變量k并初始化為false，以記錄當(dāng)前時(shí)間是否開(kāi)始累加。

添加一個(gè)名為run的函數(shù)。在函數(shù)體內(nèi)對(duì)變量time賦值為0，對(duì)變量k賦值為true。初始化變量timer，并添加字線程，使時(shí)間累加量time每隔一秒加1，并通過(guò)zsonObject.put(key, value)和updateForm(formId, formBindingData)對(duì)控制頁(yè)面服務(wù)卡片的時(shí)間進(jìn)行更新。

添加一個(gè)名為initialize的函數(shù)。對(duì)變量row_0和column_0賦值為0，grids賦值為{{1,2,3,4},{5,6,7,8},{9,10,11,12},{13,14,15,0}}，定義一個(gè)String[]類(lèi)型的變量array，并初始化為{“click_up”,“click_left”,“click_right”,“click_down”}。重復(fù)50次隨機(jī)抽取一個(gè)字符串，并調(diào)用函數(shù)upText對(duì)游戲頁(yè)面服務(wù)卡片的文本進(jìn)行打亂操作。然后判斷k為true時(shí)，則取消時(shí)間任務(wù)timer。最后調(diào)用函數(shù)run。

  1. private static Timer timer; 
  2.  private static int time; 
  3.  private static boolean k = false; 
  4.  
  5.  private void initialize(){ 
  6.      row_0 = 4; 
  7.      column_0 = 4; 
  8.      grids = new int[][]{{1, 2, 3, 4}, 
  9.                          {5, 6, 7, 8}, 
  10.                          {9, 10, 11, 12}, 
  11.                          {13, 14, 15, 0}}; 
  12.      String[] array = {"click_up","click_left","click_right","click_down"}; 
  13.  
  14.      for(int i = 0; i < 50; i++){ 
  15.          double random = Math.floor(Math.random() * 4); 
  16.          String direction = array[(int) random]; 
  17.          upText(direction); 
  18.      } 
  19.       
  20.      if(k){ 
  21.          timer.cancel(); 
  22.      } 
  23.      run(); 
  24.  } 
  25.  
  26.  private void run(){ 
  27.      time = 0; 
  28.      k = true; 
  29.      timer = new Timer(); 
  30.      timer.schedule(new TimerTask() { 
  31.          @Override 
  32.          public void run() { 
  33.              getUITaskDispatcher().asyncDispatch(()->{ 
  34.                  time++; 
  35.                  int hou = time / 3600; 
  36.                  int min = (time % 3600) / 60; 
  37.                  int sec = (time % 3600) % 60; 
  38.                  String str_hour = ""; 
  39.                  String str_min = ""; 
  40.                  String str_sec = ""; 
  41.                  if(hou < 10){ 
  42.                      str_hour = "0" + hou; 
  43.                  }else{ 
  44.                      str_hour = Integer.toString(hou); 
  45.                  } 
  46.                  if(min < 10){ 
  47.                      str_min = "0" + min; 
  48.                  }else{ 
  49.                      str_min = Integer.toString(min); 
  50.                  } 
  51.                  if(sec < 10){ 
  52.                      str_sec = "0" + sec; 
  53.                  }else{ 
  54.                      str_sec = Integer.toString(sec); 
  55.                  } 
  56.  
  57.                  try{ 
  58.                      ZSONObject zsonObject = new ZSONObject(); 
  59.                      zsonObject.put("time", str_hour + ":" + str_min + ":" + str_sec); 
  60.                      FormBindingData formBindingData = new FormBindingData(zsonObject); 
  61.                      updateForm(ControlPanelFormId, formBindingData); 
  62.                  } catch (Exception e){ 
  63.  
  64.                  } 
  65.              }); 
  66.          } 
  67.      }, 0, 1000); 
  68.  } 

6. 響應(yīng)開(kāi)始按鈕的點(diǎn)擊事件

點(diǎn)擊事件的回調(diào)方法為onTriggerFormEvent()。在onTriggerFormEvent()方法中，通過(guò)zsonObject.getString接受事件的參數(shù)，在判斷GamePanelFormId不等于0的里面，根據(jù)參數(shù)為click_start來(lái)調(diào)用函數(shù)initialize。

  1. protected void onTriggerFormEvent(long formId, String message) { 
  2.        ...... 
  3.  
  4.        if(GamePanelFormId != 0){ 
  5.            if (direction.equals("click_up")) { 
  6.                upText("click_up"); 
  7.            }else if(direction.equals("click_left")){ 
  8.                upText("click_left"); 
  9.            }else if(direction.equals("click_right")){ 
  10.                upText("click_right"); 
  11.            }else if(direction.equals("click_down")){ 
  12.                upText("click_down"); 
  13.            }else if(direction.equals("click_start")) { 
  14.                initialize(); 
  15.            } 
  16.        } 
  17.    } 

四、完善其他功能

1. 當(dāng)游戲頁(yè)面服務(wù)卡片被刪除時(shí)停止計(jì)時(shí)

在onDeleteForm()方法中的判斷GamePanelFormId==formId中添加一個(gè)判斷，如果k為true時(shí)，通過(guò)canel()方法停止計(jì)時(shí)，并且將k賦值為false。

  1. protected void onDeleteForm(long formId) { 
  2.     ...... 
  3.     if(ControlPanelFormId == formId){ 
  4.         ControlPanelFormId = 0; 
  5.     } 
  6.     if(GamePanelFormId == formId){ 
  7.         GamePanelFormId = 0; 
  8.         if(k){ 
  9.             timer.cancel(); 
  10.             k = false; 
  11.         } 
  12.     } 
  13. } 

2. 游戲結(jié)束時(shí)停止計(jì)時(shí)

添加一個(gè)名為gameover的函數(shù)，判斷girds的值是否為游戲成功的數(shù)值，若有一個(gè)不符合則返回false，否則返回true。

在函數(shù)upText中判斷函數(shù)gameover的返回值和k的值，如果均為真，則通過(guò)cancel()方法停止計(jì)時(shí)，并將k賦值為false。

  1. public void upText(String direction){ 
  2.       ...... 
  3.  
  4.       if(gameover()){ 
  5.           timer.cancel(); 
  6.           k = false; 
  7.       } 
  8.   } 
  9.  
  10.   private boolean gameover(){ 
  11.       int[][] Grids = new int[][]{{1, 2, 3, 4}, 
  12.                                   {5, 6, 7, 8}, 
  13.                                   {9, 10, 11, 12}, 
  14.                                   {13, 14, 15, 0}}; 
  15.  
  16.       for(int row = 0; row < 4; row++){ 
  17.           for(int column = 0; column < 4; column++){ 
  18.               if(grids[row][column] != Grids[row][column]){ 
  19.                   return false; 
  20.               } 
  21.           } 
  22.       } 
  23.  
  24.       return true; 
  25.   } 

寫(xiě)在最后

至此，整個(gè)項(xiàng)目就完成了，使用模擬器Mate 30運(yùn)行即可。

文章相關(guān)附件可以點(diǎn)擊下面的原文鏈接前往下載

MyCarGame.zip

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

 

責(zé)任編輯：jianghua 來(lái)源： 鴻蒙社區(qū)
鴻蒙HarmonyOS應(yīng)用
相關(guān)推薦

2021-10-22 19:41:01

鴻蒙HarmonyOS應(yīng)用

2021-11-02 14:55:42

鴻蒙HarmonyOS應(yīng)用

2020-12-11 12:27:35

鴻蒙HarmonyOS

2021-10-09 14:49:50

鴻蒙HarmonyOS應(yīng)用

2020-12-22 11:20:36

鴻蒙HarmonyOS游戲

2012-11-04 14:54:24

2013-10-15 09:48:03

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

2021-08-23 11:03:54

鴻蒙HarmonyOS應(yīng)用

2017-09-25 16:55:35

2022-07-08 14:53:46

掃雷小游戲鴻蒙

2021-01-12 12:16:55

鴻蒙HarmonyOS游戲

2022-08-25 21:41:43

ArkUI鴻蒙

2022-10-28 16:20:10

JS鴻蒙小游戲

2011-03-15 13:19:11

jQuery

2023-10-17 10:20:53

VueReact

2022-08-04 13:55:08

拼數(shù)字小游戲鴻蒙

2020-12-09 11:42:18

WiFi IoT鴻蒙開(kāi)發(fā)

2021-08-31 15:00:26

鴻蒙HarmonyOS應(yīng)用

2021-09-15 10:19:15

鴻蒙HarmonyOS應(yīng)用

2022-03-07 16:46:03

HarmonyOS鴻蒙操作系統(tǒng)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)