JavaScript関数はクラスの最初のdivにのみ影響します

Question

私は、あるdivを通過するときにカーソルが「減速する」と思われるゲームの一部を持っています。私はdivとの衝突を検出できる関数を使用しています。これは、カーソルが最初のdivを満たしてもうまく動作しますが、2番目のdivではまったく動作しません。

Check out this jsFiddle私が話していることのより良いアイデアです。カーソルを左にある最初の白いブロック（class='thing'）に渡すと、速度が低下します。カーソルを他のブロック（またclass='thing'）に渡すと、何も起こりません。私はこの衝突関数がすべてのdivで動作するようにする必要があります。class='thing'です。

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、あなたが望むように、要素のコレクションですが、ここでの問題は、あなたがoffset().left;よう$thingから特定の属性を尋ねることです1つ以上の数字を返すことができないので、最初の数字だけを取ります。その代わりに行うべきことは、$thingのすべての要素をループするのに、.each()関数を使用することです。

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

Answer 2

あなたは、配列の最初の要素を取る要素とcollision()機能の配列を取得しますjQueryの中で（.thingを使用して、あなたのケースで）クラス名で要素を選択しています。予想

<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); 
})(); 

})();