HarmonyOS（鸿蒙）运动手表游戏app合并

前言
概述
正文
- 创建项目
- 实现初始界面的布局
- 实现初始界面的切换
- 实现初始界面切换到游戏界面
- 实现游戏界面切换到初始界面
心得
结语

前言

此次博客是深鸿会博主（Zzt_01-23）学习完HarmonyOS（鸿蒙）后，将前两个自行开发的鸿蒙小游戏合并为一个app，两个小游戏分别为黑白翻棋和数字华容道，此处将不再详细讲述这两个小游戏的开发，读者可以自行前往观看相应的博客：从零开发HarmonyOS（鸿蒙）运动手表小游戏——黑白翻棋、从零开发HarmonyOS（鸿蒙）运动手表小游戏——数字华容道，本博客详细讲述了游戏合并的开发思路，适合学习完前两篇博客的读者，使读者能自行将不同的小游戏合并为一个app。

概述

本个demo将从零开始完成两个鸿蒙小游戏在可穿戴设备上的编译合并为一个app，此处以运动手表为例，在项目中我们所使用到的软件为DevEco Studio，下载地址为：DevEco Studio下载、DevEco Studio安装教程，在项目中我们要实现的内容为两个鸿蒙小游戏合并为一个app。

在初始界面显示数字华容道游戏的初始界面，向左或者向右滑动便会切换到黑白翻棋的游戏的初始界面，再次向左或者向右滑动便会切换到数字华容道游戏的初始界面。

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用于描述页面中的组件是如何进行交互的。

实现初始界面的布局

首先我们显示数字华容道游戏和黑白翻棋游戏的初始界面

我们在index文件里编写数字华容道游戏的初始界面，所以我们还需要一个文件去编写黑白翻棋游戏的初始界面，故右击选择pages，选择New，再选择JS Page，将其命名为heibaifanqi，最后点击Finish即可，这样我们在右侧pages文件里就创建好了heibaifanqi文件用于编写黑白翻棋游戏的初始界面。
我们要编写两个游戏的初始界面，就需要插入初始界面的图片，这样就需要一个文件存放初始界面的图片，先右击选择default，选择New，再选择Directory,将其命名为common，最后点击OK即可，这样我们在右侧default文件里就创建好了common文件用于存放初始界面的图片。

我们还需要将初始界面的图片放入刚刚新建的文件common里，分别复制准备好的初始界面的图片，右击选择common，再选择Paste，将其命名为hm1和hm2，这样就完成所有的准备工作了。
在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>

在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: {}
}

实现初始界面的切换

华容道游戏初始界面向左或者向右滑动便会切换到黑白翻棋游戏初始界面，再次向左或者向右滑动便会切换到数字华容道游戏初始界面

首先打开config.json文件，在js栏的pages里添加"pages/heibaifanqi/heibaifanqi"
在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'});}}
}

实现初始界面切换到游戏界面

在各自游戏的初始界面点击开始游戏便会切换到各自对应的游戏界面

我们需要两个文件去编写数字华容道游戏和黑白翻棋游戏的游戏界面，故右击选择pages，选择New，再选择JS Page，分别将其命名为game1和game2，最后点击Finish即可，这样我们在右侧pages文件里就创建好了game1和game2两个文件用于编写数字华容道游戏和黑白翻棋游戏的游戏界面。
将数字华容道游戏的代码和黑白翻棋游戏的代码分别复制粘贴到game1文件和game2文件里，代码可以在这里找：从零开发HarmonyOS（鸿蒙）运动手表小游戏——数字华容道、从零开发HarmonyOS（鸿蒙）运动手表小游戏——黑白翻棋，并且打开config.json文件，在js栏的pages里添加"pages/game1/game1"和"pages/game2/game2"
在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'});}
}

实现游戏界面切换到初始界面

在各自游戏的界面点击返回便会切换到各自对应的初始界面

在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（鸿蒙）开发。

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

HarmonyOS(鸿蒙)App项目实战（1）运动手表篇学习笔记
HarmonyOS(鸿蒙)APP项目实战(1)运动手表篇学习笔记前言概括创建项目创建主页面创建index中的组件设定index中组件的样式为主页面添加应有的功能创建倒计时页面创建da ...
2021最新HarmonyOS鸿蒙系统应用开发之基础入门教程到实战—持续更新（第三节：鸿蒙的技术特征）
第三节:鸿蒙的技术特征每篇内容都有视频讲解,可直接点击观看+关注,持续更新中 2021最新HarmonyOS鸿蒙系统应用开发之基础入门教程到实战-持续更新(第二节:鸿蒙OS系统分布式操作) 硬件互助 ...
华为HarmonyOS鸿蒙系统介绍,华为鸿蒙OS系统怎么样华为HarmonyOS鸿蒙系统介绍
华为鸿蒙OS系统怎么样?华为在8月9日的2019华为开发者大会上正式发布了华为HarmonyOS鸿蒙系统,大家知道这个系统具体是用在哪些产品上的吗?有哪些功能呢?能兼容别的系统吗?下面小编为大家带来了 ...
王姨劝我学HarmonyOS鸿蒙2.0系列教程之三Ability概述调用方法！
原创PDF |<Android 深入系统完全讲解>免费开源,可能价值百万! 王姨劝我学HarmonyOS鸿蒙2.0系列教程之一环境搭建&&跑起来模拟器! 王姨劝我学Harm ...
苹果和华为鸿蒙,苹果的homeOSx和华为鸿蒙，两豪杰狭路相逢
原标题:苹果的homeOSx和华为鸿蒙,两豪杰狭路相逢前几天发表的鸿蒙系统,说明了分布式系统和万物联系在智能家居领域的具体应用.基于软总线概念的鸿蒙操作系统,让智能手机和智能硬件直接访问和调用各自的 ...
HarmonyOS鸿蒙学习笔记（12）@Link的作用
通过HarmonyOS鸿蒙学习笔记(5)@State作用说明和简单案例一文我们知道@State修饰的变量发生变化时,会刷新相关页面更新UI.如果是子组件想要改变父组件的状态从而刷新UI改怎么办呢?比如 ...
3.5【HarmonyOS鸿蒙开发】组件RadioButton和RadioContainer
3.5[HarmonyOS鸿蒙开发]组件RadioButton和RadioContainer 作者:韩茹公司:程序咖(北京)科技有限公司鸿蒙巴士专栏作家一.RadioButton RadioBu ...
科技鸿蒙系统一千章,第一千六百零七章鸿蒙紫气，成圣之机（上）
文学迷 > 玄幻魔法 > 天命神相 > 第一千六百零七章鸿蒙紫气,成圣之机 (上) 第一千六百零七章鸿蒙紫气,成圣之机功德金身只要达到了八十一重天,大圆满的境界,实力堪混元大罗 ...
（1.3）HarmonyOS鸿蒙启动程序运行流程
程序启动运行流程: ①解析config.json文件 ②初始化 ③获取入口Ability的全类名(config.json里的module里的mainAbility) ④找到Ability并运行 ⑤运行 ...
HarmonyOS(鸿蒙系统)体系
HarmonyOS(鸿蒙系统) 鲲鹏昇腾 EulerOS(欧拉系统) 仓颉 HarmonyOS(鸿蒙系统)体系 Harmonyos官网 HarmonyOS Developer HarmonyOS 鸿 ...

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