Question

我有一个游戏的一部分，光标应该放慢速度＆＃34;当它超过某些div时。我使用的功能可以检测到与div的冲突。当光标遇到第一个div时，这种方法很好，但它在第二个div上根本不起作用。

Check out this jsFiddle更好地了解我所谈论的内容。将光标移到左侧的第一个白色块（class='thing'）上，然后减慢速度。将光标移到另一个块（也是class='thing'）上，没有任何反应。我需要这个碰撞功能来处理class='thing'。

所有的div

HTML

<div id='cursor'>
            &nbsp;
        </div>
        <div class='thing' style='width:70px; height:70px; background: #fff; position: absolute; bottom: 350px; right: 800px; z-index: -1;'>
            &nbsp;
        </div>
        <div class='thing' style='width:70px; height:70px; background: #fff; position: absolute; bottom: 200px; right: 400px; z-index: -1;'>
            &nbsp;
        </div>

JS

(function collide(){
var newInt = setInterval(function() {
function collision($cursor, $thing) {
    var x1 = $cursor.offset().left;
    var y1 = $cursor.offset().top;
    var h1 = $cursor.outerHeight(true);
    var w1 = $cursor.outerWidth(true);
    var b1 = y1 + h1;
    var r1 = x1 + w1;
    var x2 = $thing.offset().left;
    var y2 = $thing.offset().top;
    var h2 = $thing.outerHeight(true);
    var w2 = $thing.outerWidth(true);
    var b2 = y2 + h2;
    var r2 = x2 + w2;

    // change 12 to alter damping higher is slower
    var varies = 12;    

    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2){
    } else {
    varies = 200;
    console.log(varies);
    }
$xp += (($mouseX - $xp)/varies);
    $yp += (($mouseY - $yp)/varies);
    $("#cursor").css({left:$xp +'px', top:$yp +'px'}); 

}

$(collision($('#cursor'), $('.thing')));
//$('.result').text(collision($('#cursor'), $('.thing')));

}, 20);
})();

Answer 1

$thing是一个元素集合，就像你想要的那样，但这里的问题是你要求$thing的特定属性，如offset().left;，它不能返回多个数字，因此它只需要第一个。你应该做的是使用.each()函数循环遍历$thing中的所有元素。

$thing.each( function( index, element ){
    //your code for each thing here
});

Answer 2

当您在jQuery中按类名选择元素（在您的情况下使用.thing）时，您将获得一个元素数组，collision()函数将获取数组中的第一个元素。所以要克服这个问题，你需要使用id作为选择器来唯一地选择这两个元素。你可以像下面那样改变你的代码来按预期工作

<div id='track'>
    <div class = 'container'>
        <div id='cursor' class='cursor'>
            &nbsp;
        </div>
        <div class='thing' id="a1" style='width:70px; height:70px; background: #fff; position: absolute; bottom: 175px; right: 400px; z-index: -1;'>
            &nbsp;
        </div>
        <div class='thing' id="a2"  style='width:70px; height:70px; background: #fff; position: absolute; bottom: 100px; right: 200px; z-index: -1;'>
            &nbsp;
        </div>
    </div>
</div>


(function cursorMapping(){

var $mouseX = 0, $mouseY = 0;
var $xp = 0, $yp =0;

$(document).mousemove(function(e){
    $mouseX = e.pageX;
    $mouseY = e.pageY;    
});

function showCoords(event) {
    var x = event.clientX;
    var y = event.clientY;
    var coor = "X: " + x + ", Y: " + y;
}

var timestamp = null;
var lastMouseX = null;
var lastMouseY = null;

var mrefreshinterval = 500; // update display every 500ms
 var lastmousex=-1; 
 var lastmousey=-1;
 var lastmousetime;
 var mousetravel = 0;
 var lastmousetravel = 0;

var speed;
var marker1 = 1;
var marker2 = 1;

var timer = setInterval(function(){
    marker1;
    marker2;
}, 20);

$(function() {

    var $speedometer = $('#speed'),
         _speed = 0; 

    $('#track').cursometer({
        onUpdateSpeed: function thisSpeed(speed) {
            _speed = speed;
            $speedometer.text(Math.ceil(speed * 100)/100);
        },
        updateSpeedRate: 20
    });

});

var thisInterval = setInterval(function FXInterval(){
    speed = $('#speed').text();
        $('#cursor').css({'background-color': '#CE7A7A'});
}, 20);

 $('html').mousemove(function(e) {
     var mousex = e.pageX;
     var mousey = e.pageY;
     if (lastmousex > -1)
         mousetravel += Math.max( Math.abs(mousex-lastmousex), Math.abs(mousey-lastmousey) );
     lastmousex = mousex;
     lastmousey = mousey;
     var speed = lastmousex + lastmousey;

    setTimeout(function(){
        lastmousetravel = mousetravel;
    }, 20);
 });

(function collide(){
var newInt = setInterval(function() {
function collision($cursor, $thing) {
    var x1 = $cursor.offset().left;
    var y1 = $cursor.offset().top;
    var h1 = $cursor.outerHeight(true);
    var w1 = $cursor.outerWidth(true);
    var b1 = y1 + h1;
    var r1 = x1 + w1;
    var x2 = $thing.offset().left;
    var y2 = $thing.offset().top;
    var h2 = $thing.outerHeight(true);
    var w2 = $thing.outerWidth(true);
    var b2 = y2 + h2;
    var r2 = x2 + w2;

    // change 12 to alter damping higher is slower
    var varies = 12;    

    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2){
    } else {
    varies = 200;
    console.log(varies);
    }
$xp += (($mouseX - $xp)/varies);
    $yp += (($mouseY - $yp)/varies);
    $("#cursor").css({left:$xp +'px', top:$yp +'px'}); 
}
$(collision($('#cursor'), $('#a1')));
$(collision($('#cursor'), $('#a2')));

}, 20);
})();

})();

JavaScript函数仅影响带有类的第一个div

2 个答案: