#Dayu200体验官#OpenHarmony应用开发之弹球小游戏(1/2) 原创 精华

发布于 2022-6-29 17:17
浏览
2收藏

::: hljs-center
体验者:半个月亮团  学校:中原工学院
:::
  本篇文章主要说明的是在大禹200的开发板上,开发的一个弹球小游戏。以此体验大禹200对OpenHarmony操作系统的支持,以及OpenHarmony操作系统上应用开发。

1. 选择设备

  目前,能够承载OpenHarmony操作系统的开发板是有一些的,但是作为一穷二白的我想获取一个能用的还是有不少困难的。因此,与其说是选择设备,还不如说是设备没有选择。
  荣幸的是大禹体验官活动给了我们机会。所以,无论如何必须插入一条硬广告,广告词“大禹200将引领未来”。 拿到的大禹200的开发板子是下面这个样子的。如图1。
::: hljs-center

#Dayu200体验官#OpenHarmony应用开发之弹球小游戏(1/2)-开源基础软件社区
图1 大禹200开发板

:::

2. 升级系统

  OpenHarmony操作系统的版本更新是非常快的,为了获得更好的体验,拿到大禹200后的第一项工作是升级操作系统。升级系统其实就是把系统重新在开发板上烧录一下。

2.1 烧录前准备

  将设备连接电源线,以及USB设备烧写线,如图2所示。
::: hljs-center

#Dayu200体验官#OpenHarmony应用开发之弹球小游戏(1/2)-开源基础软件社区
图2 连接大禹200

:::

  到ci.openharmony.cn网站上选择对应的版本下载固件,http://ci.openharmony.cn/dailys/dailybuilds 如图3。
::: hljs-center

#Dayu200体验官#OpenHarmony应用开发之弹球小游戏(1/2)-开源基础软件社区
图3 固件下载页面

:::

2.2 烧录步骤

  安装 USB 驱动,这个过程比较简单,可以说是傻瓜式安装,这里跳过。
  打开瑞芯微开发烧写工具(可以自己下载安装),默认打开的是 Maskrom 模式,如图4所示。
::: hljs-center

#Dayu200体验官#OpenHarmony应用开发之弹球小游戏(1/2)-开源基础软件社区
图4 烧写工具

:::

  如果出现问题,说明需要进入loader模式,先按住recovery不要放,接着按一下reset释放,等待一两秒释放recovery按键,界面会加载出,发现一个LOADER设备,如图5。
::: hljs-center

#Dayu200体验官#OpenHarmony应用开发之弹球小游戏(1/2)-开源基础软件社区
图5 进入LOADER模式

:::

  接下来选择固件进行烧录,如图6。
::: hljs-center

#Dayu200体验官#OpenHarmony应用开发之弹球小游戏(1/2)-开源基础软件社区
图6 选择固件

:::

  点击执行按钮,开始烧写,直到完成,如图7。
::: hljs-center

#Dayu200体验官#OpenHarmony应用开发之弹球小游戏(1/2)-开源基础软件社区
图7 烧写完成

:::

  成功后,重启设备,即可进入新版本的OpenHarmony系统,如图8。
::: hljs-center

#Dayu200体验官#OpenHarmony应用开发之弹球小游戏(1/2)-开源基础软件社区
图8 OpenHarmony系统

:::

  至此,设备和鸿蒙系统都准好了,接下来可以开发我们的游戏了。

3. 创建项目

  开发鸿蒙应用需要下载华为提供的DevEco Studio,目前针对OpenHarmony的是DevEco Studio 3.0 Beta3 for OpenHarmony。下载地址为:https://developer.harmonyos.com/cn/develop/deveco-studio/。下载后,运行安装即可。
  安装完成DevEco Studio后,启动该集成开发环境,并通过向导创建项目。本弹球小游戏的项目结构如下:
::: hljs-center

#Dayu200体验官#OpenHarmony应用开发之弹球小游戏(1/2)-开源基础软件社区
图9 项目结构

:::

  其中,entry:OpenHarmony工程模块,编译构建生成一个Hap包。
  src > main > js:用于存放js源码。
  src > main > js > MainAbility:应用/服务的入口。
  src > main > js > MainAbility > i18n:用于配置不同语言场景资源内容,比如应用文本词条、图片路径等资源。
  src > main > js > MainAbility > pages:MainAbility包含的页面。
  src > main > js > MainAbility > app.js:承载Ability生命周期。
  src > main > resources:用于存放应用/服务所用到的资源文件,如图形、多媒体、字符串、布局文件等。
  base>element:包括字符串、整型数、颜色、样式等资源的json文件。每个资源均由json格式进行定义。
  base>media:多媒体文件,如图形、视频、音频等文件,支持的文件格式包括:.png、.gif、.mp3、.mp4等。
  src > main > config.json:模块配置文件,主要包含HAP包的配置信息、应用在具体设备上的配置信息以及应用的全局配置信息。
  entry > build-profile.json5:当前的模块信息、编译信息配置项,包括buildOption、targets配置等。
  entry > hvigorfile.js:模块级编译构建任务脚本,开发者可以自定义相关任务和代码实现。
  build-profile.json5:应用级配置信息,包括签名、产品配置等。
  hvigorfile.js:应用级编译构建任务脚本。
  需要说明的是,针对本文实现的打砖块小游戏,这里多数文件不用修改。

4. 具体实现弹球游戏

4.1 游戏效果

  打砖块小游戏主要有两个界面,第一个是进入游戏界面,第一个是玩游戏界面。如图10、11所示。
::: hljs-center

#Dayu200体验官#OpenHarmony应用开发之弹球小游戏(1/2)-开源基础软件社区
图10 进入界面
#Dayu200体验官#OpenHarmony应用开发之弹球小游戏(1/2)-开源基础软件社区
图11 玩游戏

:::

  进入界面的功能实现在项目的index目录中,包括index.css、index.hml和index.js三个文件。
  玩游戏的功能及控制功能实现在项目的second目录中,包括second.css、second.hml和second.js三个文件。如图12。
::: hljs-center

#Dayu200体验官#OpenHarmony应用开发之弹球小游戏(1/2)-开源基础软件社区
图12 项目功能实现文件

:::

  在基于JS的鸿蒙应用中,可以有多个页面(Pages),每一个页面有三个文件构成,分别是样式文件(css)、页面文件(hml)、脚本代码(js)。
  这里的打砖块游戏,第一个界面(图10)功能比较简单,主要是一个响应进入游戏按钮,第二界面(图11)为玩游戏界面,控制游戏过程,稍微复杂。这里重点说一下游戏控制基本思路。

4.2 游戏思路

  图11上半部分有一个放置砖块盒子,砖块在second.hml文件中创建,在second.js文件中根据其id名取出进行操作;下方放置小球和滑块并设置相应样式;底部防止两个按键“开始游戏”和“再来一局”。
  砖块是通过div表示的,由样式定义砖块的大小和颜色等。当判断出小球碰撞到砖块时,将砖块的visibility样式变为隐藏,达到砖块消失的效果,即砖块被打掉。
  当按下开始游戏按键时会触发小球运动的函数,采取每20毫秒返回一次的数据来定位小球的实时位置,从而达到小球运动轨迹的显现。小球在碰到砖块时会把砖块打掉并反弹,在碰到左、上、右边墙壁时会反弹,在碰到滑块时也会反弹,掉到底部则游戏结束。
  触摸滑块时会有三种事件被触发。开始触摸时,会提示“开始拖动”;拖拽过程中会使滑块跟随手指一起移动;结束拖拽时,会提示“拖动结束”。

4.3 实现基本过程

  1) 创建项目
  2) 创建page
  3) 实现代码
  4) 调试运行
  对于1)创建项目基本过程是打开DevEco Studio -> 选择创建项目(Create Project) -> 选择模板 -> 点击Next。如图13所示。
::: hljs-center

#Dayu200体验官#OpenHarmony应用开发之弹球小游戏(1/2)-开源基础软件社区
图13 创建项目

:::

  接着进入配置项目页面(Configure Your Project),输入项目名称(Project Name)等基本信息,由于这里采用的JS开发的,因此语言选择JS,最后点击完成(Finish)按钮即可完成项目的创建。如图14所示。
::: hljs-center

#Dayu200体验官#OpenHarmony应用开发之弹球小游戏(1/2)-开源基础软件社区
图14 填写项目基本信息

:::

  创建好的项目如图15所示,默认已经建立好了项目的基本结构,且已经创建了一个默认的起始页(index),不过代码还需要修改。
::: hljs-center

#Dayu200体验官#OpenHarmony应用开发之弹球小游戏(1/2)-开源基础软件社区
图15 创建的默认项目

:::

  接下来创建第二个界面(second),把鼠标发到pages上,点击右键,选择New -> Page,如图16所示。
::: hljs-center

#Dayu200体验官#OpenHarmony应用开发之弹球小游戏(1/2)-开源基础软件社区
图16 创建Page

:::

  在弹出的如图17所示的对话框中输入名称,然后点击完成(Finish)即可创建第二个界面(second)的基本代码文件结构。
::: hljs-center

#Dayu200体验官#OpenHarmony应用开发之弹球小游戏(1/2)-开源基础软件社区
图17 输入Page名称

:::

  至此,基本的项目文件基本结构已经创建成功,接下来需要实现玩游戏的逻辑了。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-6-29 17:22:18修改
2
收藏 2
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐