0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看威廉希尔官方网站 视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

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

共熵服务中心 来源:未知 2022-11-14 19:30 次阅读
51CTO 开源基础软件社区 #跟着小白一起学鸿蒙# [番外]《一起学做FlappyBird》

9ce13ec2-640f-11ed-8abf-dac502259ad0.png

1. 项目的背景

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

9d401dc0-640f-11ed-8abf-dac502259ad0.jpg

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

9d58d680-640f-11ed-8abf-dac502259ad0.gif

项目源码如下:

https://gitee.com/wshikh/ohosflappybird

2. HAP应用建立

2.1HAP简介

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

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

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

2.2HAP开发工具

本开发采用: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方舟编译,同时提供低代码开发、双向预览、全新构建工具、interwetten与威廉的赔率体系 器、调试调优、信息中心等功能,为开发者提供工程模板创建、开发、编译、调试、发布等E2E的OpenHarmony应用/服务开发。

下载链接:

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

2.3ETS

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.4HAP基本概念

  • 装饰器:方舟开发框架定义了一些具有特殊含义的装饰器,用于装饰类、结构、方法和变量。装饰器就是某一种修饰,给被装饰的对象赋予某一种能力,比如@Entry就是页面入口的能力,@Component就是组件化能力。

  • 自定义组件:可重用的UI单元,可以与其他组件组合,如@Component装饰的struct Hello。

  • UI描述:声明性描述UI结构,例如build()方法中的代码块。

  • 内置组件:框架中默认内置的基本组件和布局组件,开发者可以直接调用,仅用于解释UI描述规范。如Column、Text、Divider、Button等。

  • 属性方法:用于配置组件属性,如fontSize()、width()、height()、color()等。

  • 事件方法:在事件方法的回调中添加组件响应逻辑。例如,为Button组件添加onClick方法,在onClick方法的回调中添加点击响应逻辑。

2.5page文件

基于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;
    }
}

小鸟飞行状态有三种:

  • 翅膀在中间:0

  • 翅膀在上:1

  • 翅膀在下:2

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崩溃

a3c66654-640f-11ed-8abf-dac502259ad0.gif

本文完

写在最后我们最近正带着大家玩嗨OpenHarmony。如果你有好玩的东东,欢迎投稿,让我们一起嗨起来!有点子,有想法,有Demo,立刻联系我们:合作邮箱:zzliang@atomsource.org
a3da5f60-640f-11ed-8abf-dac502259ad0.gif

a3eb2db8-640f-11ed-8abf-dac502259ad0.png

a40822ba-640f-11ed-8abf-dac502259ad0.pnga438be84-640f-11ed-8abf-dac502259ad0.pnga46ade5a-640f-11ed-8abf-dac502259ad0.png

a49ec0b2-640f-11ed-8abf-dac502259ad0.png

a4bdbcec-640f-11ed-8abf-dac502259ad0.png

a4de89f4-640f-11ed-8abf-dac502259ad0.png

a529bcbc-640f-11ed-8abf-dac502259ad0.png

a59f1c46-640f-11ed-8abf-dac502259ad0.png

a5db64da-640f-11ed-8abf-dac502259ad0.png

a605dd28-640f-11ed-8abf-dac502259ad0.png

a63d209e-640f-11ed-8abf-dac502259ad0.png

a65666c6-640f-11ed-8abf-dac502259ad0.png

a6a519d8-640f-11ed-8abf-dac502259ad0.png

a6bdc2bc-640f-11ed-8abf-dac502259ad0.png

a72b8a9a-640f-11ed-8abf-dac502259ad0.png

a75f2594-640f-11ed-8abf-dac502259ad0.png


原文标题:玩嗨OpenHarmony:基于OpenHarmony的小游戏:一起学做FlappyBird

文章出处:【微信公众号:开源威廉希尔官方网站 服务中心】欢迎添加关注!文章转载请注明出处。

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉

原文标题:玩嗨OpenHarmony:基于OpenHarmony的小游戏:一起学做FlappyBird

文章出处:【微信号:开源威廉希尔官方网站 服务中心,微信公众号:共熵服务中心】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    OpenHarmony:基于OpenHarmony的仿生四足狗开发分享

    OpenHarmony(以下简称“OpenHarmony”)系统的机器狗。本文将给大家分享些他开发过程中的心得体会。 开发项目简介 说起人工智能机器
    的头像 发表于 10-31 21:50 3723次阅读

    小游戏贪食蛇教程

    小游戏贪食蛇教程,欢迎大家一起来学习
    发表于 08-07 16:29

    一起来吐槽下学习openharmony的那些事

    欢迎新老入坑openharmony的人来一起吐槽下,看看在学习openharmony的过程中有遇到什么困扰。先吐槽两点1.过了年了碰碰这
    发表于 10-14 21:18

    DAYU200 2048 小游戏- OpenHarmony

    。当按某个方向键时,所有非空的格子都会往这个方向滑动。如果在滑动的过程中两个数字相同的格子碰到一起,那么就会把这两个数字相加从而合并成个新格子。只要有格子合并,分数就会增加。滑动并合并之后,会从所有
    发表于 05-10 15:45

    OpenHarmony 生态动向【润和软件】

    OpenHarmony生态动向【润和软件】,多款开发板展示,其中DAYU200开发套件实现手机电话短信功能、音乐播放器、摄像机、商城、健康app、小游戏等等。你觉得OpenHarmony手机面世还会远吗?
    发表于 06-01 10:18

    用JS写OpenHarmony拼图小游戏

    1. 样例效果本Demo是基于OpenHarmony3.0 LTS,使用JS语言编写的拼图小游戏
    发表于 07-27 18:24

    【开发样例】用JS写OpenHarmony拼图小游戏

    、简介1.样例效果本Demo是基于OpenHarmony3.0 LTS,使用JS语言编写的拼图小游戏。2.涉及OpenHarmony威廉希尔官方网站 特性JS UI3.支持
    发表于 07-29 14:25

    基于 OpenHarmony 拳击健康游戏应用

    样例简介拳击健康游戏应用是基于OpenHarmony 3.2 Beta标准系统上开发的eTS应用,本应用运行于RK3568,游戏开始会随着音乐播放会拳击方库进行随机速度下落,样例利用NAPI组件获取
    发表于 08-31 11:20

    【直播回顾】OpenHarmony知识赋能第八期:手把手教你实现涂鸦小游戏

    【直播回顾】OpenHarmony知识赋能第八期:手把手教你实现涂鸦小游戏OpenHarmony第八期知识赋能直播已经在9月29日圆满落幕!从9月15日,资深OS框架开发工程师巴延兴
    发表于 10-10 15:58

    Unity中国、Cocos为OpenHarmony游戏生态插上腾飞的翅膀

    2023年是OpenHarmony游戏生态百花齐放的年!为了扩展OpenHarmony游戏生态,Ope
    发表于 10-23 16:15

    基于STM32设计的拼图小游戏详解

    拼图游戏在小时候还是经常,玩法也比较简单,这里就使用STM32设计个拼图小游戏分享出来一起学习。 目前
    的头像 发表于 02-28 13:45 3287次阅读
    基于STM32设计的拼图<b class='flag-5'>小游戏</b>详解

    OpenHarmony:基于OpenHarmony的机械狗进阶版——听话的狗子

    原文引自CSDN社区 《[立创传智黑马程序员CSDN]训练营——仿生机械狗》 编者按 昨天的 《 OpenHarmony:基于OpenHarmony的仿生四足狗开发分享 》 ,大家
    的头像 发表于 11-01 21:25 1659次阅读

    OpenHarmony:基于OpenHarmony的道路维护方案

    抵御灾害能力和可持续的城市和人类住区中的交通问题,在此提出种基于OpenHarmony实现道路维护的方案,通过深度学习的方式对道路的裂缝进行实时检测,增加道路的可持续使用性。 由于传统的道路裂缝检测精度和距离有限,大部分仍需要人工检测,而人工裂缝检测的过程又十分的繁琐
    的头像 发表于 11-02 21:20 1351次阅读

    OpenHarmony:基于OpenHarmony的贪吃蛇小游戏

    51CTO 开源基础软件社区 #夏日挑战赛# 《 OpenHarmony基于JS实现的贪吃蛇 》 1. 项目简介 贪吃蛇是款非常经典的小游戏,概念起源于1976年由美国家街机
    的头像 发表于 11-28 20:50 1254次阅读

    OpenHarmony:基于OpenHarmony的ArkUI翻页时钟

    原文引自:51CTO 开源基础软件社区 #夏日挑战赛# OpenHarmony - 《 ArkUI(TS)开发翻页时钟 》 1. 项目背景 翻页时钟(Flip Clock)是种有趣的机电数字计时
    的头像 发表于 12-05 20:15 1391次阅读