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

鲸云夕陌 2020-12-01 13:41:29

700

分类专栏： HarmonyOS 文章标签：游戏 javascript 华为 app

最后发布:2020-12-01 13:41:29首次发布:2020-12-01 13:41:29

本文链接：https://blog.csdn.net/weixin_52542088/article/details/110378216

版权

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

点赞 2
评论
分享
x
海报分享

扫一扫，分享海报
收藏
打赏

打赏

鲸云夕陌

你的鼓励将是我创作的最大动力

C币余额

2C币 4C币 6C币 10C币 20C币 50C币

确定
举报
关注关注
一键三连
点赞Mark关注该博主, 随时了解TA的最新博文

已标记关键词清除标记

插入表情

还能输入1000个字符