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 摇杆,分享一个虚拟摇杆，比较粗糙，没做优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。