Научитесь внедрять игру на свой сайт

Крестики-нолики, крестики-нолики, или, как мы называем это по-датски, «kryds og bolle». Может показаться, что это одна из самых простых игр для воссоздания, но она включает в себя несколько ценных задач, которые отлично подходят для начинающих. В этой статье объясняется, как создать игру с помощью элемента HTML Canvas и JavaScript.

1. Настройте игру

Первым шагом является создание файла HTML с общей структурой HTML, элементом canvas и тегом script (см. рис. 1). Вместо этого вы могли бы легко реализовать JavaScript в отдельном файле, но ради руководства я решил сохранить все в одном файле.

Элемент canvas будет использоваться в качестве сцены игры, но вы также можете реализовать игру в других элементах, таких как тег div, однако для этого потребуются некоторые модификации кода в этом руководстве.

2. Классы игры

Прежде чем представить код JavaScript, определяющий игру, я хочу представить некоторые идеи, лежащие в основе дизайна. Я решил написать игру, используя два разных класса, TicTacToe и Square (см. рис. 2).

Класс TicTacToe используется для создания экземпляра игры путем передачи идентификатора элемента холста конструктору класса. Это гарантирует, что класс можно использовать с несколькими элементами холста на одной HTML-странице, просто создав несколько экземпляров класса для каждого идентификатора холста.

Второй класс Square используется для представления квадрата на доске. Этот класс отслеживает положение и размер каждого квадрата, а также то, щелкнул ли по нему игрок. Он также содержит поведение для рисования визуального квадрата и символа игрока.

3. Квадратный класс

Класс Square используется для создания экземпляра квадратного объекта для каждого квадрата сетки 3x3 (см. рис. 3).

Классу потребуются пять свойств: x; y; width; height; ctx; actor;

x и y определяют положение квадрата, width и height определяют размеры квадрата, ctx — это ссылка на интерфейс рендеринга холста, а actor указывает игрока, который заполнил квадрат символом «x» или «o».

Все свойства, кроме actor, должны быть переданы в конструктор при создании экземпляра (см. рис. 4). Однако для свойства actor в конструкторе должно быть установлено значение null, чтобы свойство существовало в Square объектах.

Классу также понадобится метод draw(), который отвечает за отрисовку квадрата и символа игрока, щелкнувшего по нему.

Метод вызывает другой метод свойства ctx с именем strokeRect(x, y, width, height) для рисования квадрата (см. рис. 5, строка 20). Свойство ctx также содержит другое свойство с именем strokeStyle, которое можно использовать для установки цвета границы (см. рис. 5, строка 19).

Метод draw использует другой метод из свойства ctx с именем fillText(text, x, y) для записи символа игрока, щелкнувшего по квадрату (см. рис. 5, строка 27). Текст располагается в центре квадрата. Центральное положение можно найти, добавив позиции квадрата x и y к половине его width и height (см. рис. 6). Свойство ctx содержит другое свойство с именем textAlign, которому можно задать значение center, чтобы обеспечить выравнивание текста по центру (см. рис. 5, строка 26).

4. Класс TicTacToe

Следующим шагом является создание класса TicTacToe. Классу потребуется конструктор и три метода: click(event); checkForWinner(); reset();

4.1 Конструктор

Конструктор класса TicTacToe разработан таким образом, что для его создания требуется строка с идентификатором элемента холста.

Идентификатор используется для получения элемента холста HTML с указанным идентификатором с помощью функции JavaScript getElementById(id), и элементу присваивается свойство с именем canvas (см. рис. 7, строка 15).

После настройки свойства canvas это свойство используется для получения экземпляра его CanvasRenderingContext2D, для которого задано свойство с именем ctx (см. рис. 7, строка 16). Свойство ctx предоставляет интерфейс для рисования на холсте.

Следующим шагом является создание экземпляров Square объектов. Это делается путем зацикливания 3x3 и создания экземпляра объекта Square для каждой итерации, который добавляется к свойству с именем squares (см. рис. 7, строки 19–28).

Цикл начинается с создания квадрата в позиции (x=0, y=0), а затем повторяется сверху вниз, пока не будет создано 9 квадратов (см. рис. 8).

Классу потребуются еще три свойства с именами actors, turn и gameOver (см. рис. 7, строки 31–37). actors — это массив из двух строк, определяющих как количество игроков, так и их символы («x» и «o»). turn определяет число от 0 до 1, которое указывает actor из массива actors, который должен иметь следующий ход. gameOver — это логическое значение, которое возвращает true, если игра окончена.

Последней частью конструктора является вызов метода draw() квадратных объектов и добавление прослушивателя события click к методу click() класса (см. рис. 7, строки 40–43).

4.2 Метод щелчка

Метод click предназначен для выполнения всякий раз, когда пользователь щелкает по холсту, и положение курсора в этот момент можно прочитать из аргумента event.

Первый раздел метода click включает в себя защитное предложение, которое сбрасывает игру, если для свойства gameOver установлено значение true. Это дает пользователю возможность начать новую игру, щелкнув по холсту (см. рис. 9, строки 21–24).

Следующая часть метода зацикливает все объекты Square и проверяет, находилась ли позиция мыши в пределах одного из квадратов. Если проверка оценивается как true, текущий актор добавляется к свойству actor объекта Square, чтобы сигнализировать о том, что игрок выбрал квадрат, а свойство turn устанавливается либо в 0, либо в 1, чтобы позволить следующему игроку выбрать квадрат (см. рис. 9, строки 27–43).

Наконец, метод вызывает метод checkForWinner(), чтобы узнать, можно ли найти победителя (см. рис. 9, строка 46).

4.3 Метод проверки на победителя

Метод checkForWinner() предназначен для проверки того, выбрал ли один из игроков три клетки на горизонтальной, вертикальной или диагональной линии (см. рис. 10).

В начале метода определяется массив массивов, определяющих различные выигрышные комбинации (см. рис. 11, строки 26–33).

Массив массивов используется для зацикливания всех выигрышных комбинаций и проверки соответствия трех квадратов одной из комбинаций (см. рис. 11, строки 36–66). Если проверка оценивается как true, свойство gameOver устанавливается равным true, чтобы сигнализировать о том, что следующий щелчок на холсте должен сбросить игру.

Метод также рисует линию, показывающую выигрышную комбинацию, и записывает текст, отображающий победителя (см. рис. 11, строки 54–63).

Последняя часть метода проверяет, все ли квадраты имеют actor, отличное от null, чтобы увидеть, должна ли игра закончиться ничьей. Важно, чтобы проверка добавлялась после проверки наличия в игре победителя, чтобы избежать оценки игры как ничьей в случаях, когда победитель определяется путем выбора последнего пустого квадрата (см. рис. 11, строки 69–75).

4.4 Метод сброса

Метод сброса предназначен для установки свойств экземпляра класса TicTacToe в состояние, при котором игроки могут играть в новую игру.

Метод начинается с очистки пикселей холста с помощью метода clearRect(x, y, width, height) свойства ctx (см. рис. 12, строка 31).

После очистки пикселей холста для свойства квадратов actor устанавливается значение null, и квадраты снова рисуются внутри холста.

Наконец, метод устанавливает turn в 0, чтобы сбросить ход игроков, и устанавливает gameOver в false, чтобы сигнализировать, что метод click() может снова добавлять игроков в квадраты и искать нового победителя или рисовать.

4.5 Запуск игры

Теперь игра готова к игре. Добавьте новую строку ниже определений класса, которая создает новый экземпляр класса (см. рис. 13, строка 13).

Вы можете найти суть Github с полным кодом по этой ссылке.