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

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

1. 选择设备

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

图1 大禹200开发板

:::

2. 升级系统

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

2.1 烧录前准备

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

图2 连接大禹200

:::

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

图3 固件下载页面

:::

2.2 烧录步骤

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

图4 烧写工具

:::

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

图5 进入LOADER模式

:::

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

图6 选择固件

:::

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

图7 烧写完成

:::

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

图8 OpenHarmony系统

:::

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

3. 创建项目

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

图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

图10 进入界面

图11 玩游戏

:::

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

图12 项目功能实现文件

:::

  在基于JS的OpenHarmony应用中，可以有多个页面（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

图13 创建项目

:::

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

图14 填写项目基本信息

:::

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

图15 创建的默认项目

:::

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

图16 创建Page

:::

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

图17 输入Page名称

:::

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