TypeScript: скелет игры

Назад | Учебник TypeScript | Вперёд

Пишем скелет игры. Для начала определим класс доски. Вся игра происходит на поле, поделённое на квадраты. Это поле и будет представлять собой наш класс Board:

Тут ничего сложного. Мы просто создаём класс Board с конструктором. Внутри класса у нас массив состояний каждой клетки, который мы инициализируем в конструкторе.

TileState — это перечисление, которое описывает возможные состояния клеток:

Есть ещё одна маленькая деталь: нам нужно добавить canvas в HTML. В предыдущей статье мы забыли это сделать. Файл tscolorballs.html станет таким:

Пора писать сам движок. В Engine мы будем обрабатывать основную логику.

Мы инициализируем экземпляр класса Board. Здесь Engine.BOARD_WIDTH и Engine.BOARD_HEIGHT — это константы. А Board — это переменная класса. Они объявлены в Engine вот так:

Обратите внимание, что внутри обработчика setTimeout мы используем не this, а сохранённую в переменную engine ссылку на this уровнем выше. Это делается из-за особенностей работы this JavaScript. Внутри функции, которую мы передаём в setTimeout, this будет ссылаться не на экземпляр engine, а скорее на саму функцию.

Теперь нам нужно написать реализацию метода onStep, в котором мы пока просто будем отрисовывать текущее состояние игрового поля:

Обратите внимание, что мы здесь используем this.board.getTileState(x, y). Пока у нас нет реализации подобного метода в Board. Добавим его:

Также в onPaint мы используем свои методы drawCircle и drawRect:

Тут ничего особого нет. Мы просто вызываем стандартные методы CanvasRenderingContext2D для отрисовки закрашенных кругов и прямоугогльников.

В начало класса Engine нужно ещё добавить две новые константы, которые обозначаю ширину и высоту одной клетки поля соответственно:

Ещё одна маленькая штучка. Что-то должно запускать код нашей игры после загрузки страницы. Создайте файл “main.ts” со следующим содержимым (думаю, что пояснения тут излишни):

Сейчас вы можете попробовать скомпилировать проект выполнив tsc в корне и запустить файл “tscolorballs.html” в браузере. Вы должны увидеть что-то вроде этого:

Шарики в браузере

Назад | Учебник TypeScript | Вперёд


Поделиться:
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован.