Jquery — скрипт простой игры в крестики-нолики
X
Заказать сайт
Заказать сайт

Jquery - скрипт простой игры в крестики-нолики

В этом примере напишем простую и полностью рабочую игру крестики-нолики на jQuery.

Начнем с html:

<div class="container">
<h1>Крестики-нолики</h1>
<table>
<tr>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
</table>

<button id="reset" onClick="window.location.reload();">Начать заново</button>
</div>

 

Далее пропишем стили:

<style>
.container {
text-align: center;
margin: 20px auto;
}
h1 {
font-size: 40px;
}
table {
border-collapse: collapse;
margin: 30px auto;
}
td {
border: 3px solid black;
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
font-size: 60px;
cursor: pointer;
}
td:hover {
background-color: #eee;
}
td.x {
color: #f00;
}
td.o {
color: #00f;
}
#reset {
font-size: 20px;
padding: 10px;
background-color: #f00;
color: #fff;
border: none;
cursor: pointer;
}
#reset:hover {
background-color: #00f;
}
</style>

 

Теперь напишем логику:

<script>
$(function() {
var currentTurn = 'x'; // Первый ход делают крестики (x)
var gameOver = false;

// Функция для проверки, выиграл ли игрок
function checkWin() {
var cells = $('.cell');
var winningCombos = [
[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 < winningCombos.length; i++) {
var combo = winningCombos[i];
if (cells.eq(combo[0]).hasClass(currentTurn) &&
cells.eq(combo[1]).hasClass(currentTurn) &&
cells.eq(combo[2]).hasClass(currentTurn)) {
return true; // Если нашли выигрышную комбинацию, возвращаем true
}
}

return false; // Если не нашли выигрышную комбинацию, возвращаем false
}

// Функция для переключения хода
function switchTurn() {
currentTurn = (currentTurn === 'x') ? 'o' : 'x'; // Меняем игрока
$('h1').text('Ходит ' + currentTurn.toUpperCase()); // Обновляем заголовок
}

// Обработчик кликов по ячейкам
$('.cell').click(function() {
// Если игра окончена, ничего не делаем
if (gameOver) {
return false;
}

// Если ячейка уже занята, ничего не делаем
if ($(this).hasClass('x') || $(this).hasClass('o')) {
return false;
}

// Заполняем ячейку соответствующим значком (x или o)
$(this).addClass(currentTurn);
$(this).text(currentTurn);

// Проверяем, выиграл ли игрок
if (checkWin()) {
$('h1').text(currentTurn.toUpperCase() + ' выиграли!');
gameOver = true;
return false;
}

// Переключаем ход на другого игрока
switchTurn();
});
});
</script>

 

Перед скриптом не забудь подключить библиотеку. Наша игра готова!

 

 

| | Jquery - скрипт простой игры в крестики-нолики | В этом примере напишем простую и полностью рабочую игру крестики-нолики на jQuery. Начнем с html: <div class="container"> <h1> | https://blogprogram.ru/wp-content/uploads/2023/06/FireShot-Capture-106-обои_-2-тыс-изображений-найдено-в-Яндекс-Картинках-yandex.ru_-131x131.jpg