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 摇杆,分享一个虚拟摇杆,比较粗糙,没做优化相关推荐

  1. unity中的2D虚拟摇杆和3D虚拟摇杆

    源代码链接https://github.com/hiramtan/HiJoystick_unity 如何使用 可以从此链接下载最新的unity package: 完成功能 2D虚拟摇杆 3D虚拟摇杆 ...

  2. html5 海浪,分享一个利用HTML5制作的海浪效果代码

    在前面简单讲述了一下HTML里的Canvas,这次根据Canvas完成了"海浪效果"(水波上升). (O(∩_∩)O哈哈哈~作者我能看这个动画看一下午) 上升水波.gif动画分析 ...

  3. 分享一个自媒体副业,认真做可以月入6000+

    做的这个副业并不难,每天花费2-3小时做视频剪辑,上个月一个新账号收益6000多. 如果你现在每天的空闲时间比较多,也可以去尝试着做一下视频剪辑. 这期内容来把方法分享给粉丝们,如果对你有所帮助,记得 ...

  4. 我有一个顶会idea还没做实验,NeurIPS:先占坑再实验!

    作者 | 青 暮 相信大家对费马大定理都不陌生,x^n +y^n=z^n.一个简单无比的方程式却是难到几百年后才被数学家解决.而这其中最令人着迷的,当属费马当年在手稿留下的一句话:我这里有一个绝妙的证 ...

  5. 自定义虚拟摇杆组件让你一劳永逸

    最近在研究虚拟摇杆实现方式的时候,发现网上的教程的实现方式可移植性并不是特别好,于是我决定自己实现一个虚拟摇杆组件,保存到自己的组件库,方便以后用到的时候直接使用(关注公众号后台回复「虚拟摇杆组件」可 ...

  6. Cocos 2d-js 虚拟摇杆

    虚拟摇杆是在手机格斗游戏中经常看到的一个东西,用来控制人物的8个方向的行走,今天就来了解一下如何在cocos2d-js实现一个虚拟摇杆... // 虚拟摇杆类型 var ROCKER_TYPE = R ...

  7. 微信小程序之虚拟摇杆练习

    这段时间研究了一下微信小程序,对小程序有了大概的了解,由于项目需要做一个虚拟摇杆,查了一下发现跟小程序相关的教程非常少,更别说是具体的一些功能实现如虚拟摇杆,所以还是自己动手做一个吧. 本教程适合对微 ...

  8. Unity 简单的虚拟摇杆

    需求:点击创建一个虚拟摇杆底盘,鼠标拖拽时候上方摇杆会跟随鼠标方向移动,并且不会超出摇杆盘范围 *摇杆功能另外实现 UI显示 using System.Collections; using Syste ...

  9. EasyTouch中虚拟摇杆的使用EasyJoystick

    unity3d自带的虚拟摇杆显然没有EasyTouch好用 首先下载这个插件 http://pan.baidu.com/s/1hqJAbTa 下载完成后.导入到unity,可以看看里面的案例 找到这个 ...

  10. Unity用UGUI做虚拟摇杆

    一.首先点击UI创建两个Image,将Image的Source Image改成自己想要的Texture即可,然后在Canvas下创建一空物体,将两个Image放在空物体下作为他的子对象: 然后为可以拖 ...

最新文章

  1. 告别排队!用Python定时自动挂号和快捷查询化验报告
  2. 简单的dns解析过程
  3. 多个linux发行版本混合安装盘,使用 MultiBootUSB 安装多个 Linux 版本
  4. mme设备内部错误_防爆电气设备安装的三大误区 你中招了没?
  5. 今日arXiv精选 | 4篇EMNLP 2021最新论文
  6. kubernetes(一)kubeadm搭建k8s集群
  7. Java库转oc_急急急!各位大神:一段JAVA代码转成OC代码。
  8. 目录-OpenGL编程指南
  9. 存储基础知识--存储网络
  10. 四级英语测试软件,英语四级必备软件推荐
  11. TCA9548A IIC多路扩展模块使用
  12. 使用echarts画设备拓扑图
  13. 【非原创 遥感卫星信息整理汇总-02】国外遥感卫星信息汇总
  14. Swi-Prolog 数值约束
  15. 顺丰科技2018校园招聘在线笔试题
  16. word忘记密码处理
  17. 服务器生成js文件,Next.js 静态生成和服务器端渲染
  18. Android WiFi系统
  19. java版通过轨道6根数实现计算出经纬度坐标
  20. 重庆大学计算机学院新生综合,重庆大学

热门文章

  1. 【软考】中级软件设计师的一些知识点笔记(22.2.10)
  2. ClassLoader类加载器,以及双亲委派模型
  3. 快速排序 时间复杂度计算
  4. jq js json 转字符串_js-jquery-对象与JSON字符串互相转换
  5. NLP 学习笔记9-停用词
  6. chrome插件Adblock Plus拓展程序
  7. 关于兰伯特投影得应用问题
  8. linux谷歌浏览器无法登陆,新版CentOS 7.1上的谷歌浏览器无法启动
  9. 计算机大写改成拼音形式,拼音转换
  10. 海康—SADP激活(设备网络搜索)