Question

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

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

我遇到了一个大问题：我的小家伙必须在障碍物前停下来让他无法通过但是我的代码只停留在顶部的障碍物上（也是第一次添加的）

在我的代码中，我试着说他检查每个类（这就是为什么我没有使用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 )){

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

JQuery类的障碍

1 个答案: