-1
我目前有一个问题作出井字棋游戏，即使我改变“状态”变量它一直在执行里面的代码，我怎么能解决这个问题问题？有没有简单的方法来保持执行常量代码制作游戏？功能保持，即使改变了代码执行块
$(document).ready(function() {
gameManager();
});
$(document).ready(function() {
gameManager();
});
var playerSelect, aiSelect = "";
var state = "choose";
var turn = "player";
var gameOn = true;
function gameManager() {
if (state == "choose") {
chooseSide();
} else if (state == "play") {
createGrid();
if (turn == "player") {
playerChoose();
console.log("Player's turn");
} else {
playerChoose();
console.log("Enemy's turn");
}
}
}
function playerChoose() {
$('.gridElement').click(function() {
$(this).html('<div class="gridElement">' + playerSelect + '</div>');
});
}
function chooseSide() {
console.log(state);
$('#textContainer').html('<p> Choose Side: </p> <div class="chooseButton">X</div> <div class="chooseButton">O</div>');
$('.chooseButton').click(function() {
console.log(state);
playerSelect = $(this).html();
if (playerSelect == "X") {
aiSelect = "O";
} else {
aiSelect = "X";
}
state = "play"
console.log(state);
});
}
function createGrid() {
for (var i = 0; i < 9; i++) {
$('#gridContainer').append('<div class="gridElement"> </div>');
}
var gridElementSize = $('#gridContainer').width()/3;
$('.gridElement').css({
'width': gridElementSize,
"height": gridElementSize
});
}#gridContainer {
border: 2px solid blue;
width: 200px;
height: 200px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
.gridElement {
display: inline-block;
vertical-align: top;
border: 1px solid black;
}
#textContainer {
margin-left: auto;
margin-right: auto;
}
.chooseButton {
display: inline-block;
}<!DOCTYPE>
<!DOCTYPE html>
<html>
<head>
<!-- INITIALIZE -->
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Black+Ops+One" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://use.fontawesome.com/ca5f7b6f9a.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="stylesheet.css">
<script src="script.js"></script>
<!--CONTENT-->
<title>TicTacToe</title>
</head>
<body>
<div id="textContainer">
</div>
<div id="gridContainer">
</div>
</body>
</html>
'“即使我改变‘状态’变量它一直执行的代码里面”“ - 这是什么意思，甚至？你能更清楚地描述问题吗？另外，为什么在文档加载时执行相同的功能两次？为什么你不断重复添加相同的点击处理程序元素？这将使这些元素执行处理程序很多次。这段代码非常令人困惑。 – David
我想的是，游戏管理器功能保持执行而本场比赛是上，检查游戏的不同状态来执行，保持游戏的工作一些其他的代码。首先，我设置为“选择”，让玩家选择“X”或“O”则状态更改为“玩”绘制电路板，并因此会检查游戏的每个转弯的状态。 – Carlosl93
这听起来像是适合使用调试器的时机。看看你的浏览器的调试工具。您可以在代码行中放置“断点”，并在执行时逐行执行代码。这将允许您观察变量的运行时值和代码的行为。很明显，这里有一个错误，但我怀疑它被其他几个错误蒙上了阴影，整个事情看起来很好，相当混乱。我怀疑如果将这些点击处理程序移出函数，整个事情将会变得更有意义。 – David