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)}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/665368.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Objective-C中里氏替换原则

里氏替换原则是面向对象设计的基本原则之一&#xff0c;它指出子类对象可以在任何需要父类对象的地方使用&#xff0c;而不会产生意外的行为。 // 父类 interface Animal : NSObject - (void)sayHello; endimplementation Animal - (void)sayHello {NSLog("Animal says he…

一篇文章了解系统眼中的键盘--以一个简单的系统分析从按键的输入到字符的显示

键盘输入 实现使用的设备 intel架构32位CPU, 思路为嵌入式系统工程师,使用的操作系统是《30天自制操作系统》里面的系统进行讲解 硬件实现 按键 使用单片机等的引脚可以获取电平状态从而获得按键的状态(单片机是一种集成到一块硅片上构成的一个小而完善的微型计算机系统, 用…

每日OJ题_算法_模拟②_力扣495. 提莫攻击

目录 力扣495. 提莫攻击 解析代码 力扣495. 提莫攻击 495. 提莫攻击 难度 简单 在《英雄联盟》的世界中&#xff0c;有一个叫 “提莫” 的英雄。他的攻击可以让敌方英雄艾希&#xff08;编者注&#xff1a;寒冰射手&#xff09;进入中毒状态。 当提莫攻击艾希&#xff0c…

分享一个WPF项目

最近在学习WPF开发方式&#xff0c;找到一些项目进行拆解学习&#xff1b;本位主要分享一个WPF项目&#xff0c;叫做WPFDevelopers&#xff0c;在git上大约有1.3K星&#xff0c;话不多说&#xff0c;先看看效果&#xff1a; 这个项目开发可以编译启动后直接查看样例、Xaml、Cha…

LeetCode:LCP 24. 数字游戏(对顶堆求中位数 Java)

目录 LCP 24. 数字游戏 题目描述&#xff1a; 实现代码与解析&#xff1a; 原理思路&#xff1a; LCP 24. 数字游戏 题目描述&#xff1a; 小扣在秋日市集入口处发现了一个数字游戏。主办方共有 N 个计数器&#xff0c;计数器编号为 0 ~ N-1。每个计数器上分别显示了一个数…

《计算机网络简易速速上手小册》第9章:物联网(IoT)与网络技术(2024 最新版)

文章目录 9.1 IoT 架构与通信协议 - 打造智能世界的秘诀9.1.1 基础知识9.1.2 重点案例&#xff1a;使用 Python 和 MQTT 实现智能家居照明系统准备工作Python 脚本示例发布者&#xff08;灯光控制&#xff09;订阅者&#xff08;灯光状态接收&#xff09;&#xff1a; 9.1.3 拓…

快速Diff算法-Vue3

快速Diff算法 快速 Diff 算法在实测中性能最优。它借鉴了文本 Diff 算法中的预处理思路&#xff0c;先处理新旧两组子节点中相同的前置节点和相同的后置节点。当前置节点和后置节点全部处理完毕后&#xff0c;如果无法简单地通过挂载新节点或者卸载已经不存在的节点来完成更新…

AD24-Class、飞线、PCB Nets的管理及添加、层的管理

一、Class 1、Class介绍 2、Class添加与显示 ①添加 ②显示通过Panels-PCB&#xff0c;即可将创建的类显示再左上方窗口 3、Class的编辑管理 ①概述 ②颜色更改 二、飞线 1、概述 2、 飞线的打开、关闭 打开&#xff1a;Alt左上角滑动 N&#xff1a;可以针对性的显示和隐…

Linux:使用grep和more索日志内容排查Bug

grep # 搜索文件内容显示行号 grep -n "要搜索的关键词" 文件名more 快捷键&#xff1a; 空白键&#xff08;space&#xff09;下一页b键 &#xff08;back&#xff09;上一页 示例 # 从第 20 行开始显示文档内容 more 20 文件名参考 linux查看命令 more 、les…

深度学习环境配置:Anaconda 安装和 pip 源

conda是一种通用包管理系统&#xff0c;与pip的使用类似&#xff0c;环境管理则允许用户方便地安装不同版本的python并可以快速切换。 Anaconda则是一个打包的集合&#xff0c;里面预装好了conda、某个版本的python、众多packages、科学计算工具等等&#xff0c;就是把很多常用…

Vue3 - 从 vue2 到 vue3 过渡,这一套就够了(案例 + 效果演示)(二)

目录 一、组合式 API 的使用 1.1、watch 函数 1.2、watchEffect 函数 1.3、toRef 和 toRefs 1.3.1、toRef 1.3.2、toRefs 1.4、vue3 的声明周期 一、组合式 API 的使用 1.1、watch 函数 与 vue2.x 中的 watch 配置功能一致&#xff0c;但是多了一些坑&#xff1a; 这…

Attempt to invoke virtual method ‘-‘ on a null object reference错误总结

Android studio开发 出现这个问题一般是&#xff1a;一个Activity中调用另一个xml布局文件&#xff0c;即非本Activity所绑定的xml布局文件中的控件&#xff0c;这时候就不能直接findViewById&#xff0c;不然会报错指向空对象 LayoutInflater factory LayoutInflater.from(…

【蓝桥杯】环形链表的约瑟夫问题

目录 题目描述&#xff1a; 输入描述&#xff1a; 输出描述&#xff1a; 示例1 解法一&#xff08;C&#xff09;&#xff1a; 解法二&#xff08;Cpp&#xff09;&#xff1a; 正文开始&#xff1a; 题目描述&#xff1a; 据说著名犹太历史学家 Josephus 有过以下故事&a…

Pytest测试用例参数化

pytest.mark.parametrize(参数名1,参数名2...参数n, [(参数名1_data1,参数名2_data1...参数名n_data1),(参数名1_data2,参数名2_data2...参数名n_data2)]) 场景&#xff1a; 定义一个登录函数test_login,传入参数为name,password&#xff0c;需要用多个账号去测试登录功能 # …

[职场] 留学生课程辅导待遇 #媒体#经验分享#其他

留学生课程辅导待遇 留学生课程辅导师需要具备专业知识和良好的沟通技巧&#xff0c;能够全面帮助留学生解决学习和生活方面的问题&#xff0c;提高留学生的学习效果和适应能力。 工作内容&#xff1a; 1.提供学习计划和课程指导&#xff1a;留学生课程辅导师可以帮助留学生…

JAVA方法引用:

方法引用的出现原因在使用Lambda表达式的时候&#xff0c;我们实际上传递进去的代码就是一种解决方案&#xff1a;拿参数做操作那么考虑一种情况&#xff1a;如果我们在Lambda中所指定的操作方案&#xff0c;已经有地方存在相同方案&#xff0c;那是否还有必要再写重复逻辑呢&a…

Go中的并发性介绍

并发是一个很酷的话题&#xff0c;一旦你掌握了它&#xff0c;就会成为一笔巨大的财富。说实话&#xff0c;我一开始很害怕写这篇文章&#xff0c;因为我自己直到最近才对并发性不太适应。我已经掌握了基础知识&#xff0c;所以我想帮助其他初学者学习Go的并发性。这是众多并发…

Java SWT Composite 绘画

Java SWT Composite 绘画 1 Java SWT2 Java 图形框架 AWT、Swing、SWT、JavaFX2.1 Java AWT (Abstract Window Toolkit)2.2 Java Swing2.3 Java SWT (Standard Widget Toolkit)2.4 Java JavaFX 3 比较和总结 1 Java SWT Java SWT&#xff08;Standard Widget Toolkit&#xff…

C++从零开始的打怪升级之路(day30)

这是关于一个普通双非本科大一学生的C的学习记录贴 在此前&#xff0c;我学了一点点C语言还有简单的数据结构&#xff0c;如果有小伙伴想和我一起学习的&#xff0c;可以私信我交流分享学习资料 那么开启正题 今天分享的是关于list的基本函数使用 list是一个双向带头循环的…

02 使用jdk运行第一个java程序:HelloWorld

使用jdk运行第一个java程序 1 HelloWorld小案例1.1 编写流程1.2 错误示例 首先在CMD命令行里面&#xff0c;使用javac xxxx.java&#xff0c; 进行编译&#xff0c;其中会有报错&#xff1b; 然后生成xxxx.class 文件&#xff0c;然后使用java xxxx.class 进行运行。 1 HelloWo…