#2020征文-手表#深鸿会深大小组：HarmonyOS运动手表游戏合并 原创 精华

前言

此前已经为大家分享了黑白翻棋和数字华容道小游戏的开发思路，相信各位在学习完后会有一个想法：想把这两个游戏合并为一个，这样就能方便地玩了，今天就为大家带来这一开发思路，还没有学习前两个的读者建议先前往学习交流：黑白翻棋、数字华容道，同样是深鸿会深大小组学习完HarmonyOS后自行开发的一个鸿蒙demo，详细讲述了游戏合并的编写思路，内含详细解释，深鸿会深大学习小组是一群热衷于学习鸿蒙相关知识和开发鸿蒙相关应用的开发者们，我们的学习项目为：荔园Harmony，同时也欢迎与各位感兴趣的读者一起学习HarmonyOS开发，相互交流、共同进步。

概述
本个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，用于盛装所有的其他组件，然后在此基础容器中添加一个图片组件imaget类名为img，图片路径为/common/hm1.png

<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；然后编写img样式，left为指示距边界框左上角的以像素为单位的水平坐标，设定为8px，top为指示距边界框左上角的以像素为单位的垂直坐标，设定为50px，由于图片大小为450*358，所以width设定为450px，height设定为358px

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:450px;
    height:450px;
}
.img{
    left:8px;
    top:50px;
    width:450px;
    height: 358px;
}

5. 在index.js中描述页面中的组件交互情况：由于暂不需要组件交互，将title：‘Word’删除即可

export default {
    data: {

    }
}

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>​

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'
               });
           }
       }​

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文件里，代码可以在这里找：黑白翻棋、数字华容道，并且打开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>​

4. 在index.css编写刚才添加组件的样式：首先编写stack的样式，width和height都设定为450px；然后编写bit的样式，top设定为338px，left设定为118px，width设定为210px，height设定为50px，background-color为背景颜色，设定为transparent（透明）

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

5. 在index.js中描述页面中的组件交互情况：我们需要导入router，编写点击按钮时所自动调用的函数startGame()，调用语句router.replace，跳转到game1

   import router from '@system.router';
   
   startGame(){
           router.replace({
               uri:'pages/game1/game1'
           });
       }​

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>​

2. 在game1.css中描述刚才添加的页面组件的样式：首先编写container2的样式，flex-direction、选择column（垂直方向从上到下），justify-content、选择center（项目位于容器的中心），align-items、选择center（元素在交叉轴居中），width、height、设定为450px、40px；然后编写bit2的样式，width、height分别设定为80px和30px，background-color设定为#AD9D8F，font-size设定为24px，margin-top设定为10px， margin-left:设定为10px

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

3. 在game1.js中描述页面中的组件交互情况：我们需要导入router，编写点击按钮时所自动调用的函数returnGame()，调用语句router.replace，跳转到index，并且要调用clearInterval清除计时器

   import router from '@system.router';
   
   returnGame(){
           router.replace({
               uri:'pages/index/index'
           });
           clearInterval(timer);
       }​

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也全部完成了。

结语

以上就是游戏合并代码的主要编写思路以及代码，源码将放在附件中，欢迎大家下载，感兴趣的读者可以自行跟着编写学习，相信你们也能够完成的。更多深鸿会深大小组学习项目可以查看荔园Harmony，也欢迎各位关注我的专栏【荔园Harmony基地】：荔园Harmony基地，鸿蒙开发者的学习分享，更多精彩内容会持续更新，如果有遇到什么问题，或者查找出其中的错误之处，或者能够优化代码和界面，也欢迎各位在评论区留言讨论，让我们一起学习进步！