Пятнашки на JavaScript и Canvas | В паутине

Пятнашки на JavaScript и Canvas

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

HTML-разметка

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

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

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

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

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

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

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

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

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


Источник habrahabr

Комментарии (0)

Ваш email не будет опубликован. Все поля обязательны