Question

所以，我知道我肯定做错了什么。我是Javascript和jQuery的新手，所以它可能是非常明显的，所以请原谅我的无知，我正在努力。

我做了一个基本的迷宫，包括开始，结束和墙壁让你搞砸了。当它全部完成时，墙壁将变得不可见以增加难度。迷宫按照JSFiddle中的预期工作：http://jsfiddle.net/V2wxT/2/

WORKING：

$(document).ready(function (){
    $('.start').click(function() {
        var x = 1;


    $('#myTable tr td.wall').on('mouseenter',function(){
        $('body').css( "background-color", "yellow");
        x=x+1;
        alert("You hit a wall!");
    })
    $('#myTable tr td.finish').on('mouseenter',function(){
         x=x+1;
        alert("You did it!");
    })
    $('#myTable tr td.wall').on('mouseleave',function(){
        $('body').css( "background-color", "white");
    })
  });
});

我遇到的问题是，一旦你碰壁，我希望你必须再次点击开始，以便它取消“完成”警报，并在你撞墙时发出警报。

我尝试做的是添加一个while循环说“只要x = 1，允许警报完成，墙壁点击发生”一旦你撞墙或完成迷宫，它会增加+1 X。

我在循环时没有工作：

$(document).ready(function (){
    $('.start').click(function() {
    var x = 1;

    while(x=1){

    $('#myTable tr td.wall').on('mouseenter',function(){
        $('body').css( "background-color", "yellow");
        x=x+1;
        alert("You hit a wall!");
    })
    $('#myTable tr td.finish').on('mouseenter',function(){
         x=x+1;
        alert("You did it!");
    })
    $('#myTable tr td.wall').on('mouseleave',function(){
        $('body').css( "background-color", "white");
    })

    } 

   });
});

这是JSFiddle，它的while循环似乎使页面崩溃：http://jsfiddle.net/V2wxT/3/

任何帮助都会受到高度赞赏，特别是因为我觉得这很简单，我很满意。

Answer 1

这是一种做法。它比操纵事件绑定更容易。

$(document).ready(function (){
  var isRunning = false;

  $('#myTable tr td.wall').on('mouseenter',function(){
    if (isRunning) {
      $('body').css( "background-color", "yellow");
      alert("You hit a wall!");
      isRunning = false;
    }    
  })

  $('#myTable tr td.finish').on('mouseenter',function(){
    if (isRunning)
      alert("You did it!");
  })

  $('#myTable tr td.wall').on('mouseleave',function(){
    $('body').css( "background-color", "white");
  })

  $('.start').click(function() {
    isRunning = true;
  });
});

http://jsfiddle.net/sabof/UA6Kg/

Answer 2

正如其他人所指出的，while循环在这里并不是真正的帮助。当你在其中重新绑定事件处理程序时，它会导致你的问题。您可以看到一种适用于此 Fiddle 的方法。所有这一切都跟踪了您尝试使用x使用名为working的变量进行的相同操作，根据您开始，结束或碰壁的时间来设置和取消设置。

$(document).ready(function (){
    var working = false;
    $('.start').click(function() {
        working = true;
    });
    $('#myTable tr td.wall').on('mouseenter',function(){
        if (working) {
            $('body').css( "background-color", "yellow");
            alert("You hit a wall!");
        }
        working = false;
    });
    $('#myTable tr td.finish').on('mouseenter',function(){
        if (working) {
            alert("You did it!");
        }
        working = false;
    });
    $('#myTable tr td.wall').on('mouseleave',function(){
        $('body').css( "background-color", "white");
    });
});

Answer 3

而不是

 while(x=1)

使用：

 while(x==1)

Answer 4

我认为你真的不需要while循环来检查玩家是输了还是赢了。您只需设置墙壁和终点线的mouseenter事件即可调用某个函数：

$(document).ready(function() {
    walls =  $('#myTable tr td.wall');
    finish = $('#myTable tr td.finish');

    walls.on('mouseenter', playerLost);
    finish.on('mouseenter', playerWon);   
}

function playerLost() {
   // Your "player has lost" code here
}

function playerWon() {
   // Your "player has won" code here
}

你也可以用同样的方式添加walls的{{1}}事件。

Answer 5

你需要改变你的while循环：

while(x=1)

到此：

while(x === 1)

这样您就可以使用Comparison operators查看 x 值是否为1

Answer 6

你的while循环是一个无限循环，冻结了浏览器中的javascript引擎。您可以使用setTimeout定期调用nextStep函数，而不是在无限循环中检查您的世界状态，例如每250毫秒：

var x = 1;

$(document).ready(function (){
    $('.start').click(function() {
        nextStep();
    })
});

function nextStep() {
        if (x == 1) {

            $('#myTable tr td.wall').on('mouseenter',function(){
                $('body').css( "background-color", "yellow");
                x=x+1;
                alert("You hit a wall!");
            })
            $('#myTable tr td.finish').on('mouseenter',function(){
                x=x+1;
                alert("You did it!");
            })
            $('#myTable tr td.wall').on('mouseleave',function(){
                $('body').css( "background-color", "white");
            })

            setTimeout(nextStep, 250);
        }
    });
}

您可以看到工作here。

此外，在while条件下使用等于运算符==而不是赋值运算符=非常重要。

Answer 7

我知道你可以这样做

$(document).ready(function (){
$('.start').click(on);
});

function on(){ 
     $('body').css( "background-color", "white");

    $('#myTable tr td.wall').on('mouseenter',function(){
        $('body').css( "background-color", "yellow");

        alert("You hit a wall!");

                 off();
    });
    $('#myTable tr td.finish').on('mouseenter',function(){
        alert("You did it!");

                    off();
    });
    $('#myTable tr td.wall').on('mouseleave',function(){
        $('body').css( "background-color", "white");
    });
}

function off(){
    $('#myTable tr td.wall').off();
    $('#myTable tr td.finish').off();
    $('#myTable tr td.wall').off();
}

http://jsfiddle.net/V2wxT/8/

无法使循环工作（崩溃页面）

7 个答案: