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 = 120private centerY: number = 120//角度正弦和余弦sin: number = 0cos: 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//任务IDtaskID = -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 = truethis.tmd = 0})})} else {Row(){Button('返回').width(80).height(35).fontSize(18).onClick(() => {animateTo({ duration: 800 }, () => {this.isShow = falsethis.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 = 0clearInterval(this.taskID)animateTo(//还原小球初始坐标{ curve: curves.springMotion() },() => {this.samX = this.centerXthis.samY = this.centerY})breakcase TouchType.Down:if (this.actorX >= 20 || this.actorY >= 20) {//开始一个定时任务this.taskID = setInterval(() => {//修改主角的坐标this.actorX += this.speed * this.cos / 2this.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},() => {//碰撞后加分并改变样式边框圆角=10this.fenShu +=  5this.backColor = '#ff0000'.toString()this.BDR = 20})} else {animateTo({duration:500},() => {this.BDR = 0})}}, 40)} else {//修改主角的坐标this.actorX = 21this.actorY = 21this.shengMing--if (this.shengMing === 0) {this.fenShu = 0break}}breakcase TouchType.Move://获取手指的坐标位置let x = event.touches[0].xlet y = event.touches[0].y//计算手指和中心点坐标的差值let vx = x - this.centerXlet 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 + 90this.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)}
}