JQuery类的障碍

时间:2013-04-06 15:07:48

标签: jquery class

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

}

1 个答案:

答案 0 :(得分:0)

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

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