跟著小白一起學鴻蒙—[番外]一起學做FlappyBird

作者：王石 2022-11-14 17:01:34

系統 OpenHarmony

本文主要介紹小游戲的開發，畫布功能的使用。

??想了解更多關于開源的內容，請訪問：??

??51CTO 開源基礎軟件社區??

??https://ost.51cto.com??

簡介

記得很久以前有個大火的像素游戲叫FlappyBird，我們就一起看看如何能用OpenHarmony學習做個FlappyBird。本文中引用的圖片資源均來自與Github。

#跟著小白一起學鴻蒙# [番外]一起學做FlappyBird-開源基礎軟件社區

開發

1、HAP應用建立

這里我們就不贅述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;
}

2、Canvas介紹

canvas是畫布組件用于自定義繪制圖形，具體的API頁面如下：

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

頁面顯示前會調用aboutToAppear()函數，此函數為頁面生命周期函數。

canvas組件初始化完畢后會調用onReady()函數，函數內部實現小游戲的初始頁面的繪制。

（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：游戲結束

（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;
    }
  }

小鳥飛行狀態有三種：

翅膀在中間：0
翅膀在上：1
翅膀在下：2

3、游戲邏輯

簡單的小游戲主體游戲邏輯為：等待開始，開始，結束流程圖如下：

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、完整邏輯

@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)
  }
}

遺留問題：

水管只在下層顯示：可以在上層顯示；
地面沒有讓動
游戲聲音問題：目前ohos不支持音頻播放資源音頻，看之后版本是否支持
DevEcoy用setInterval重繪canvas會導致ide崩潰

5、獲取源碼

見附件
https://gitee.com/wshikh/ohosflappybird。

總結

本文主要介紹了小游戲的開發，畫布功能的使用。

??想了解更多關于開源的內容，請訪問：??

??51CTO 開源基礎軟件社區??

??https://ost.51cto.com??。

責任編輯：jianghua 來源： 51CTO開源基礎軟件社區

游戲開發畫布功能