2

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

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

我遇到了一个大问题：我的小家伙必须停在障碍物前面，这样他就无法通过它们，但是使用我的代码，他只能停在放置在顶部的障碍物上（也是第一个添加的）

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

}

4

1 回答 1

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

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

于 2013-04-06T17:15:07.483 回答