Как создавать игры, часть 1?

0

Добавил: Катя Самохина

Дата: 03.08.2020

Несколько лет назад в интернете работал сайт xitri. Автор портала рассказывал и показывал, как создавать интересные вещи на флеш. Для получения качественной информации я посещала этот ресурс, но однажды зайдя на сайт, я получила ошибку. Через пару месяцев портал вообще перестал работать.
Используя свои знания, я расскажу, как создавать игры и продемонстрирую простенький пример с портала “хитри”. В этом уроке, мы создадим, управление машинкой. Ранее код в статье использовался на флеш, урок назывался “Даю порулить”. Прошло достаточно много времени, технология flash устарела. На этот раз мы реализуем код, используя javascript и html5. Отрисовка объектов будет происходить на canvas

Урок “Даю порулить” на html5.

Прежде всего, главный герой это автомобиль, а не человек. При нажатии на кнопку вправо ничего не произойдёт и машина не переместиться, а просто повернёт своё колесо и уже при нажатии на стрелку вперед можно отправить автомобиль вправо. Игроку необходимо задействовать две кнопки, для перемещения влево вправо. Всё как в реальной жизни поворачиваешь колесо и едешь в нужное направление.

Для скрипта нам понадобятся две картинки, локация парковки и сама машина. Весь материал можно скачать внизу статьи. В коде будут присутствовать четыре функции.

1.Main – главная, где будет вызываться функция изображения и запускаться draw.
2.Draw – цикл loop, запускает постоянную отрисовку объектов на холсте.
3.update – любое взаимодействие с машиной, моментально сработает и отобразиться на поле, например автомобиль передвинулся в сторону. При этом canvas каждую секунду очищается, чтобы не было дублирования картинок.
4.degreesToRadians – переводит углы в радианы, пригодиться для разворота авто и колёс.

Как создавать игры? Переменные

Расположение объекта по оси x и y координат. var x = 240, y = 240;
car_rotation - поворот машины при старте, можно развернуть авто в диапазоне 360 градусов.
car_left_rotation – переменная отвечает за разворот колёс, когда пользователь управляет автомобилем.
rotLimit – максимальный лимит поворота колёс.
rotStep – скорость rotation.
Speed – скорость перемещения.
speedLimit – быстрота передвижения по трассе, во время гонки. Поставив на 25, вы увидите, как быстро машина преодолеет расстояние.
speedStep – шаг, постепенно ускоряет транспортное средство.
speedX и speedY – после математических вычислений прибавляем эти переменные к оси X и Y, тем самым заставляя автомобиль двигаться.

Чтобы перемещение проходило плавно нужно назначить флаги и создать условие, где при нажатии кнопок контролёра, флагам присваивалось бы true, а в функции update эти самые флаги сравнивались на истинное и ложное значение.
Переменные флаги в начале кода выглядят вот так. leftPressedFlag, rightPressedFlag,
upPressedFlag, var downPressedFlag.
Колёса не являются картинками, это отрисовка прямоугольника, поэтому им нужно проставить размер rectW и rectH.
Переменные parking, car так же следует добавить, в итоге у нас получится.

Метод main является главным в коде. Он отвечает за работу всех функций. В данном случае запускает слушатель событий нажатой клавиши, добавление картинок на холст и активирование draw.

Draw запускает цикл, и транспорт начинает двигаться.
window.requestAnimationFrame – сообщает браузеру, что пользователь желает запустить анимацию. Принимает два параметра.
1.Указывает метод, который необходимо запустить
2.Элемент, где преимущественно проигрывается вся анимация в нашем случае canvas.

Фукция update, в коде занимает места больше всех. Она отвечает за многие вещи, контроль автомобиля, отрисовка объектов и добавление колёс. Ранее мы указывали флаги, срабатывающие, когда игрок нажмёт клавиши, теперь самое время их использовать в коде.

Собственно говоря, при добавлении разных персонажей и дизайна применяется метод drawImage. Для примитивных прямоугольников и квадратов, например колёс используется fillRect.

Обратите внимание на save и restore, они сохраняют и восстанавливают текущие состояние ‘канваса”. Всё, что находится между двумя функциями, будет работать только там. Например, изменив там цвет, перекрасится только созданный объект внутри “save-restore”. Например, игрок сделал поворот, и колёса остались в том положение, куда их повернул пользователь, и теперь машина постоянно находясь в движении, станет перемещаться по кругу. Необходимо восстановить текущее состояние колёс до начального, то есть выровнить их.
Пример на скриншоте.

Последняя осталась - degreesToRadians, думаю, что её не стоит описывать, так как она упоминалась выше.

Итог
В этой статье был приведен пример одного урока с хитри, переделанный на HTML5. Теперь вы знаете, как сделать управление на html5. Скоро я напишу ещё несколько статей на тему как создавать игры. Скачайте пример исходного кода.

Перейти на главнуюВагон игр Назад

Просмотров: 1353