Здравствуйте! Пытаюсь сделать игру крестики-нолики (версию с "компьютером"). Этот код делает так, что сам изначально выставляет кто ходит первым (крестики или нолики), кто ходит затем (крестики или нолики) и определяет кто выиграл:
Вот ссылка на код:
https://jsfiddle.net/anvolvolckov/q4Luyadp/<html>
<head>
<style>
.Square {
width: 40px;
height: 40px;
text-align: center;
font-size: 18pt;
font-weight: bold;
font-family: Verdana;
}
</style>
<script>
function startGame() {
for (var i = 1; i <= 9; i = i + 1) {
clearBox(i);
}
document.turn = "X";
if (Math.random() < 0.5) {
document.turn = "O";
}
document.winner = null;
setMessage(document.turn + " gets to start.");
}
function setMessage(msg) {
document.getElementById("message").innerText = msg;
}
function nextMove(square) {
if (document.winner != null) {
setMessage(document.winner + " already won the game.");
} else if (square.innerText == "") {
square.innerText = document.turn;
switchTurn();
} else {
setMessage("That square is already used.");
}
}
function switchTurn() {
if (checkForWinner(document.turn)) {
setMessage("Congratulations, " + document.turn + "! You win!");
document.winner = document.turn;
} else if (document.turn == "X") {
document.turn = "O";
setMessage("It's " + document.turn + "'s turn!");
} else {
document.turn = "X";
setMessage("It's " + document.turn + "'s turn!");
}
}
function checkForWinner(move) {
var result = false;
if (checkRow(1, 2, 3, move) ||
checkRow(4, 5, 6, move) ||
checkRow(7, 8, 9, move) ||
checkRow(1, 4, 7, move) ||
checkRow(2, 5, 8, move) ||
checkRow(3, 6, 9, move) ||
checkRow(1, 5, 9, move) ||
checkRow(3, 5, 7, move)) {
result = true;
}
return result;
}
function checkRow(a, b, c, move) {
var result = false;
if (getBox(a) == move && getBox(b) == move && getBox© == move) {
result = true;
}
return result;
}
function getBox(number) {
return document.getElementById("s" + number).innerText;
}
function clearBox(number) {
document.getElementById("s" + number).innerText = "";
}
</script>
</head>
<body onload="startGame();">
<h1>Welcome to my Tic-Tac-Toe game!</h1>
<div id="message">messages will go here</div>
<table border="1">
<tr>
<td id="s1" class="Square" onclick="nextMove(this);"></td>
<td id="s2" class="Square" onclick="nextMove(this);"></td>
<td id="s3" class="Square" onclick="nextMove(this);"></td>
</tr>
<tr>
<td id="s4" class="Square" onclick="nextMove(this);"></td>
<td id="s5" class="Square" onclick="nextMove(this);"></td>
<td id="s6" class="Square" onclick="nextMove(this);"></td>
</tr>
<tr>
<td id="s7" class="Square" onclick="nextMove(this);"></td>
<td id="s8" class="Square" onclick="nextMove(this);"></td>
<td id="s9" class="Square" onclick="nextMove(this);"></td>
</tr>
</table>
<a href="javascript:startGame();">Start Over</a>
</body>
</html>
Вот ссылка на код:
https://jsfiddle.net/anvolvolckov/q4Luyadp/Для того, что бы мне сделать версию с компьютером мне нужно, чтобы при клике на одну ячейку таблицы, происходил клик по другой ячейке этой же таблицы, сразу после предыдущего клика. То есть что-то вроде: если пользователь кликнул на s1 (первую ячейку) и ячейка s2 свободна, то "компьютер" походил на s2 (вторая ячейка). Помогите пожалуйста разобраться в этом вопросе, как это можно сделать? Заранее большое спасибо!