JQuery类的障碍

Question

http://i.stack.imgur.com/zJxqx.png

我刚开始学习jquery，我决定做游戏炸弹人。

我坚持1个大问题： 我的痘痘家伙停在障碍物前，所以他不能去throught他们 但我的代码，他只停在被放置在顶部的障碍（也第一个添加）

在我的代码中，我试着说，他检查每个类（这就是为什么我没有使用ID），但这是行不通的。我也尝试用“每个”解决它，但是这只是窃听了一切。

$（文件）。就绪（函数（）{

$("#Main").append('<div id="Player"></div>'); 
$("#Main").append('<div id="test1" class="Bottel" style="absolute; top:0px; left: 100px;"></div>'); 
$("#Main").append('<div id="test2" class="Bottel" style="absolute; top:30px; left: 100px;"></div>'); 
$("#Main").append('<div id="test3" class="Bottel" style="absolute; top:100px; left: 100px;"></div>'); 
$("#Main").append('<div id="test4" class="Bottel" style="absolute; top:200px; left: 100px;"></div>'); 
$("#Main").append('<div id="test5" class="Bottel" style="absolute; top:200px; left: 200px;"></div>'); 
//$(".Bottel").css('left',100 + 'px'); 



movement() 

功能运动（）{

$(document).keydown(function(e) { 




    var position = $("#Player").position(); 
    var min = 270; 

    switch (e.keyCode){ 
     case 37: 



      if (position.left >= 1) //&& $(".Bottel").position().left -44 >= position.left) 
      { 
      if (($("div[class^='Bottel']").position().left +44 <= position.left) || ($("div[class^='Bottel']").position().left >= position.left) || ($("div[class^='Bottel']").position().top + 35 <= position.top)){ 
      $("#Player").css('left',(position.left) - 20 + 'px'); 
      $("#Player").css('background','url(left.png) no-repeat'); 
      //}); 
      } 
      else{ 
      //alert("test"); 
      //alert("test"); 
       //position = $("#Player").position(); 
      $("#Player").css('left',(position.left) + 'px'); 
      $("#Player").css('background','url(left.png) no-repeat'); 

      } 

      } 



      break; 
     case 38: 

      if (position.top >= 1){ 
      if ($(".Bottel").position().left + 35 <= position.left || $(".Bottel").position().left - 40 >= position.left || $(".Bottel").position().top + 41 <= position.top){ 
      $("#Player").css('top',(position.top) - 20 + 'px'); 
      $("#Player").css('background','url(top.png) no-repeat'); 
      } 
      else{ 
      $("#Player").css('top',(position.top) + 'px'); 
      $("#Player").css('background','url(top.png) no-repeat'); 
      } 
      //$("#Player").css('top',position.top - 20 + 'px'); 
      //$("#Player").css('background','url(top.png) no-repeat'); 
      } 


      break; 
     case 39: 
     //$.each($("#Main .Bottel"), function(i, .Bottel) { 
     //var location = $(".Bottel").position().left; 
     //alert(location + ","); 
     //alert(position().left); 

      if (position.left <= 452 - 33) //&& $(".Bottel").position().left -44 >= position.left) 

      { 
      if ($(".Bottel").position().left -44 >= position.left || $(".Bottel").position().top + 35 <= position.top || $(".Bottel").position().left <= position.left){ 
      $("#Player").css('left',(position.left) + 20 + 'px'); 
      $("#Player").css('background','url(right.png) no-repeat'); 
      } 
      else{ 
      $("#Player").css('left',(position.left) + 'px'); 
      $("#Player").css('background','url(right.png) no-repeat'); 
      } 
      } 
      //}); 

      break; 
     case 40: 

      if (position.top <= 393 - 41){ 
      $("#Player").css('top',position.top + 20 + 'px'); 
      $("#Player").css('background','url(bottem.png) no-repeat');    
      } 


     break; 
    } 
}); 

}

Answer 1

each()是正确的方式去喜欢的东西：

case 37: 

    if (position.left > 0) { 

    var canGoLeft = true; 

    $('.Bottel').each(function() { 
     var obstaclePosition = $(this).position(); 
     if (...collision detection code...) { 
     canGoLeft = false; 
     // optional: chuck 'return false;' in here to stop the each loop early 
     } 
    }); 

    if (canGoLeft) { 
     $("#Player").css({ 
     'left': (position.left) - 20 + 'px', 
     'background':'url(left.png) no-repeat' 
     }); 
    } else { 
     $("#Player").css({ 
     'left': (position.left) + 'px', 
     'background':'url(left.png) no-repeat' 
     }); 
    } 
    } 

    break; 

的“碰撞检测代码”将使用this指你检查当前的障碍，如：

if ((obstaclePosition.left +44 <= position.left) || (obstaclePosition.left >= position.left) || (obstaclePosition.top + 35 <= position.top)){ 

注：我觉得你的碰撞检测代码，可能需要更多的工作，以占障碍物的高度。