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

2020-12-01 792

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

微信关注我们

原文链接：https://my.oschina.net/u/4837360/blog/4768242

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

【spark系列3】spark 3.0.1 AQE(Adaptive Query Exection)分析

AQE简介从spark configuration,到在最早在spark 1.6版本就已经有了AQE;到了spark 2.x版本，intel大数据团队进行了相应的原型开发和实践；到了spark 3.0时代，Databricks和intel一起为社区贡献了新的AQE spark 3.0.1中的AQE的配置配置项默认值官方说明分析 spark.sql.adaptive.enabled false 是否开启自适应查询此处设置为true开启 spark.sql.adaptive.coalescePartitions.enabled true 是否合并临近的shuffle分区（根据'spark.sql.adaptive.advisoryPartitionSizeInBytes'的阈值来合并）此处默认为true开启，分析见: 分析1 spark.sql.adaptive.coalescePartitions.initialPartitionNum (none) shuffle合并分区之前的初始分区数，默认为spark.sql.shuffle.partitions的值分析见:分析2 ...

2020-12-01

768

木兰语言重现项目中用到了不少正则表达式，其中不乏不那么一目了然的（Python实现）：标识符：r'\$?[_a-zA-Z\u4e00-\u9fa5][_a-zA-Z0-9\u4e00-\u9fa5]*' 双引号字符串： r'(\")((?<!\\)\\\1|.)*?\1' 字符串插值相关：r'\\$([^\\$]*)\\\)|`([^`]*)`' 由此想到是否有 API 能够构建正则表达式。找到 PythonVerbalExpressions，它首页上一个示例如下: verbal_expression. start_of_line(). find('http'). maybe('s'). find('://'). maybe('www.'). anything_but(' '). end_of_line() 对应正则: ^(http)(s)?(\:\/\/)(www\.)?([^\ ]*)$ 看起来的确比较可读，而且如果改为中文 API 的话，命名会更简短: 开头(). 寻找('http'). 或许('s'). 寻找('://'). 或许('www.'). 除了(' ')....

2020-12-01

594

资源下载

更多资源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。