Главная RSS Онлайн игры WarCraft Приколы Карта сайта О блоге Поиск

“Попросила мужа перебрать детские игрушки. Итог: сначала он барабанил, потом расставлял солдатиков, сбивал кегли и трынькал на детской гитаре. Пожалуй, проще убрать самой.” - анекдот дня


Разработка программ игр и приложений->Как создавать игры, часть 1?

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

0

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

Дата: 03.08.2020


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


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


В чём заключается смысл урока? Многие пользователи могли не слышать о портале хитри (хитрости разработки на флеш), поэтому поясню. На поле размещается машинка, управление происходит с помощью стрелок. Вроде ничего сложного, но контроль отличается от остальных 2Д игр.
как_создавать_игры


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


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



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


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


Любой проект в первую очередь начинается с переменных. Приведу список данных используемых в коде при управлении машинкой.
Константы canvas, ctx ссылаются на переменную канвас и вызывает getContext для 2d рисования.


Расположение объекта по оси 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 так же следует добавить, в итоге у нас получится.разработка_игр_рис2


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


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


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


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


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


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


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


Разработка программ игр и приложений->Как создавать игры, часть 1?


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

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

Комментарий к этой заметки:

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

Введите капчу

 

Яндекс.Метрика