HarmonyOS（鴻蒙）運動手錶遊戲app合併

前言

此次部落格是深鴻會博主（Zzt_01-23）學習完HarmonyOS（鴻蒙）後，將前兩個自行開發的鴻蒙小遊戲合併為一個app，兩個小遊戲分別為黑白翻棋和數字華容道，此處將不再詳細講述這兩個小遊戲的開發，讀者可以自行前往觀看相應的部落格：從零開發HarmonyOS（鴻蒙）運動手錶小遊戲——黑白翻棋、從零開發HarmonyOS（鴻蒙）運動手錶小遊戲——數字華容道，本部落格詳細講述了遊戲合併的開發思路，適合學習完前兩篇部落格的讀者，使讀者能自行將不同的小遊戲合併為一個app。

概述

本個demo將從零開始完成兩個鴻蒙小遊戲在可穿戴裝置上的編譯合併為一個app，此處以運動手錶為例，在專案中我們所使用到的軟體為DevEco Studio，下載地址為：DevEco Studio下載、DevEco Studio安裝教程，在專案中我們要實現的內容為兩個鴻蒙小遊戲合併為一個app。

1. 在初始介面顯示數字華容道遊戲的初始介面，向左或者向右滑動便會切換到黑白翻棋的遊戲的初始介面，再次向左或者向右滑動便會切換到數字華容道遊戲的初始介面。
   

2. 在各自遊戲的初始介面點選開始遊戲便會切換到各自對應的遊戲介面，在遊戲介面點選返回便會切換到對應的遊戲開始介面。

正文

建立專案

DevEco Studio下載安裝成功後，開啟DevEco Studio，點選左上角的File，點選New，再選擇New Project，選擇Lite Wearable選項，選擇預設的模板，然後選擇儲存路徑，將檔案命名為YouXi（檔名不能出現中文或者特殊字元，否則將無法成功建立專案檔案），最後點選Finish。


主要編寫的檔案為index.css、index.hml和index.js，開啟路徑如圖所示，index.hml用於描述頁面中包含哪些元件，index.css用於描述頁面中的元件都長什麼樣，index.js用於描述頁面中的元件是如何進行互動的。

實現初始介面的佈局

首先我們顯示數字華容道遊戲和黑白翻棋遊戲的初始介面

1. 我們在index檔案裡編寫數字華容道遊戲的初始介面，所以我們還需要一個檔案去編寫黑白翻棋遊戲的初始介面，故右擊選擇pages，選擇New，再選擇JS Page，將其命名為heibaifanqi，最後點選Finish即可，這樣我們在右側pages檔案裡就建立好了heibaifanqi檔案用於編寫黑白翻棋遊戲的初始介面。
   
   
2. 我們要編寫兩個遊戲的初始介面，就需要插入初始介面的圖片，這樣就需要一個檔案存放初始介面的圖片，先右擊選擇default，選擇New，再選擇Directory,將其命名為common，最後點選OK即可，這樣我們在右側default檔案裡就建立好了common檔案用於存放初始介面的圖片。
   
   
   我們還需要將初始介面的圖片放入剛剛新建的檔案common裡，分別複製準備好的初始介面的圖片，右擊選擇common，再選擇Paste，將其命名為hm1和hm2，這樣就完成所有的準備工作了。
   
   
   
3. 在index.hml中新增相應的頁面元件：
   首先建立一個基礎容器div類名為container，用於盛裝所有的其他元件

<div class="container" >
</div>

然後在此基礎容器中新增一個圖片元件imaget類名為img，圖片路徑為/common/hm1.png

<image src="/common/hm1.png" class="img"></image>

至此，index.hml檔案已經全部編寫完畢

<div class="container">
    <image src="/common/hm1.png" class="img"></image>
</div>

4. 在index.css中描述剛才新增的頁面元件的樣式：
   首先編寫container的樣式，flex-direction為容器主軸方向，選擇column（垂直方向從上到下），justify-content為容器當前行的主軸對齊格式，選擇center（專案位於容器的中心），align-items為容器當前行的交叉軸對齊格式，選擇center（元素在交叉軸居中），width、height分別為容器以畫素為單位的寬度和高度，都設定為450px

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:450px;
    height:450px;
}

然後編寫img樣式，left為指示距邊界框左上角的以畫素為單位的水平座標，設定為8px，top為指示距邊界框左上角的以畫素為單位的垂直座標，設定為50px，由於圖片大小為450*358，所以width設定為450px，height設定為358px

.img{
    left:8px;
    top:50px;
    width:450px;
    height: 358px;
}

至此，index.css檔案已經全部編寫完畢
5. 在index.js中描述頁面中的元件互動情況：
由於暫不需要元件互動，將title：‘Word’刪除即可

export default {
    data: {

    }
}

至此，index.jd檔案已經全部編寫完畢，執行即可得出數字華容道遊戲初始介面佈局了
6. 由於黑白翻棋遊戲初始介面佈局與華容道遊戲初始介面佈局類似，故就不一一敘述了，直接上原始碼
heibaifanqi.hml程式碼如下：

<div class="container">
    <image src="/common/hm2.png" class="img"></image>
</div>

heibaifanqi.css程式碼如下：

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:450px;
    height:450px;
}
.img{
    left: 80px;
    top: 70px;
    width:290px;
    height: 347px;
}

heibaifanqi.js程式碼如下：

export default {
    data: {

    }
}

實現初始介面的切換

華容道遊戲初始介面向左或者向右滑動便會切換到黑白翻棋遊戲初始介面，再次向左或者向右滑動便會切換到數字華容道遊戲初始介面

1. 首先開啟config.json檔案，在js欄的pages裡新增"pages/heibaifanqi/heibaifanqi"
   
2. 在index.hml中新增相應的頁面元件：
   在基礎容器div中新增一個swipe屬性，用於響應滑動事件，賦予一個所自動呼叫的函式changeGame

<div class="container" onswipe="changeGame">
    <image src="/common/hm1.png" class="img"></image>
</div>

至此，index.hml檔案已經全部編寫完畢
3. 在index.css中描述剛才新增的頁面元件的樣式：
這一部分不需要新增或修改頁面元件的樣式
4. 在index.js中描述頁面中的元件互動情況：
頁面跳轉語句為router.replace，為此我們需要匯入router，建立一個函式Game(direction)，引數為滑動方向，當滑動方向為左或者右時，呼叫語句router.replace，跳轉到heibaifanqi，再建立一個函式changeGame(event)，引數為一個事件，用於呼叫函式Game

import router from '@system.router';

changeGame(event){
        this.Game(event.direction);
    },
    Game(direction){
        if (direction == 'left' || direction == 'right'){
            router.replace({
                uri:'pages/heibaifanqi/heibaifanqi'
            });
        }
    }

至此，index.jd檔案已經全部編寫完畢，執行即可實現華容道遊戲初始介面向左或者向右滑動便會切換到黑白翻棋遊戲的初始介面
5. 黑白翻棋遊戲初始介面向左或者向右滑動便會切換到華容道遊戲初始介面和上述編寫方法類似，故就不一一敘述了，直接上原始碼
heibaifanqi.js程式碼如下：

<div class="container"  onswipe="changeGame">
    <image src="/common/hm2.png" class="img"></image>
</div>

heibaifanqi.css程式碼沒有更改的
heibaifanqi.js程式碼如下：

import router from '@system.router';

export default {
    data: {

    },
    changeGame(event){
        this.Game(event.direction);
    },
    Game(direction){
        if (direction == 'left' || direction == 'right'){
            router.replace({
                uri:'pages/index/index'
            });
        }
    }
}

實現初始介面切換到遊戲介面

在各自遊戲的初始介面點選開始遊戲便會切換到各自對應的遊戲介面

1. 我們需要兩個檔案去編寫數字華容道遊戲和黑白翻棋遊戲的遊戲介面，故右擊選擇pages，選擇New，再選擇JS Page，分別將其命名為game1和game2，最後點選Finish即可，這樣我們在右側pages檔案裡就建立好了game1和game2兩個檔案用於編寫數字華容道遊戲和黑白翻棋遊戲的遊戲介面。
   

2. 將數字華容道遊戲的程式碼和黑白翻棋遊戲的程式碼分別複製貼上到game1檔案和game2檔案裡，程式碼可以在這裡找：從零開發HarmonyOS（鴻蒙）運動手錶小遊戲——數字華容道、從零開發HarmonyOS（鴻蒙）運動手錶小遊戲——黑白翻棋，並且開啟config.json檔案，在js欄的pages裡新增"pages/game1/game1"和"pages/game2/game2"
   

3. 在index.hml中新增相應的頁面元件：
   我們需要在數字華容道上顯示一個按鈕，用於跳轉到數字華容道遊戲介面，故需要將圖片元件放到棧中，所以新增一個棧stack類名為stack，還需要一個按鈕元件button類名為bit，增加一個點選事件click，並且使圖片元件先進棧，按鈕元件後進棧，這樣就能達到預期效果了

<div class="container" onswipe="changeGame">
    <stack class="stack">
        <image src="/common/hm1.png" class="img"></image>
        <input type="button" class="bit" onclick="startGame"/>
    </stack>
</div>

至此，index.hml檔案已經全部編寫完成了
4. 在index.css編寫剛才新增元件的樣式：
首先編寫stack的樣式，width和height都設定為450px

.stack{
    width: 450px;
    height: 450px;
}

然後編寫bit的樣式，top設定為338px，left設定為118px，width設定為210px，height設定為50px，background-color為背景顏色，設定為transparent（透明）

.bit{
    top:338px;
    left:118px;
    width:210px;
    height:50px;
    background-color:transparent;
}

至此，index.css檔案已經全部編寫完畢
5. 在index.js中描述頁面中的元件互動情況：
我們需要匯入router，編寫點選按鈕時所自動呼叫的函式startGame()，呼叫語句router.replace，跳轉到game1

import router from '@system.router';

startGame(){
        router.replace({
            uri:'pages/game1/game1'
        });
    }

至此，index.js檔案已經全部編寫完畢，執行即可實現華容道遊戲初始介面點選開始遊戲便會切換到華容道遊戲介面
6. 黑白翻棋遊戲初始介面點選開始遊戲便會切換到黑白翻棋遊戲介面和上述編寫方法類似，故就不一一敘述了，直接上原始碼
heibaifanqi.hml程式碼如下：

<div class="container" onswipe="changeGame">
    <stack class="stack">
        <image src="/common/hm2.png" class="img"></image>
        <input type="button" class="bit" onclick="startGame"/>
    </stack>
</div>

heibaifanqi.css程式碼如下：

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:450px;
    height:450px;
}
.stack{
    width: 450px;
    height: 450px;
}
.img{
    left: 80px;
    top: 70px;
    width:290px;
    height: 347px;
}
.bit{
    top:358px;
    left:118px;
    width:210px;
    height:50px;
    background-color:transparent;
}

heibaifanqi.js程式碼如下：

import router from '@system.router';
export default {
    data: {

    },
    changeGame(event){
        this.Game(event.direction);
    },
    Game(direction){
        if (direction == 'left' || direction == 'right'){
            router.replace({
                uri:'pages/index/index'
            });
        }
    },
    startGame(){
        router.replace({
            uri:'pages/game2/game2'
        });
    }
}

實現遊戲介面切換到初始介面

在各自遊戲的介面點選返回便會切換到各自對應的初始介面

1. 在game1.hml中新增相應的頁面元件：
   我們需要再新增一個按鈕button類名為bit2，增加一個響應點選事件click和自動呼叫的函式returnGame，用於返回到遊戲初始介面，並且要使兩個按鈕水平排列，需要將這兩個按鈕另放到一個基礎容器div類名為container2中

<div class="container2">
        <input type="button" value="重新開始" class="bit1" onclick="restartGame"/>
        <input type="button" value="返回" class="bit2" onclick="returnGame"/>
    </div>

至此，game1.hml檔案已經全部編寫完畢
2. 在game1.css中描述剛才新增的頁面元件的樣式：
首先編寫container2的樣式，flex-direction、選擇column（垂直方向從上到下），justify-content、選擇center（專案位於容器的中心），align-items、選擇center（元素在交叉軸居中），width、height、設定為450px、40px

.container2{
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width:450px;
    height:40px;
}

然後編寫bit2的樣式，width、height分別設定為80px和30px，background-color設定為#AD9D8F，font-size設定為24px，margin-top設定為10px， margin-left:設定為10px

.bit2{
    width:80px;
    height:30px;
    margin-left: 10px;
    background-color:#AD9D8F;
    font-size:24px;
    margin-top:10px;
}

至此，game1.css檔案已經全部編寫完畢
3. 在game1.js中描述頁面中的元件互動情況：
我們需要匯入router，編寫點選按鈕時所自動呼叫的函式returnGame()，呼叫語句router.replace，跳轉到index，並且要呼叫clearInterval清除計時器

import router from '@system.router';

returnGame(){
        router.replace({
            uri:'pages/index/index'
        });
        clearInterval(timer);
    }

至此，game1.js檔案已經全部編寫完畢，執行即可實現華容道遊戲介面點選返回便會切換到華容道遊戲初始介面
4. 黑白翻棋遊戲介面點選返回便會切換到黑白翻棋遊戲初始介面和上述編寫方法類似，故就不一一敘述了，直接上原始碼
game2.hml修改和增加程式碼如下：

<div class="container2">
        <input type="button" value="重新開始" class="bit1" onclick="restartGame"/>
        <input type="button" value="返回" class="bit2" onclick="returnGame"/>
    </div>

game2.css增加程式碼如下：

.container2{
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width:450px;
    height:40px;
}
.bit2{
    width:80px;
    height:30px;
    margin-left: 10px;
    background-color:#AD9D8F;
    font-size:24px;
    margin-top:10px;
}

game2.js增加程式碼如下：

import router from '@system.router';

returnGame(){
        router.replace({
            uri:'pages/heibaifanqi/heibaifanqi'
        });
    }

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

心得

本個demo整體難度不高，涉及的元件或樣式都是很常見的，需要掌握圖片元件、頁面跳轉即可完成編寫，適合剛入門的讀者編寫與學習，其中元件學習可以前往官方文件檢視更詳細的介紹：官方文件。

結語

本次專案為博主學習了鴻蒙一些基礎後自行編寫完成的，感興趣的讀者可以自行跟著本部落格編寫，相信你們也能夠完成的。如果有遇到什麼問題，或者查詢出其中的錯誤之處，歡迎留言，本博主也歡迎與各位感興趣的讀者一起學習HarmonyOS（鴻蒙）開發。