В этом примере мы создаем таблицу 3×3, где каждая ячейка имеет уникальный идентификатор. Мы также создаем переменные для текущего игрока, количества ходов и таблицы игры. Затем мы добавляем обработчик событий на таблицу, который будет вызываться при клике на ячейку. Если ячейка пустая, мы записываем в нее символ текущего игрока, увеличиваем количество ходов и проверяем, не выиграл ли игрок. Если игрок выиграл, мы выводим сообщение о победе и удаляем обработчик событий, чтобы игрок не мог продолжать игру. Если количество ходов достигло 9 и никто не выиграл, мы выводим сообщение о ничьей. Если игра продолжается, мы меняем игрока и ждем следующего хода. Функция checkWin() проверяет все возможные комбинации выигрыша и возвращает true, если одна из них выполнена.
index,html
<!DOCTYPE html>
<html>
<head>
<title>Крестики-нолики</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
table {
margin: 0 auto;
border-collapse: collapse;
}
td {
width: 50px;
height: 50px;
border: 1px solid black;
text-align: center;
font-size: 30px;
cursor: pointer;
}
td:hover {
background-color: #eee;
}
#result {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Крестики-нолики</h1>
<table id="game">
<tr>
<td id="0"></td>
<td id="1"></td>
<td id="2"></td>
</tr>
<tr>
<td id="3"></td>
<td id="4"></td>
<td id="5"></td>
</tr>
<tr>
<td id="6"></td>
<td id="7"></td>
<td id="8"></td>
</tr>
</table>
<div id="result"></div>
<script>
var player = "X";
var moves = 0;
var gameTable = document.getElementById("game");
var result = document.getElementById("result");
gameTable.addEventListener("click", function(event) {
var cell = event.target;
if (cell.innerHTML === "") {
cell.innerHTML = player;
moves++;
if (checkWin()) {
result.innerHTML = "Игрок " + player + " победил!";
gameTable.removeEventListener("click", arguments.callee);
} else if (moves === 9) {
result.innerHTML = "Ничья!";
} else {
player = player === "X" ? "O" : "X";
}
}
});
function checkWin() {
var cells = gameTable.getElementsByTagName("td");
var winCombinations = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
for (var i = 0; i < winCombinations.length; i++) {
var a = cells[winCombinations[i][0]].innerHTML;
var b = cells[winCombinations[i][1]].innerHTML;
var c = cells[winCombinations[i][2]].innerHTML;
if (a === b && b === c && a !== "") {
return true;
}
}
return false;
}
</script>
</body>
</html>
4 Comments
Your blog is a breath of fresh air in the crowded online space. I appreciate the unique perspective you bring to every topic you cover. Keep up the fantastic work!
Hey! Do you know if they make any plugins to assist with SEO?
I’m trying to get my website to rank for some targeted keywords but I’m not
seeing very good results. If you know of any please share.
Thanks! I saw similar text here: Warm blankets
Be happy to e-book the resort as a substitute of testing the availability of cramped hotel rooms nearby.
sugar defender ingredients For many years,
I have actually fought unforeseeable blood sugar
level swings that left me really feeling drained pipes and lethargic.
Yet given that incorporating Sugar Defender right into my
routine, I have actually observed a significant improvement in my general energy and security.
The dreadful mid-day thing of the past, and I value that this all-natural
remedy accomplishes these results with no unpleasant or negative responses.
honestly been a transformative discovery for me.