-1
У меня в настоящее время проблема с созданием игры Tic-Tac-Toe, где даже если я изменяю переменную «state», она продолжает выполнять код внутри нее, как я могу решить эту проблему проблема? Есть ли простой способ сохранить выполнение постоянного кода для создания игры?Функция продолжает выполнять часть кода, даже если она изменена.
$(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
Я хочу, чтобы функция gameManager продолжала исполняться во время игры, проверяя, чтобы различные состояния игры выполняли другой код, который поддерживает игру. Поэтому сначала я устанавливаю состояние «выбирать», чтобы игрок выбирал «x» или «o», тогда состояние менялось на «play», чтобы нарисовать доску, и поэтому проверяет каждый ход игры. – Carlosl93
Это похоже на подходящее время, чтобы ознакомиться с использованием отладчика. Взгляните на инструменты отладки вашего браузера. Вы можете поместить «точки останова» в строках кода и «перешагнуть» код по мере его выполнения, построчно. Это позволит вам наблюдать за временем выполнения ваших переменных и поведением вашего кода. Ясно, что здесь есть ошибка, но я подозреваю, что это омрачено несколькими другими ошибками, и все это выглядит, ну, довольно запутано. Я подозреваю, что все это начнет иметь гораздо больше смысла, если вы переместите эти обработчики кликов из функций. – David