玩嗨 OpenHarmony：基于 OpenHarmony 的小游戏：一起学做 FlappyBird

51CTO 开源基础软件社区 #跟着小白一起学鸿蒙# [番外]《一起学做FlappyBird》

1. 项目的背景

Flappy Bird是一款2013年发布并在2014年特别流行的一款横向卷抽游戏。玩家控制一只鸟，试图在绿色管道之间飞行而不撞到它们。

因为OpenHarmony具备多设备的窗口框架能力，可以支持不同设备类型的图形界面的灵活性。今天我们就一起看看如何能用OpenHarmony学习做个FlappyBird。本文中引用的图片资源均来自与Github。游戏的效果如下：

项目源码如下：

https://gitee.com/wshikh/ohosflappybird

2. HAP应用建立

2.1 HAP简介

HAP文件是在OpenHarmony系统下编译生成的可执行文件。HAP 包是由代码、资源、第三方库以及应用配置文件打包生成的模块包，主要分为两种类型：entry 和 feature。

OpenHarmony 用户应用程序包可以只包含一个基础的 entry 包，也可以包含一个基础的 entry 包和一个或多个功能型的 feature 包。

entry：应用的主模块，作为 OpenHarmony 应用的入口，提供了应用的基础功能。
feature：应用的动态特性模块，作为应用能力的扩展，可以根据用户的需求和设备的类型进行选择性安装。

2.2 HAP开发工具

本开发采用：DevEco Studio 3.0 Beta4

HUAWEI DevEco Studio For OpenHarmony是基于IntelliJ IDEA Community开源版本打造，面向OpenHarmony全场景多设备的一站式集成开发环境（IDE），DevEco Studio 3.0支持在HarmonyOS 3.0 Beta版上开发应用及服务，并已适配ArkUI声明式编程范式、ArkCompiler方舟编译，同时提供低代码开发、双向预览、全新构建工具、模拟器、调试调优、信息中心等功能，为开发者提供工程模板创建、开发、编译、调试、发布等E2E的OpenHarmony应用/服务开发。

下载链接: 

https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta

2.3 ETS

ETS是基于TS扩展的声明式开发范式的方舟开发框架是一套开发极简、高性能、跨设备应用的UI开发框架，支持开发者高效的构建跨设备应用UI界面。

基于TS扩展的声明式开发范式提供了一系列基础组件，这些组件以声明方式进行组合和扩展来描述应用程序的UI界面，并且还提供了基本的数据绑定和事件处理机制，帮助开发者实现应用交互逻辑。

@Entry                                //用@Entry装饰的自定义组件用作页面的默认入口组件，也可以理解为页面的根节点。   一个页面有且仅能有一个@Entry，只有被@Entry修饰的组件或者其子组件，才会在页面上显示。
@Component                            //@Component装饰的struct表示该结构体具有组件化能力，能够成为一个独立的组件，这种类型的组件也称为自定义组件，在build方法里描述UI结构。
struct Hello {                         //在声明式UI中，所有的页面都是由组件构成。组件的数据结构为struct
    @State myText: string = 'World'
    build() {                          //build函数用于定义组件的声明式UI描述，在build方法中以声明式方式进行组合自定义组件或系统内置组件。
        Column() {                     //Column：沿垂直方向布局的容器。
            Text('Hello')              //Text：显示一段文本的组件。
                .fontSize(30)
            Text(this.myText)
                .fontSize(32)
            Divider()                  //Divider：提供分隔器组件，分隔不同内容块/内容元素。
            Button() {                 //Button：按钮组件，可快速创建不同样式的按钮，通常用于响应用户的点击操作。
                Text('Click me')
                .fontColor(Color.Red)
            }.onClick(() => {
                this.myText = 'UI'
            })
            .width(500)
            .height(200)
        }
    }
}

2.4 HAP基本概念

• 装饰器：方舟开发框架定义了一些具有特殊含义的装饰器，用于装饰类、结构、方法和变量。装饰器就是某一种修饰，给被装饰的对象赋予某一种能力，比如@Entry就是页面入口的能力，@Component就是组件化能力。
• 自定义组件：可重用的UI单元，可以与其他组件组合，如@Component装饰的struct Hello。
• UI描述：声明性描述UI结构，例如build()方法中的代码块。
• 内置组件：框架中默认内置的基本组件和布局组件，开发者可以直接调用，仅用于解释UI描述规范。如Column、Text、Divider、Button等。
• 属性方法：用于配置组件属性，如fontSize()、width()、height()、color()等。
• 事件方法：在事件方法的回调中添加组件响应逻辑。例如，为Button组件添加onClick方法，在onClick方法的回调中添加点击响应逻辑。

2.5 page文件

基于TS扩展的声明式开发范式提供了一系列基础组件，如：基础组件，容器组件，媒体组件，绘制组件和画布组件等，本节我们主要使用画布组件。

这里我们就不赘述Hap项目的建立过程，以下就是基础的Hap的page文件：index.ets

  
  build() {
    Row() {
      Column() {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .onClick((ev: ClickEvent) => {
            console.info("click!!")
            //响应鼠标左击
            this.doClick()
          })
          .onReady(() =>{
            //绘制基础
            this.context.imageSmoothingEnabled = false
            this.drawBlock()
          })
      }
      .width('100%')
    }
    .height('100%')
    .backgroundImage($r("app.media.backgroundday"))
    .backgroundImageSize(ImageSize.Cover)
  }

build是基础页面的构造函数，用于界面的元素构造，其他的页面的生命周期函数如下：

declare class CustomComponent {
  /**
   * Customize the pop-up content constructor.
   * @since 7
   */
  build(): void;

  /**
   * aboutToAppear Method
   * @since 7
   */
  aboutToAppear?(): void;

  /**
   * aboutToDisappear Method
   * @since 7
   */
  aboutToDisappear?(): void;

  /**
   * onPageShow Method
   * @since 7
   */
  onPageShow?(): void;

  /**
   * onPageHide Method
   * @since 7
   */
  onPageHide?(): void;

  /**
   * onBackPress Method
   * @since 7
   */
  onBackPress?(): void;
}

3. Canvas画布介绍

canvas是画布组件用于自定义绘制图形，具体的API页面如下：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-components-canvas-canvas-0000001333641081

页面显示前会调用aboutToAppear()函数，此函数为页面生命周期函数。

canvas组件初始化完毕后会调用onReady()函数，函数内部实现小游戏的初始页面的绘制。

3.1 初始化页面数据

  drawBlock() {
    this.context.clearRect(0,0,this.context.width,this.context.height)
    this.context.drawImage( this.baseImg,this.baseX,this.baseY,500,300)
    switch(this.flappyState) {
      case 0:
        this.context.drawImage( this.messageImg,this.startX,this.startY,300,500)
        this.drawBird()
        break;
      case 1:
        this.drawBird()
        this.context.drawImage( this.pipegreenImg,this.pipeX,this.pipeY,50,150)
        break;
      case 2:
        this.context.drawImage( this.gameoverImg,this.startX,this.startY*3,300,90)
        break
    }
  }

页面状态有三：

• 0：等待开始界面
• 1：游戏进行
• 2：游戏结束

3.2 绘制Bird

  drawBird() {
    switch(this.birdType) {
      case 0:
        this.context.drawImage( this.midbirdImg,this.slotX,this.slotY,this.birdH,this.birdW)
        break
      case 1:
        this.context.drawImage( this.upbirdImg,this.slotX,this.slotY,this.birdH,this.birdW)
        break;
      case 2:
        this.context.drawImage( this.downbirdImg,this.slotX,this.slotY,this.birdH,this.birdW)
        break;
      default:
        break;
    }
  }

4. 游戏逻辑

4.1 主体游戏逻辑：

简单的小游戏主体游戏逻辑为：等待开始，开始，结束流程图如下：

graph LR
等待开始 --> click[点击]
click[点击] --> 游戏开始
游戏开始 --> 点击 --> |游戏开始|小鸟飞,水管动 --> |小鸟碰到水管| 游戏结束 --> 点击 --> |游戏结束| 等待开始
小鸟飞,水管动 --> |小鸟没碰到水管| 游戏继续 --> 点击

doClick() {
    switch (this.flappyState) {
      case 0:
        {
          // 开始
          this.flappyState = 1
          break
        }
      case 1:
        {
          //上下飞
          //        this.flappyState = 2
          this.slotY -= this.flyHeight
          console.log(this.slotY.toString())
          break
        }
      case 2:
        {
          //由结束到待开始
          this.flappyState = 0
          this.slotY = this.slotStartY
          this.pipeX = this.pipeStartX
          break
        }
      default:
        break
    }
    this.drawBlock()
  }

4.2 完整游戏逻辑：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  private baseImg:ImageBitmap = new ImageBitmap("common/images/base.png")
  private messageImg:ImageBitmap = new ImageBitmap("common/images/message.png")
  private zeroImg:ImageBitmap = new ImageBitmap("common/images/0.png")
  private gameoverImg:ImageBitmap = new ImageBitmap("common/images/gameover.png")
  private upbirdImg:ImageBitmap = new ImageBitmap("common/images/bluebirdupflap.png")
  private midbirdImg:ImageBitmap = new ImageBitmap("common/images/bluebirdmidflap.png")
  private downbirdImg:ImageBitmap = new ImageBitmap("common/images/bluebirddownflap.png")
  private pipegreenImg:ImageBitmap = new ImageBitmap("common/images/pipegreen.png")
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  private flappyState: number = 0
  private startX = 30;
  private startY = 100;
  private slotStartY = 410;
  private slotX = 50;
  private slotY = this.slotStartY;
  private baseX = 0;
  private baseY = 650;
  private pipeStartX = 330;
  private pipeX = this.pipeStartX;
  private pipeY = 500;
  private birdH = 60;
  private birdW = 50;
  private birdTimer: number;
  private birdType: number = 0;
  private count = 1;
  private flyHeight = 20;
  private pipeMove = 10;


  drawBird() {
    switch(this.birdType) {
      case 0:
        this.context.drawImage( this.midbirdImg,this.slotX,this.slotY,this.birdH,this.birdW)
        break
      case 1:
        this.context.drawImage( this.upbirdImg,this.slotX,this.slotY,this.birdH,this.birdW)
        break;
      case 2:
        this.context.drawImage( this.downbirdImg,this.slotX,this.slotY,this.birdH,this.birdW)
        break;
      default:
        break;
    }
  }

  drawBlock() {
    this.context.clearRect(0,0,this.context.width,this.context.height)
    this.context.drawImage( this.baseImg,this.baseX,this.baseY,500,300)
    switch(this.flappyState) {
      case 0:
        this.context.drawImage( this.messageImg,this.startX,this.startY,300,500)
        this.drawBird()
        break;
      case 1:
        this.drawBird()
        this.context.drawImage( this.pipegreenImg,this.pipeX,this.pipeY,50,150)
        break;
      case 2:
        this.context.drawImage( this.gameoverImg,this.startX,this.startY*3,300,90)
        break
    }
  }

  doClick() {
    switch (this.flappyState) {
      case 0:
        {
          // 开始
          this.flappyState = 1
          break
        }
      case 1:
        {
          //上下飞
          //        this.flappyState = 2
          this.slotY -= this.flyHeight
          console.log(this.slotY.toString())
          break
        }
      case 2:
        {
          //由结束到待开始
          this.flappyState = 0
          this.slotY = this.slotStartY
          this.pipeX = this.pipeStartX
          break
        }
      default:
        break
    }
    this.drawBlock()
  }

  doFly(): void {
    console.log("dofly ------ !!")
    this.birdType += 1
    if (this.birdType/5 == 0) {
      this.message = "dofly ---555--- !!"
    }
  }

  async sleep(ms: number) {
    return new Promise((r) => {
      setInterval(() => {
        this.birdType += 1
        this.message = this.birdType.toString()
        if (this.birdType == 3) {
          this.birdType = 0
        }
        console.log(this.message)
        if (this.flappyState == 1) {
          this.pipeX -= this.pipeMove
          if (this.pipeX < 0) {
            this.pipeX = 330
          }
          this.slotY += this.flyHeight/5
        }

        if ((((this.pipeX-this.slotX) <= this.birdW) && ((this.pipeY-this.slotY) <= this.birdH)) ||
          this.pipeY >= this.baseY) {
          this.flappyState = 2
        }
        this.drawBlock()
      }, ms)
    })
  }

  aboutToDisappear() {
  }

  aboutToAppear() {
    this.sleep(200)
  }

  build() {
    Row() {
      Column() {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .onClick((ev: ClickEvent) => {
            console.info("click!!")
            this.doClick()
          })
          .onReady(() =>{
            this.context.imageSmoothingEnabled = false
            this.drawBlock()
          })
      }
      .width('100%')
    }
    .height('100%')
    .backgroundImage($r("app.media.backgroundday"))
    .backgroundImageSize(ImageSize.Cover)
  }
}

5. 游戏的瑕疵

• 水管只在下层显示：可以在上层显示；
• 地面没有让动
• 游戏声音问题：目前ohos不支持音频播放资源音频，看之后版本是否支持
• DevEcoy用setInterval重绘canvas会导致ide崩溃

写在最后

我们最近正带着大家玩嗨OpenHarmony。如果你有好玩的东东，欢迎投稿，让我们一起嗨起来！有点子，有想法，有Demo，立刻联系我们：

合作邮箱：zzliang@atomsource.org