-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