HarmonyOS个人项目案例——综合开发过程记录3

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、简单小游戏设计
• 二、相关代码
  • 1.代码部分
  • 2.效果图
• 总结

---

前言

        小游戏是一种简单、轻松的娱乐方式，适合在休闲时间放松心情。它们通常具有简单的玩法和易于上手的操作方式，让玩家能够立即投入到游戏中。

---

一、简单小游戏设计

        这个小游戏是使用HarmonyOS的框架来实现页面跳转和动画效果的应用程序。该应用程序包含了一个页面，点击下一个项目按钮可以跳转到另下个页面。同时，页面中还有一个海马元素，当点击开始游戏按钮时，会进行动画效果的展示。通过点击页面中的箭头按钮，可以控制海马的移动方向。整个页面的背景是一张海洋的图片。

二、相关代码

1.代码部分

简单小游戏代码：

import router from '@ohos.router'
@Extend(Text) function opacityWhitetext(opacity: number,fontSize: number=10){
  .fontSize(fontSize)
  .opacity(opacity)
  .fontColor(Color.White)
}
@Entry
@Component
struct Page1 {
  @State fishX: number = 200
  @State fishY: number = 180
  @State angle: number = 0
  @State src: Resource = $r('app.media.haima')

  @State isBegin: boolean = false

  build() {
    Row() {
      Stack(){
        Button('下一个项目')
          .position({x:130, y: 730})
          .backgroundColor('#201010')
          .onClick(() => {
            router.pushUrl({
              url:'pages/page2'
            })
          })

        if(!this.isBegin){
          Button('开始游戏')
            .onClick(() => {
              animateTo(
                {duration: 1000},
                () => {
                  this.isBegin = true
                }
              )
            })
        }else{
          Image(this.src)
            .position({x: this.fishX - 20, y: this.fishY - 20})
            .rotate({angle:this.angle, centerX: '50%', centerY: '50%'})
            .width(40)
            .height(85)
            .transition({
              type: TransitionType.Insert,
              opacity: 0,
              translate: {x: -250}
            })
        }
        Row(){
          Button('←').backgroundColor('#20101010')
            .onClick(() => {
              animateTo(
                {duration: 500},
                () => {
                  this.fishX -= 20
                  this.src = $r("app.media.haima")
                }
              )
            })
          Column({space: 40}){
            Button('↑').backgroundColor('#20101010')
              .onClick(() => {
                animateTo(
                  {duration: 500},
                  () => {
                    this.fishY -= 20
                  }
                )
              })
            Button('↓').backgroundColor('#20101010')
              .onClick(() => {
                animateTo(
                  {duration: 500},
                  () => {
                    this.fishY += 20
                  }
                )
              })
          }
          Button('→').backgroundColor('#20101010')
            .onClick(() => {
              animateTo(
                {duration: 500},
                () => {
                  this.fishX += 20
                  this.src = $r('app.media.haima')
                }
              )
            })
        }
        .height(240)
        .width(240)
        .justifyContent(FlexAlign.Center)
        .position({x:50,y:500})
      }
      .height('100%').width('100%')
    }
    .height('100%')
    .width('100%')
    .backgroundImage($r('app.media.sea'))
    .backgroundImageSize({height: '105%', width: '100%'})
  }
}

2.效果图

效果图：

点击开始游戏效果图：

---

总结

        这个小游戏的魅力在于它的简洁和便捷。玩家无需长时间投入，即可享受到游戏的乐趣。它具有简单的操作，不需要复杂的策略和长时间的练习。