HarmonyOS案例：摇杆游戏

本案例主要演示如何通过一系列的动画效果以及运算实现摇杆控制组件同步运动的功能，界面简陋无需在意。

欢迎大家的阅读和评价，也欢迎大佬们批评、指正，我将继续努力，奉上更加专业的、高效的代码案例。

import curves from '@ohos.curves'
import { Header } from '../models/Header'

@Entry
@Component
export default struct GamePage {
  //是否开始游戏
  @State isShow: boolean = false
  //是否开始游戏
  @State zhangAi: boolean = false
  //遥感区域中心点
  private centerX: number = 120
  private centerY: number = 120
  //角度正弦和余弦
  sin: number = 0
  cos: number = 0
  //大小圆直径
  @State big: number = 100
  @State sam: number = 20
  //摇杆小球初始位置
  @State samX: number = this.centerX
  @State samY: number = this.centerY
  //透明度
  @State tmd: number = 1
  //移动速度
  speed: number = 1
  //任务ID
  taskID = -1
  //移动小人“主角”的坐标
  @State actorX: number = 40
  @State actorY: number = 40
  //移动小人“障碍”的坐标
  @State zhangAiX: number = 150
  @State zhangAiY: number = 230
  //主角旋转的角度
  @State angle: number = 0
  //计分板
  @State fenShu: number = 0
  @State shengMing: number = 3
  @State BDR: number = 0

  //障碍物背景色
  @State backColor:string = '#dddddd'.toString()

  @Styles backStyle(){
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Orange)
  }

  build() {

    Column() {
      Header({title:'摇杆游戏：动画效果'})
      Stack() {

        if (!this.isShow) {
          Button('返回')
            .width(80)
            .height(35)
            .fontSize(18)
            .position({ x: 0, y: 0 })
            .onClick(() => {
              animateTo({ duration: 800 }, () => {

              })
            })

          Button('开始游戏')
            .opacity(this.tmd)
            .width(150)
            .height(40)
            .fontSize(20)
            .position({ x: '30%', y: '50%' })
            .onClick(() => {
              animateTo({ duration: 800 }, () => {
                this.isShow = true
                this.tmd = 0
              })
            })
        } else {
          Row(){
            Button('返回')
              .width(80)
              .height(35)
              .fontSize(18)
              .onClick(() => {
                animateTo({ duration: 800 }, () => {
                  this.isShow = false
                  this.tmd = 1
                })
              })
            Blank().width(90)
            Text('得分：' + this.fenShu)
              .width('25%').height(35)
            Text('生命：' + this.shengMing)
              .width('17%').height(35)
          }.position({ x: 10, y: 0 })

          //障碍物
          Text('敌人')
            .width(40)
            .height(40)
            .backgroundColor(this.backColor)
            .borderRadius(this.BDR)
            .rotate({ angle: this.angle })
            .position({ x: this.zhangAiX, y: this.zhangAiY })
          //移动块
          Image($r('app.media.icon')).width(40).height(40)
            // .rotate({angle:this.angle})
            .position({ x: this.actorX * 2, y: this.actorY * 3 })

          //摇杆模块
          Stack() {
            Circle({ width: this.big * 2, height: this.big * 2 })
              .fill('#20101010')
              .position({ x: this.centerX - this.big, y: this.centerY - this.big })
            Circle({ width: this.sam * 2, height: this.sam * 2 })
              .fill(Color.Grey)
              .position({ x: this.samX - this.sam, y: this.samY - this.sam })
          }
          .width(240).height(240)
          .transition({
            type: TransitionType.All,
            opacity: this.tmd,
          })
          .onTouch(this.handleTouchEvent.bind(this))

        }

      }.backStyle().alignContent(Alignment.Bottom)
    }.backStyle()
  }
  //处理手指移动的函数事件
  handleTouchEvent(event: TouchEvent) {

    switch (event.type) {
    //手指抬起时还原摇杆到初始位置
      case TouchType.Up:
        this.speed = 0 //修改主角速度
        this.angle = 0
        clearInterval(this.taskID)
        animateTo(
          //还原小球初始坐标
          { curve: curves.springMotion() },
          () => {
            this.samX = this.centerX
            this.samY = this.centerY
          }
        )
        break
      case TouchType.Down:
        if (this.actorX >= 20 || this.actorY >= 20) {
          //开始一个定时任务
          this.taskID = setInterval(() => {
            //修改主角的坐标
            this.actorX += this.speed * this.cos / 2
            this.actorY += this.speed * this.sin / 2
            //判断移动块和障碍物是否碰撞
            if ((Math.abs(this.zhangAiY - this.actorY) >= 0 && Math.abs(this.zhangAiY - this.actorY - 155) <= 13)
            && (Math.abs(this.zhangAiX - this.actorX) >= 0 && Math.abs(this.zhangAiX - this.actorX - 76) <= 18)
            ) {
              animateTo({duration:500},() => {
                //碰撞后加分并改变样式边框圆角=10
                this.fenShu +=  5
                this.backColor = '#ff0000'.toString()
                this.BDR = 20
              })
            } else {
              animateTo({duration:500},() => {
                this.BDR = 0
              })
            }
          }, 40)
        } else {
          //修改主角的坐标
          this.actorX = 21
          this.actorY = 21
          this.shengMing--
          if (this.shengMing === 0) {
            this.fenShu = 0
            break
          }
        }
        break
      case TouchType.Move:
      //获取手指的坐标位置

        let x = event.touches[0].x
        let y = event.touches[0].y
      //计算手指和中心点坐标的差值
        let vx = x - this.centerX
        let vy = y - this.centerY
      //计算手指和中心点连线和X轴半轴的夹角
        let angle = Math.atan2(vy, vx)
      //计算手指与中心点的距离
        let distance = this.getDistance(vx, vy)
        this.sin = Math.sin(angle)
        this.cos = Math.cos(angle)
      //使摇杆小球跟随手指的位置
      //this.angle = angle * 180 / Math.PI + 90
        this.speed = 6 //修改主角移动的速度
        animateTo(
          { curve: curves.responsiveSpringMotion() },
          () => {
            //计算手指位置并赋值给摇杆小球的坐标
            this.samX = this.centerX + distance * Math.cos(angle)
            this.samY = this.centerY + distance * Math.sin(angle)
          }
        )
        break
    }
  }

  getDistance(x: number, y: number) {
    let d = Math.sqrt(x * x + y * y)
    return Math.min(d, this.big)
  }
}