JQuery 类的障碍

Question

/image/zJxqx.png

我刚刚开始学习 Jquery，并决定制作 Bomberman 游戏。

我遇到了 1 个大问题: 我的小家伙必须停在障碍物前面，这样他就无法穿过它们 但使用我的代码，他只会停在顶部的障碍物上(也是第一个添加的)

在我的代码中，我试图说他检查每个类(这就是我没有使用 id 的原因)，但这不起作用。我也尝试用“Each”来修复它，但这只是让一切都出问题了。

$(文档).ready(函数(){

$("#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 )){

注意:我认为您的碰撞检测代码可能需要更多的工作来考虑障碍物的高度。