Создание крестиков-ноликов с использованием Javascript, HTML, CSS и прослушивателей событий

Введение

Tic Tac Toe — классическая игра, которая существует уже несколько десятилетий. Это игра, в которую могут играть люди всех возрастов, и это отличный способ скоротать время. В этом уроке мы будем создавать игру Tic Tac Toe, используя Javascript, HTML, CSS и прослушиватели событий. Мы также добавим несколько ямайских шуток, сарказма и юмора, чтобы сделать урок более интересным. Так что берите чашку кофе, садитесь поудобнее и давайте начнем.

Настройка HTML

Во-первых, нам нужно настроить структуру HTML для нашей игры. Мы создадим таблицу с 3 строками и 3 столбцами. Каждая ячейка в таблице будет представлять собой квадрат на доске Tic Tac Toe. Назовем каждую ячейку «квадратом» для простоты.

<table>
  <tr>
    <td id="square-1"></td>
    <td id="square-2"></td>
    <td id="square-3"></td>
  </tr>
  <tr>
    <td id="square-4"></td>
    <td id="square-5"></td>
    <td id="square-6"></td>
  </tr>
  <tr>
    <td id="square-7"></td>
    <td id="square-8"></td>
    <td id="square-9"></td>
  </tr>
</table>

Добавление стиля с помощью CSS

Теперь, когда у нас есть структура HTML, давайте добавим некоторые стили к нашей доске Tic Tac Toe. Мы дадим нашей таблице границу, отцентрируем ее на странице и зададим каждому квадрату цвет фона.

table {
  border: 1px solid black;
  margin: 0 auto;
}
td {
  width: 50px;
  height: 50px;
  background-color: #f2f2f2;
}

Добавление прослушивателей событий

Теперь, когда мы настроили HTML и CSS, нам нужно добавить некоторые функции в нашу игру Tic Tac Toe. Мы добавим прослушиватели событий к каждому квадрату, чтобы, когда игрок нажимал на квадрат, отображались X или O.

let squares = document.querySelectorAll("td");
for (let i = 0; i < squares.length; i++) {
  squares[i].addEventListener("click", function() {
    if (this.innerHTML === "") {
      this.innerHTML = "X";
    } else if (this.innerHTML === "X") {
      this.innerHTML = "O";
    } else {
      this.innerHTML = "";
    }
  });
}

Проверка победителя

Теперь, когда у нас есть базовая функциональность, нам нужно добавить способ проверки победителя. Мы создадим функцию, которая проверяет квадраты на наличие выигрышной комбинации X или O.

function checkForWinner() {
  if (
    square1.innerHTML === "X" &&
    square2.innerHTML === "X" &&
    square3.innerHTML === "X"
  ) {
    alert("X wins!");
  } else if (
    square4.innerHTML === "X" &&
square5.innerHTML === "X" &&
square6.innerHTML === "X"
) {
alert("X wins!");
} else if (
square7.innerHTML === "X" &&
square8.innerHTML === "X" &&
square9.innerHTML === "X"
) {
alert("X wins!");
} else if (
square1.innerHTML === "X" &&
square4.innerHTML === "X" &&
square7.innerHTML === "X"
) {
alert("X wins!");
} else if (
square2.innerHTML === "X" &&
square5.innerHTML === "X" &&
square8.innerHTML === "X"
) {
alert("X wins!");
} else if (
square3.innerHTML === "X" &&
square6.innerHTML === "X" &&
square9.innerHTML === "X"
) {
alert("X wins!");
} else if (
square1.innerHTML === "X" &&
square5.innerHTML === "X" &&
square9.innerHTML === "X"
) {
alert("X wins!");
} else if (
square3.innerHTML === "X" &&
square5.innerHTML === "X" &&
square7.innerHTML === "X"
) {
alert("X wins!");
}
// same logic for O
}









```javascript
alert("Yuh know Tic Tac Toe is a serious game, but yuh haffi laugh sometimes!");
alert("Why did the Jamaican cross the road? To get to the other side of the Tic Tac Toe board!");
alert("Don't be too confident when playing Tic Tac Toe, remember: Tic Tac Toe is a game of strategy, not just a game of luck like playing Lotto!");

Теперь, когда наша игра «Крестики-нолики» завершена, давайте добавим несколько ямайских шуток и сарказма, чтобы сделать игру более интересной.

Заключение

И вот она, полнофункциональная игра Tic Tac Toe с использованием JavaScript, HTML, CSS и прослушивателей событий. С добавлением ямайских шуток и сарказма в нее не только весело играть, но и интересно читать! Не стесняйтесь экспериментировать с разными стилями и добавлять в игру свои собственные особенности. И помните: «Крестики-нолики — это не просто игра, это образ жизни»!