html5 摇杆,分享一个虚拟摇杆,比较粗糙,没做优化
function ModeKey() {
//大圆
this.moveMax = null;
//小圆点
this.moveKey = null;
//当前的舞台
this.layer = null;
//是否按下
this.isDown = false;
//是否弹起
this.isUp = false;
//是否移动
this.isMove = false;
}
tip:其实是否按下,是否弹起和是否移动,有点多余了
//初始化你预先设置的参数
ModeKey.prototype.init = function () {
console.log(this.moveKey, this.layer, this.moveMax)
this.moveKey.on(Laya.Event.MOUSE_DOWN, this, this.downFun);
//记录一开始小圆点的位置,方便鼠标弹起的时候自动返回开始位置
this.moveKey.mode = {x: this.moveKey.x, y: this.moveKey.y}
}
//按下事件
ModeKey.prototype.downFun = function (e) {
this.isDown = true;
this.starX = e.stageX;
this.starY = e.stageY;
//添加弹起和移动事件
this.layer.on(Laya.Event.MOUSE_UP, this, this.upFun);
this.layer.on(Laya.Event.MOUSE_MOVE, this, this.moveFun);
}
//弹起事件
ModeKey.prototype.upFun = function () {
this.isDown = false;
this.isUp = false;
this.isMove = false;
this.isMode = "stop";
//移除弹起和移动事件
this.layer.off(Laya.Event.MOUSE_UP, this, this.upFun);
this.layer.off(Laya.Event.MOUSE_MOVE, this, this.moveFun);
Laya.Tween.to(this.moveKey, { x: this.moveKey.mode.x, y: this.moveKey.mode.y }, 100)
}
//鼠标移动事件
ModeKey.prototype.moveFun = function (e) {
if (!this.isDown) return;
this.moveX = e.stageX;
this.moveY = e.stageY;
this.isMode = "run";
// 获取半径
var r = Math.sqrt(Math.pow((this.starX - this.moveX), 2) + Math.pow((this.starY - this.moveY), 2));
//当移动半径大于大圆的半径时,半径等于大圆的0.5的宽度(也就是半径)
if (r >= this.moveMax.width/2) r = this.moveMax.width/2;
var angle = Math.atan2(this.moveY - this.starY, this.moveX - this.starX);
bottonX = Math.cos(angle) * r + this.starX+(this.moveMax.x - this.starX);
bottonY = Math.sin(angle) * r + this.starY+(this.moveMax.y - this.starY);
this.moveKey.x =bottonX ;
this.moveKey.y =bottonY ;
var degree = (angle * 180 / Math.PI)+180;
//在this.con.backData(degree)方法里获取到degree的值也就是角度值,然后你可以自己判断任务方位
//返回当前的一个方法
backData(degree)
}--------------------------------------------------------美丽的分割线--------------------------------------------------------
调用方法
在你的舞台上调用该方法即可运行
这里的this指向你当前的舞台;
比如你当前的舞台为 gameLayer
modeKey = new ModeKey();
// 外层
modeKey.moveMax = 大圆按钮;
// 圆点层
modeKey.moveKey =小圆按钮
modeKey.layer = gameLayer
modeKey.init();//
function backData (data){
console.log(data)
}
----------------------------------------------------结束分割线---------------------------------------------------------------
html5 摇杆,分享一个虚拟摇杆,比较粗糙,没做优化相关推荐
- unity中的2D虚拟摇杆和3D虚拟摇杆
源代码链接https://github.com/hiramtan/HiJoystick_unity 如何使用 可以从此链接下载最新的unity package: 完成功能 2D虚拟摇杆 3D虚拟摇杆 ...
- html5 海浪,分享一个利用HTML5制作的海浪效果代码
在前面简单讲述了一下HTML里的Canvas,这次根据Canvas完成了"海浪效果"(水波上升). (O(∩_∩)O哈哈哈~作者我能看这个动画看一下午) 上升水波.gif动画分析 ...
- 分享一个自媒体副业,认真做可以月入6000+
做的这个副业并不难,每天花费2-3小时做视频剪辑,上个月一个新账号收益6000多. 如果你现在每天的空闲时间比较多,也可以去尝试着做一下视频剪辑. 这期内容来把方法分享给粉丝们,如果对你有所帮助,记得 ...
- 我有一个顶会idea还没做实验,NeurIPS:先占坑再实验!
作者 | 青 暮 相信大家对费马大定理都不陌生,x^n +y^n=z^n.一个简单无比的方程式却是难到几百年后才被数学家解决.而这其中最令人着迷的,当属费马当年在手稿留下的一句话:我这里有一个绝妙的证 ...
- 自定义虚拟摇杆组件让你一劳永逸
最近在研究虚拟摇杆实现方式的时候,发现网上的教程的实现方式可移植性并不是特别好,于是我决定自己实现一个虚拟摇杆组件,保存到自己的组件库,方便以后用到的时候直接使用(关注公众号后台回复「虚拟摇杆组件」可 ...
- Cocos 2d-js 虚拟摇杆
虚拟摇杆是在手机格斗游戏中经常看到的一个东西,用来控制人物的8个方向的行走,今天就来了解一下如何在cocos2d-js实现一个虚拟摇杆... // 虚拟摇杆类型 var ROCKER_TYPE = R ...
- 微信小程序之虚拟摇杆练习
这段时间研究了一下微信小程序,对小程序有了大概的了解,由于项目需要做一个虚拟摇杆,查了一下发现跟小程序相关的教程非常少,更别说是具体的一些功能实现如虚拟摇杆,所以还是自己动手做一个吧. 本教程适合对微 ...
- Unity 简单的虚拟摇杆
需求:点击创建一个虚拟摇杆底盘,鼠标拖拽时候上方摇杆会跟随鼠标方向移动,并且不会超出摇杆盘范围 *摇杆功能另外实现 UI显示 using System.Collections; using Syste ...
- EasyTouch中虚拟摇杆的使用EasyJoystick
unity3d自带的虚拟摇杆显然没有EasyTouch好用 首先下载这个插件 http://pan.baidu.com/s/1hqJAbTa 下载完成后.导入到unity,可以看看里面的案例 找到这个 ...
- Unity用UGUI做虚拟摇杆
一.首先点击UI创建两个Image,将Image的Source Image改成自己想要的Texture即可,然后在Canvas下创建一空物体,将两个Image放在空物体下作为他的子对象: 然后为可以拖 ...
最新文章
- 告别排队!用Python定时自动挂号和快捷查询化验报告
- 简单的dns解析过程
- 多个linux发行版本混合安装盘,使用 MultiBootUSB 安装多个 Linux 版本
- mme设备内部错误_防爆电气设备安装的三大误区 你中招了没?
- 今日arXiv精选 | 4篇EMNLP 2021最新论文
- kubernetes(一)kubeadm搭建k8s集群
- Java库转oc_急急急!各位大神:一段JAVA代码转成OC代码。
- 目录-OpenGL编程指南
- 存储基础知识--存储网络
- 四级英语测试软件,英语四级必备软件推荐
- TCA9548A IIC多路扩展模块使用
- 使用echarts画设备拓扑图
- 【非原创 遥感卫星信息整理汇总-02】国外遥感卫星信息汇总
- Swi-Prolog 数值约束
- 顺丰科技2018校园招聘在线笔试题
- word忘记密码处理
- 服务器生成js文件,Next.js 静态生成和服务器端渲染
- Android WiFi系统
- java版通过轨道6根数实现计算出经纬度坐标
- 重庆大学计算机学院新生综合,重庆大学