Javascript 两个虚拟操纵杆不来了_Javascript_Backbone.js

Javascript 两个虚拟操纵杆不来了

javascript backbone.js

Javascript 两个虚拟操纵杆不来了,javascript,backbone.js,Javascript,Backbone.js,我试图在下面提供的代码的帮助下在一页上制作两个操纵杆，但只有一个操纵杆出现。我将一个-一个操纵杆放在不同的jumbotron中，以区别。我甚至尝试使用不同的div id，但仍然不起作用。本例中还会出现第二个jumbotron操纵杆。有什么可以帮忙的吗？？代码：流体巨磁振子这是一个经过修改的巨型机器人，它占据了其父机器人的整个水平空间 firstx: y: $（文档）.ready（函数（）{ var joystickView=新的joystickView（150，函数（callbackV

我试图在下面提供的代码的帮助下在一页上制作两个操纵杆，但只有一个操纵杆出现。我将一个-一个操纵杆放在不同的jumbotron中，以区别。我甚至尝试使用不同的div id，但仍然不起作用。本例中还会出现第二个jumbotron操纵杆。有什么可以帮忙的吗？？代码：


流体巨磁振子
这是一个经过修改的巨型机器人，它占据了其父机器人的整个水平空间
firstx:

y:

$（文档）.ready（函数（）{
var joystickView=新的joystickView（150，函数（callbackView）{
$（“#joystickContent”）.append（callbackView.render（）.el）；
setTimeout（函数（）{
callbackView.renderSprite（）；
}, 0);
});
joystickView.bind（“垂直移动”，函数（y）{
$（“#yVal”）.html（y）；
});
joystickView.bind（“水平移动”，函数（x）{
$（“#xVal”）.html（x）；
});
});
流体巨磁振子
这是一个经过修改的巨型机器人，它占据了其父机器人的整个水平空间
x:

y:

$（文档）.ready（函数（）{
var joystickView1=新的JoystickView（150，函数（callbackView）{
$（“#joystickContent”）.append（callbackView.render（）.el）；
setTimeout（函数（）{
callbackView.renderSprite（）；
}, 0);
});
joystickView.bind（“垂直移动”，函数（y）{
$（“#yVal”）.html（y）；
});
joystickView.bind（“水平移动”，函数（x）{
$（“#xVal”）.html（x）；
});
});

此外，javascript代码还能正常工作：

var INACTIVE = 0;
var ACTIVE = 1;
var SECONDS_INACTIVE = 0.5;

function loadSprite(src, callback) {
    var sprite = new Image();
    sprite.onload = callback;
    sprite.src = src;
    return sprite;
}


JoystickView = Backbone.View.extend({
    events: {
        "touchstart": "startControl",
        "touchmove": "move",
        "touchend": "endCotrol",
        "mousedown": "startControl",
        "mouseup": "endControl",
        "mousemove": "move"
    },
    initialize: function(squareSize, finishedLoadCallback){
        this.squareSize = squareSize;
        this.template = _.template($("#joystick-view").html());
        this.state = INACTIVE;
        this.x = 0;
        this.y = 0;
        this.canvas = null;
        this.context = null;
        this.radius = (this.squareSize / 2) * 0.5;

        this.finishedLoadCallback = finishedLoadCallback;

        this.joyStickLoaded = false;
        this.backgroundLoaded = false;
        this.lastTouch = new Date().getTime();
        self = this;
        setTimeout(function(){
            self._retractJoystickForInactivity();
        }, 1000);
        this.sprite = loadSprite("img/button.png", function(){
            self.joyStickLoaded = true;
            self._tryCallback();
        });
        this.background = loadSprite("img/canvas.png", function(){
            self.backgroundLoaded = true;
            self._tryCallback();
        });
    },
    _retractJoystickForInactivity: function(){
        var framesPerSec = 15;
        var self = this;
        setTimeout(function(){
            var currentTime = new Date().getTime();
            if(currentTime - self.lastTouch >= SECONDS_INACTIVE * 1000){
                self._retractToMiddle();
                self.renderSprite();
            }
            self._retractJoystickForInactivity();
        }, parseInt(1000 / framesPerSec, 10));
    },
    _tryCallback: function(){
        if(this.backgroundLoaded && this.joyStickLoaded){
            var self = this;
            this.finishedLoadCallback(self);
        }
    },
    startControl: function(evt){
        this.state = ACTIVE;
    },
    endControl: function(evt){
        this.state = INACTIVE;
        this.x = 0;
        this.y = 0;
        this.renderSprite();
    },
    move: function(evt){
        if(this.state == INACTIVE){
            return;
        }
        this.lastTouch = new Date().getTime();

        var x, y;


        if(evt.originalEvent && evt.originalEvent.touches){
            evt.preventDefault();
            var left = 0;
            var fromTop = 0;
            elem = $(this.canvas)[0];
            while(elem) {
                left = left + parseInt(elem.offsetLeft);
                fromTop = fromTop + parseInt(elem.offsetTop);
                elem = elem.offsetParent;
            }
            x = evt.originalEvent.touches[0].clientX - left;
            y = evt.originalEvent.touches[0].clientY - fromTop;
        } else {
            x = evt.offsetX;
            y = evt.offsetY;
        }
        this._mutateToCartesian(x, y);
        this._triggerChange();
    },
    _triggerChange: function(){
        var xPercent = this.x / this.radius;
        var yPercent = this.y / this.radius;
        if(Math.abs(xPercent) > 1.0){
            xPercent /= Math.abs(xPercent);
        }
        if(Math.abs(yPercent) > 1.0){
            yPercent /= Math.abs(yPercent);
        }
        this.trigger("horizontalMove", xPercent);
        this.trigger("verticalMove", yPercent);
    },
    _mutateToCartesian: function(x, y){
        x -= (this.squareSize) / 2;
        y *= -1;
        y += (this.squareSize) / 2;
        if(isNaN(y)){
            y = this.squareSize / 2;
        }

        this.x = x;
        this.y = y;
        if(this._valuesExceedRadius(this.x, this.y)){
            this._traceNewValues();
        }
        this.renderSprite();
    },
    _retractToMiddle: function(){
        var percentLoss = 0.1;
        var toKeep = 1.0 - percentLoss;

        var xSign = 1;
        var ySign = 1;

        if(this.x != 0){
            xSign = this.x / Math.abs(this.x);
        }
        if(this.y != 0) {
            ySign = this.y / Math.abs(this.y);
        }

        this.x = Math.floor(toKeep * Math.abs(this.x)) * xSign;
        this.y = Math.floor(toKeep * Math.abs(this.y)) * ySign;
    },
    _traceNewValues: function(){
        var slope = this.y / this.x;
        var xIncr = 1;
        if(this.x < 0){
            xIncr = -1;
        }
        for(var x=0; x<this.squareSize / 2; x+=xIncr){
            var y = x * slope;
            if(this._valuesExceedRadius(x, y)){
                break;
            }
        }
        this.x = x;
        this.y = y;
    },
    _cartesianToCanvas: function(x, y){
        var newX = x + this.squareSize / 2;
        var newY = y - (this.squareSize / 2);
        newY = newY * -1;
        return {
            x: newX,
            y: newY
        }
    },
    _valuesExceedRadius: function(x, y){
        if(x === 0){
            return y > this.radius;
        }
        return Math.pow(x, 2) + Math.pow(y, 2) > Math.pow(this.radius, 2);
    },
    renderSprite: function(){
        var originalWidth = 89;
        var originalHeight = 89;

        var spriteWidth = 50;
        var spriteHeight = 50;
        var pixelsLeft = 0; //ofset for sprite on img
        var pixelsTop = 0; //offset for sprite on img
        var coords = this._cartesianToCanvas(this.x, this.y);
        if(this.context == null){
            return;
        }
        // hack dunno why I need the 2x
        this.context.clearRect(0, 0, this.squareSize * 2, this.squareSize);

        var backImageSize = 300;
        this.context.drawImage(this.background,
            0,
            0,
            backImageSize,
            backImageSize,
            0,
            0,
            this.squareSize,
            this.squareSize
        )
        this.context.drawImage(this.sprite,
            pixelsLeft,
            pixelsTop,
            originalWidth,
            originalHeight,
            coords.x - spriteWidth / 2,
            coords.y - spriteHeight / 2,
            spriteWidth,
            spriteHeight
        );
    },
    render: function(){
        var renderData = {
            squareSize: this.squareSize
        };
        this.$el.html(this.template(renderData));
        this.canvas = this.$('#joystickCanvas')[0];
        this.context = this.canvas.getContext('2d');
        this.renderSprite();
        return this;
    }
});

var-INACTIVE=0；
var-ACTIVE=1；
无功秒数=0.5；
函数loadSprite（src，回调）{
var sprite=新图像（）；
sprite.onload=回调；
sprite.src=src；
返回精灵；
}
JoystickView=Backbone.View.extend({
活动：{
“touchstart”：“startControl”，
“触摸移动”：“移动”，
“touchend”：“endCotrol”，
“mousedown”：“startControl”，
“鼠标悬停”：“结束控制”，
“鼠标移动”：“移动”
},
初始化：函数（squareSize，finishedLoadCallback）{
这个.squareSize=squareSize；
this.template=..template（$（“#操纵杆视图”）.html（）；
this.state=不活动；
这个.x=0；
这个。y=0；
this.canvas=null；
this.context=null；
this.radius=（this.squareSize/2）*0.5；
this.finishedLoadCallback=finishedLoadCallback；
this.joystickloated=false；
this.backgroundLoaded=false；
this.lastTouch=new Date（）.getTime（）；
self=这个；
setTimeout（函数（）{
self._rectractjoystickforinactivity（）；
}, 1000);
this.sprite=loadSprite（“img/button.png”，function（））{
self.joystickloated=true；
self._tryCallback（）；
});
this.background=loadSprite（“img/canvas.png”，function（））{
self.backgroundload=true；
self._tryCallback（）；
});
},
_retractJoystickForInactivity:函数（）{
var framesPerSec=15；
var self=这个；
setTimeout（函数（）{
var currentTime=new Date（）.getTime（）；
如果（currentTime-self.lastTouch>=秒\u非活动*1000）{
self._retractomidle（）；
self.renderSprite（）；
}
self._rectractjoystickforinactivity（）；
}，parseInt（1000/framesPerSec，10））；
},
_tryCallback:function（）{
if（this.backgroundLoaded&&this.joystickload）{
var self=这个；
这个.finishedLoadCallback（self）；
}
},
启动控制：功能（evt）{
this.state=ACTIVE；
},
endControl:功能（evt）{
this.state=不活动；
这个.x=0；
这个。y=0；
this.renderSprite（）；
},
移动：功能（evt）{
如果（this.state==非活动）{
返回；
}
this.lastTouch=new Date（）.getTime（）；
变量x，y；
if（evt.originalEvent&&evt.originalEvent.touchs）{
evt.preventDefault（）；
左向量=0；
var fromTop=0；
elem=$（this.canvas）[0]；
while（elem）{
left=left+parseInt（elem.offsetLeft）；
fromTop=fromTop+parseInt（元素偏移）；
elem=elem.offsetParent；
}
x=evt.originalEvent.touch[0].clientX-左；
y=evt.originalEvent.touch[0].clientY-fromTop；
}否则{
x=evt.offsetX；
y=evt.offsetY；
}
这是笛卡尔坐标（x，y）；
这个._triggerChange（）；
},
_triggerChange:function（）{
var xPercent=this.x/this.radius；
var yPercent=this.y/this.radius；
如果（数学绝对值（X百分比）>1.0）{
xPercent/=Math.abs（xPercent）；
}
如果（数学abs（yPercent）>1.0）{
yPercent/=Math.abs（yPercent）；
}
此触发器（“水平移动”，xPercent）；
这个。触发器（“垂直移动”，yPercent）；
},
_笛卡尔函数（x，y）{
x-=（这个平方大小）/2；
y*=-1；
y+=（这个平方大小）/2；
if（isNaN（y））{
y=该尺寸的平方米/2；
}
这个.x=x；
这个。y=y；
if（this.\u值sexceedradius（this.x，this.y））{
这
var INACTIVE = 0;
var ACTIVE = 1;
var SECONDS_INACTIVE = 0.5;

function loadSprite(src, callback) {
    var sprite = new Image();
    sprite.onload = callback;
    sprite.src = src;
    return sprite;
}


JoystickView = Backbone.View.extend({
    events: {
        "touchstart": "startControl",
        "touchmove": "move",
        "touchend": "endCotrol",
        "mousedown": "startControl",
        "mouseup": "endControl",
        "mousemove": "move"
    },
    initialize: function(squareSize, finishedLoadCallback){
        this.squareSize = squareSize;
        this.template = _.template($("#joystick-view").html());
        this.state = INACTIVE;
        this.x = 0;
        this.y = 0;
        this.canvas = null;
        this.context = null;
        this.radius = (this.squareSize / 2) * 0.5;

        this.finishedLoadCallback = finishedLoadCallback;

        this.joyStickLoaded = false;
        this.backgroundLoaded = false;
        this.lastTouch = new Date().getTime();
        self = this;
        setTimeout(function(){
            self._retractJoystickForInactivity();
        }, 1000);
        this.sprite = loadSprite("img/button.png", function(){
            self.joyStickLoaded = true;
            self._tryCallback();
        });
        this.background = loadSprite("img/canvas.png", function(){
            self.backgroundLoaded = true;
            self._tryCallback();
        });
    },
    _retractJoystickForInactivity: function(){
        var framesPerSec = 15;
        var self = this;
        setTimeout(function(){
            var currentTime = new Date().getTime();
            if(currentTime - self.lastTouch >= SECONDS_INACTIVE * 1000){
                self._retractToMiddle();
                self.renderSprite();
            }
            self._retractJoystickForInactivity();
        }, parseInt(1000 / framesPerSec, 10));
    },
    _tryCallback: function(){
        if(this.backgroundLoaded && this.joyStickLoaded){
            var self = this;
            this.finishedLoadCallback(self);
        }
    },
    startControl: function(evt){
        this.state = ACTIVE;
    },
    endControl: function(evt){
        this.state = INACTIVE;
        this.x = 0;
        this.y = 0;
        this.renderSprite();
    },
    move: function(evt){
        if(this.state == INACTIVE){
            return;
        }
        this.lastTouch = new Date().getTime();

        var x, y;


        if(evt.originalEvent && evt.originalEvent.touches){
            evt.preventDefault();
            var left = 0;
            var fromTop = 0;
            elem = $(this.canvas)[0];
            while(elem) {
                left = left + parseInt(elem.offsetLeft);
                fromTop = fromTop + parseInt(elem.offsetTop);
                elem = elem.offsetParent;
            }
            x = evt.originalEvent.touches[0].clientX - left;
            y = evt.originalEvent.touches[0].clientY - fromTop;
        } else {
            x = evt.offsetX;
            y = evt.offsetY;
        }
        this._mutateToCartesian(x, y);
        this._triggerChange();
    },
    _triggerChange: function(){
        var xPercent = this.x / this.radius;
        var yPercent = this.y / this.radius;
        if(Math.abs(xPercent) > 1.0){
            xPercent /= Math.abs(xPercent);
        }
        if(Math.abs(yPercent) > 1.0){
            yPercent /= Math.abs(yPercent);
        }
        this.trigger("horizontalMove", xPercent);
        this.trigger("verticalMove", yPercent);
    },
    _mutateToCartesian: function(x, y){
        x -= (this.squareSize) / 2;
        y *= -1;
        y += (this.squareSize) / 2;
        if(isNaN(y)){
            y = this.squareSize / 2;
        }

        this.x = x;
        this.y = y;
        if(this._valuesExceedRadius(this.x, this.y)){
            this._traceNewValues();
        }
        this.renderSprite();
    },
    _retractToMiddle: function(){
        var percentLoss = 0.1;
        var toKeep = 1.0 - percentLoss;

        var xSign = 1;
        var ySign = 1;

        if(this.x != 0){
            xSign = this.x / Math.abs(this.x);
        }
        if(this.y != 0) {
            ySign = this.y / Math.abs(this.y);
        }

        this.x = Math.floor(toKeep * Math.abs(this.x)) * xSign;
        this.y = Math.floor(toKeep * Math.abs(this.y)) * ySign;
    },
    _traceNewValues: function(){
        var slope = this.y / this.x;
        var xIncr = 1;
        if(this.x < 0){
            xIncr = -1;
        }
        for(var x=0; x<this.squareSize / 2; x+=xIncr){
            var y = x * slope;
            if(this._valuesExceedRadius(x, y)){
                break;
            }
        }
        this.x = x;
        this.y = y;
    },
    _cartesianToCanvas: function(x, y){
        var newX = x + this.squareSize / 2;
        var newY = y - (this.squareSize / 2);
        newY = newY * -1;
        return {
            x: newX,
            y: newY
        }
    },
    _valuesExceedRadius: function(x, y){
        if(x === 0){
            return y > this.radius;
        }
        return Math.pow(x, 2) + Math.pow(y, 2) > Math.pow(this.radius, 2);
    },
    renderSprite: function(){
        var originalWidth = 89;
        var originalHeight = 89;

        var spriteWidth = 50;
        var spriteHeight = 50;
        var pixelsLeft = 0; //ofset for sprite on img
        var pixelsTop = 0; //offset for sprite on img
        var coords = this._cartesianToCanvas(this.x, this.y);
        if(this.context == null){
            return;
        }
        // hack dunno why I need the 2x
        this.context.clearRect(0, 0, this.squareSize * 2, this.squareSize);

        var backImageSize = 300;
        this.context.drawImage(this.background,
            0,
            0,
            backImageSize,
            backImageSize,
            0,
            0,
            this.squareSize,
            this.squareSize
        )
        this.context.drawImage(this.sprite,
            pixelsLeft,
            pixelsTop,
            originalWidth,
            originalHeight,
            coords.x - spriteWidth / 2,
            coords.y - spriteHeight / 2,
            spriteWidth,
            spriteHeight
        );
    },
    render: function(){
        var renderData = {
            squareSize: this.squareSize
        };
        this.$el.html(this.template(renderData));
        this.canvas = this.$('#joystickCanvas')[0];
        this.context = this.canvas.getContext('2d');
        this.renderSprite();
        return this;
    }
});