Question

我正在设计一种游戏，其中有一个围绕六角形板的团队基地。我们的想法是，当点击一个团队基础时，那将是该团队的轮流。我有：

    $('.team').click(function(){
        var teamID=$(this).attr('id');
        explore(teamID);
    });

然后我使用teamID查找被点击的团队的索引，该索引存储为json文件中的对象，其中包含teamname，score等属性。

    function explore(index){         // the game portion
        var turn=file[index];        // finds the team's info from json file
        $('.hex').click(function(){  // when a hex is clicked.... play the game
            alert(turn.teamname);       
            // game elements 
    }

这总是第一次有效，但是如果我点击一个不同的团队框然后是一个十六进制，通常它会认为它是我之前点击过的那个盒子。我添加了警报（turn.teamname）以尝试调试。如果我点击其他框，它将始终提醒第一个框，然后使用不同的框发送第二个警报。我无法弄清楚为什么会有两个警报？所以它总会提醒'team1'然后'team1'，'team2'。当我点击更多框时，它会一直警告，直到它只是提醒所有人。另外，如果我之前点击了两个以上的方框，即使我一直点击相同的十六进制，它似乎会在提醒我它是'team1'和'team2'之间交替。

这是我的第一个stackoverflow帖子，所以我希望它有意义！谢谢！

Answer 1

您遇到此行为的原因是您将事件处理程序添加到dom元素但从不删除它们。您需要更改处理对提格点击的方式。您可以使用http://api.jquery.com/one/将事件处理程序添加到包含所有hexes的父元素，并检查在事件处理程序中单击了哪个十六进制。或者你可以尝试一个更简单的解决方案，你可以在其中添加一次事件监听器并检查是否有一个选定的团队：

var turn;
var teamSelected = false;
function explore(index){         // the game portion
    teamSelected = true;
    turn=file[index];        // finds the team's info from json file
}
$('.hex').click(function(){  // when a hex is clicked.... play the game
    if (teamSelected) {
        alert(turn.teamname);       
        // game elements 
        teamSelected = false;
    }
}

Answer 2

对于这样的事情，我建议进入流星。反应性编程模型比命令式编程模型更清晰（特别是在游戏中，它可以很快变得复杂）。

我觉得this example说明了使用这个框架可以很快完成的事情（最接近你问题的例子）。

要深入了解，我建议您查看the intro video，然后前往the docs和recent book。

javascript函数使用对象

2 个答案: