В этом примере напишем простую и полностью рабочую игру крестики-нолики на 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>
Перед скриптом не забудь подключить библиотеку. Наша игра готова!