从零实现HarmonyOS（鸿蒙）运动手表两个游戏的合并

前言

此次博客是深鸿会博主（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. 由于黑白翻棋游戏初始界面布局与华容道游戏初始界面布局类似，故就不一一叙述了，直接