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)){ 

注：我覺得你的碰撞檢測代碼，可能需要更多的工作，以佔障礙物的高度。