鸿蒙——小鱼案例

小鱼案例

• 新建项目

• 定义函数

1. 我们需要定义小鱼的横、纵坐标、角度、图片、是否开启游戏。

struct Index{
  //小鱼的坐标
  @State fishX:number=200
  @State fishY:number=180
  //小鱼角度
  @State angle:number=0
  //小鱼图片
  @State src:Resource=$r('app.media.right_fish')
  //是否开启游戏
  @State isBegin:boolean=false

• 背景

设置背景图片、大小，和容器的大小。这里我们用的是Stack()布局，因为我们的都是在背景图片上操作的。

Stack(){}
.height('100%').width('100%')
.backgroundImage($r('app.media.sea'))
.backgroundImageSize({height:'105%',width:'100%'})

• 按钮

这里总共需要6个按钮，分为两类，开始、返回键，操控键。

1. 开始、返回键

返回键，点击返回上一页和“页面路由”有关。

Button('返回')
  .position({x:0,y:0})
  .backgroundColor('#20101010')
  .onClick(()=>{
    //返回上一页
    router.back()
  })

开始键，添加点击事键，使用if-else语句，点击按钮，开始游戏键消失。这里的逻辑是，if先执行，执行到this.isBegin=true发现不成立，直接执行else。

if (!this.isBegin){
  //开始按钮
  Button('开始游戏')
    //点击后显示小鱼
    .onClick(()=>{

//显示动画。时间是1000ms
      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(40)
  .transition({
    type:TransitionType.Insert,
    opacity:0,
    translate:{x:-250}
  })
}

2、操控键

总共需要4个按钮，上、下、左、右，操控键。每一个需要添加点击事件，分别对应对应的移动距离。在左右移动时，小鱼会调头。

Row(){
  Button('←').backgroundColor('#20101010')
    .onClick(()=>{
      animateTo({duration:500},()=>{
        this.fishX -= 20
        this.src=$r('app.media.left_fish')
      })
    })
  Column({space:40}){
    Button('↑').backgroundColor('#20101010')
      .onClick(()=>{
        this.fishY -= 20
      })
    Button('↓').backgroundColor('#20101010')
      .onClick(()=>{
        this.fishY += 20
      })
  }
  Button('→').backgroundColor('#20101010')
    .onClick(()=> {
      animateTo({ duration: 500 }, () => {
        this.fishX += 20
        this.src = $r('app.media.right_fish')
      })
    })
}
.height(240)
.width(240)
.justifyContent(FlexAlign.Center)
.position({x:0,y:120})

现在已经做完了。

• 源代码

import router from '@ohos.router'
@Entry
@Component
struct Index{
  //小鱼的坐标
  @State fishX:number=200
  @State fishY:number=180
  //小鱼角度
  @State angle:number=0
  //小鱼图片
  @State src:Resource=$r('app.media.right_fish')
  //是否开启游戏
  @State isBegin:boolean=false
  build(){
    Stack(){
      //返回按钮
      Button('返回')
        .position({x:0,y:0})
        .backgroundColor('#20101010')
        .onClick(()=>{
          //返回上一页
          router.back()
        })
      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(40)
        .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.left_fish')
            })
          })
        Column({space:40}){
          Button('↑').backgroundColor('#20101010')
            .onClick(()=>{
              this.fishY -= 20
            })
          Button('↓').backgroundColor('#20101010')
            .onClick(()=>{
              this.fishY += 20
            })
        }
        Button('→').backgroundColor('#20101010')
          .onClick(()=> {
            animateTo({ duration: 500 }, () => {
              this.fishX += 20
              this.src = $r('app.media.right_fish')
            })
          })
      }
      .height(240)
      .width(240)
      .justifyContent(FlexAlign.Center)
      .position({x:0,y:120})
    }
    .height('100%').width('100%')
    .backgroundImage($r('app.media.sea'))
    .backgroundImageSize({height:'105%',width:'100%'})
  }
}