[文章]如何使用HarmonyOS实现一个带有儿童模式的简单小游戏

1. 介绍      本文将介绍合成HarmonyOS小游戏，如下图所示，按照从左到右的顺序，相同的图形碰撞合成下一个图形，最终合成HarmonyOS图形。
  
效果图预览：

另外，我们新增了儿童模式，授权后才可以进行游戏。效果图展示：

   
2. 搭建HarmonyOS环境   我们首先需要完成HarmonyOS开发环境搭建，可参照如下步骤进行。

• 安装DevEco Studio，详情请参考下载和安装软件。
• 设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：
  
  • 如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作。
  • 如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境。
    
• 开发者可以参考以下链接，完成设备调试的相关配置：
  
  • 使用真机进行调试
  • 使用模拟器进行调试
    

   
3. 代码结构解读      
工程的结构图和相关描述如下：

• gif：显示gif图片播放的功能。
• model
  
  • Product：图形模型。
    
• service
  
  • ProductService：提供图形运动逻辑功能。
    
• slice
  
  • MainAbilitySlice：首页页面入口。
  • SmartWatchSlice：服务端控制类。
    
• view
  
  • ProductContainer：自定义Component类，用于画布绘制功能。
    
• utils
  
  • ComposeUtil：图形碰撞、合成、重叠、掉落的判断。
  • ImageUtil：图片资源加载。
  • NumbersUtil：常量类。
  • DialogUtil：对话框类。
  • LogUtils：log日志类。
  • PermissionsUtils：权限类。
    
• MainAbility：主页面。
• resources/base/layout
  
  • ability_main.xml：首页入口布局，用于显示游戏界面。
  • ability_smart_watch.xml：手表端授权布局。
  • dialog_comfirm.xml：对话框确认布局。
  • dialog_gif.xml：显示gif图片的布局。
  • exit_dialog.xml：3秒后退出应用的对话框布局。
  • toast_layout.xml：Toast布局。
    
• resources/media：product0.png~product6.png为上节的图片资源，firework.gif为gif图片资源。
  

   
4. 代码主线分析      
下面几张图描述了游戏开始时，第一个图形运动到停止后，再出现下一个图形的一种轨迹：

• 定义图形的属性
  新建Product类，用来定义图形的属性。需要定义：要显示的图形对象PixelMapHolder、图形的半径radius、图形的等级level(用于区分不同的图形)，以及图形的圆心坐标和其在x、y方向上的速度。代码如下：
  
  1. public class Product {
     
  2.     // 半径
     
  3.     private int radius;
     
  4.     // 用于绘制的图像
     
  5.     private PixelMapHolder pixelMapHolder;
     
  6.     // 等级
     
  7.     private int level;
     
  8.     // X轴坐标
     
  9.     private float centerX;
     
  10.     // Y轴坐标
      
  11.     private float centerY;
      
  12.     // x方向的速度
      
  13.     private float speedX;
      
  14.     // y方向的速度
      
  15.     private float speedY;
      
  16. }

  复制代码
  
  
• 定义图形的数据处理
  新建ProductService类，定义一个集合数据，用于存储在屏幕中出现的所有图形数据，并定义dealProduct()方法处理数据计算功能。部分代码如下：
  
  1. public class ProductService {
     
  2.     // 所有绘制图形数据集合
     
  3.     private List productList;
     
  4. 
     
  5.     public void dealProduct() {
     
  6.         // 处理核心业务
     
  7.     }
     
  8. }

  复制代码
  
  
• 定义图形显示的视图
  通过继承Component类，实现Component.DrawTask接口，并重写onDraw方法，绘制图形。从数据层ProductService类中得到图形集合数据，然后调用Canvas类的drawPixelMapHolder()方法绘制图形，再使用EventHandler在子线程中执行任务，该任务主要是做相应的数据计算功能，然后调用invalidate()方法后会再次执行onDraw方法绘制图形。新建ProductContainer类，部分代码如下：
  
  1. public class ProductContainer extends Component implements Component.DrawTask {
     
  2.     private ProductService productService;
     
  3.     private EventHandler runHandler;
     
  4. 
     
  5.     [url=home.php?mod=space&uid=2735960]@Override[/url]
     
  6.     public void onDraw(Component component, Canvas canvas) {
     
  7.         // 从数据层得到所有图形集合
     
  8.         List<Product> products = productService.getProductList();
     
  9.         // 绘制所有图形
     
  10.         for (Product product : products) {
      
  11.             canvas.drawPixelMapHolder(product.getPixelMapHolder(),
      
  12.                     product.getCenterX() - product.getRadius(),
      
  13.                     product.getCenterY() - product.getRadius(), new Paint());
      
  14.         }
      
  15.         // 在子线程执行任务
      
  16.         if (runHandler != null) {
      
  17.             runHandler.postTask(runnable);
      
  18.         }
      
  19.     }
      
  20. 
      
  21.     private Runnable runnable = new Runnable() {
      
  22.         @Override
      
  23.         public void run() {
      
  24.             // 数据计算功能
      
  25.             productService.dealProduct();
      
  26.             // 更新UI进行绘制
      
  27.             getContext().getUITaskDispatcher().asyncDispatch(() -> {
      
  28.                 invalidate();
      
  29.             });
      
  30.         }
      
  31.     };
      
  32. }

  复制代码
  
  

5. 图形的生成与运动      加载图片资源随机生成图形

上面三张图描述了随机生成图形的可能情况，由图可知，每次创建新的图形只需要随机生成level值，然后从图片资源中获取对应的模型。生成新的的图形后，然后随机生成圆心的x坐标值，图形y方向的速度为10。部分代码如下：

1. public class ProductService {
   
2.     // 创建新的图形，并加入图形集合中
   
3.     private void createNewProduct() {
   
4.         // 随机生成level
   
5.         int level = (int) (Math.random() * NumbersUtil.VAULE_FOUR);
   
6.         Product newProduct = ImageUtil.generateProduct(context, level);
   
7.         // 随机生成x坐标值
   
8.         newProduct.setCenterX((float) (newProduct.getRadius() + Math.random() *
   
9.                 (Math.abs(width - NumbersUtil.VAULE_TWO * newProduct.getRadius()))));
   
10.         newProduct.setCenterY(newProduct.getRadius());
    
11.         newProduct.setSpeedX(0);
    
12.         newProduct.setSpeedY(ComposeUtil.BIT);
    
13.         // 将新生成的图形加入集合中
    
14.         productList.add(newProduct);
    
15.     }
    
16. }

复制代码

图形运动

上图描述了一个图形向下运动的轨迹，图形的移动主要是将图形的圆心x,y坐标值每次递增各自的x,y方向的速度值。部分代码如下：

1. private void updateView() {
   
2.     for (Product product : productList) {
   
3.         float centerX = product.getCenterX() + product.getSpeedX();
   
4.         float centerY = product.getCenterY() + product.getSpeedY();
   
5.         product.setCenterX(centerX);
   
6.         product.setCenterY(centerY);
   
7.     }
   
8. }
   

复制代码

所以图形静止，只要满足当图形的x,y方向速度的值均为0的时候。部分代码如下：

1. public class ComposeUtil {
   
2.     public static boolean isStopProduct(Product product) {
   
3.         if (product.getSpeedX() == 0 && product.getSpeedY() == 0) {
   
4.             return true;
   
5.         }
   
6.         return false;
   
7.     }
   
8. }

复制代码

6. 图形碰撞
下图描述了整个图形运动处理思路：

• 首先是从集合数据中获取运动的图形，如果集合中没有运动的图形，那么创建新的图形。
• 如果集合中有运动的图形，则判断该图形是否与其他图形发生了碰撞。
• 如果该图形没有与其他图形发生碰撞，则判断该图形是否到达画布的边界。
• 如果没有到达边界则继续运动，如果到达边界了则停止运动。
• 如果该图形与其他图形发生了碰撞，则判断该图形与碰撞的图形能否合成。
• 如果不能合成，则判断该图形是否满足碰撞停止条件。
• 如果满足则停止运动，如果不满足则改变该图形的速度，继续运动。
• 如果能合成，则合成新的图形。
  接下来分析图形碰撞检测、图形碰撞停止、图形碰撞变速。
  

图形碰撞检测如上图所示，两个图形若满足它们的的圆心距离小于它们半径的总和，则认为它们发生了碰撞。部分代码如下：
图形碰撞停止
上面两张图描述了图形运动到碰撞其他图形后停止运动的情况。满足碰撞的个数大于1个认为碰撞停止，或者碰撞个数为1同时图形与屏幕边界有接触，也认为碰撞停止。
碰撞停止时只需要设置图形的x、y方向的速度为0，这样图形就不会再运动了，部分代码如下：

图形碰撞变速上图描述了图形碰撞后改变该图形速度的轨迹，当碰撞的图形既不满足合成条件也不满足碰撞停止条件，就需要变更运动速度的方向与大小。部分代码如下：

7. 图形合成图形合成合成后引发的问题

• 周围没有碰撞的图形。
• 碰撞的图形个数只有1个。
• 碰撞的图形个数为两个，但都在当前图形的上方。
  

部分代码如下：
8. 儿童模式  显示设备
手机与手表通信

• 在config.json中的MainAbility下配置action内容为"action.smart"，代码如下
  
  1. "abilities": [
     
  2.   {
     
  3.     "skills": [
     
  4.       {
     
  5.         "actions": [
     
  6.           "action.system.home",
     
  7.           "action.smart"
     
  8.         ]
     
  9.       }
     
  10.     ],
      
  11.     "name": "com.huawei.codelab.MainAbility"
      
  12.   }
      
  13. ]

  复制代码
  
  
• 在MainAbility中配置action的页面为SmartWatchSlice，代码如下：
  
  1. @Override
     
  2. public void onStart(Intent intent) {
     
  3.     super.onStart(intent);
     
  4.     super.setMainRoute(MainAbilitySlice.class.getName());
     
  5.     addActionRoute("action.smart", SmartWatchSlice.class.getName());
     
  6. }

  复制代码
  
  
• 通过配置action启动该页面，同时设置远程设备id和分布式调度系统多设备启动的标识来启动远程FA，并将手机的设备id传到手表端。代码如下：
  

• 在手表端的SmartWatchSlice类中启动手机端FA，设置传入的远程设备remoteDeviceId和分布式调度系统多设备启动的标识来启动远程FA。代码如下：
  1. private void sendMessage(int type) {
     
  2.     Intent intent = new Intent();
     
  3.     Operation operation =
     
  4.             new Intent.OperationBuilder()
     
  5.                     .withDeviceId(remoteDeviceId) // 手机端设备ID
     
  6.                     .withBundleName(getBundleName()) // 手机端与手表端同一个应用，所以使用同一个bundle
     
  7.                     .withAbilityName(MainAbility.class.getName())
     
  8.                     .withFlags(Intent.FLAG_ABILITYSLICE_MULTI_DEVICE) // 分布式调度标识
     
  9.                     .build();
     
  10.     intent.setOperation(operation);
      
  11.     intent.setParam(CODE, type); // type为是否同意授权的标识
      
  12.     startAbility(intent);
      
  13. }

  复制代码
  
  
• 在config.json中配置MainAbility的启动模式为单例模式，代码如下：
  1. "abilities": [
     
  2.   {
     
  3.     "name": "com.huawei.codelab.MainAbility"
     
  4.     "launchType": "singleton"
     
  5.   }
     
  6. ]

  复制代码
  
  
• 当MainAbility设置为singleton模式时，并且MainAbility实例存在时，再调用startAbility()方法，会触发onNewIntent()方法的执行，在这里发送公共事件。代码如下：<
  1. @Override
     
  2. protected void onNewIntent(Intent intent) {
     
  3.     super.onNewIntent(intent);
     
  4.     // 发送公共事件
     
  5.     CommonEventManager.publishCommonEvent();
     
  6. }

  复制代码
  
  
• 最后在MainAbilitySlice类中注册公共事件并处理该事件即可。代码如下：
  1. // 注册公共事件
     
  2. CommonEventManager.subscribeCommonEvent(new EventSubscriber());
     
  3. 
     
  4. private class EventSubscriber extends CommonEventSubscriber {
     
  5.     @Override
     
  6.     public void onReceiveEvent(CommonEventData commonEventData) {
     
  7.         // 处理公共事件
     
  8.     }
     
  9. }
     

  复制代码
  
  

9. 最终实现效果  10. 恭喜你      

• Canvas绘制图形
• 线程间通信
• 图形合成思路分析
• 流转
  

11. 参考