Классическая игра-пятнашки на JavaScript и canvas.

HTML-разметка

Разметка самая простая — только один элемент canvas с одноименным идентификатором.

Класс Game

Все действия будут происходить в файле script.js, где мы напишем код нашей игры.

Начнем с того, что создадим класс Game, который будет представлять собой Пятнашки в целом. Он будет получать в качестве параметров контекст рисования и размер одной пятнашки.


Определим переменную arr, хранящую схему игрового поля, и переменную clicks, в которой будем хранить количество ходов игрока. Кроме того, создадим метод getClicks, который будет возвращать количество ходов. Он нам пригодится в конце игры, при выигрыше.

Создадим несколько методов класса Game:
— метод cellView получает координаты и рисует в них пятнашку.
— метод numView определяет, как выглядит текст (цифра).
— метод getNullCell возвращает позицию пустой клетки в массиве.
— метод draw отрисовывает всю игру.
— метод move обсчитывает перемещение пятнашки на пустую позицию и редактирует текущую схему игрового поля.
— метод victory проверяет, сложены ли пятнашки.
— метод mix перемешивает пятнашки заданное количество раз.
— метод getRandomBool — вспомогательный, возвращает случайное логическое значение.


Класс игры создан, пора перенести его в браузер.

Обработка событий

Воспользуемся событием полной загрузки документа, определим наш холст, контекст рисования и создадим объект класса Game.


Осталось только добавить обработку события клика:


Пятнашки готовы:

See the Pen Fifteen game by FurryCat (@mohnatus-the-lessful) on CodePen.

2 комментария

  • Татьяна
    Татьяна
    11/02/2020, 09:52
    не работают вроде, только картинка...
    • Furry_web
      Furry_web
      24/02/2020, 22:38
      Спасибо за внимательность :)

Оставить комментарий

*Доступные HTML-теги: a, abbr, blockquote, code, pre, del, i, em, strong, b, strike
*Не будет опубликован