Все статьи | Блог студента

Игра на JS. Часть 2

Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции
Игра на JS. Часть 2 главное изображение

Код проекта на GitHub.

А здесь можно поиграть в текущую версию.

Я уже рассказывал, о том как у меня появилась идея написать собственную игру, поэтому я перейду сразу к делу.

Так как канвасом я пока пользоваться не умею, то мне пришлось писать всё на чистом HTML и CSS. Первые проблемы появились, когда я начал искать картинки персонажей и задний фон в свободных источниках. Дело в том, что я изначально решил делать игру максимально гибкой, чтобы все части в ней можно было легко менять, но так как найти спрайты выполненные в одном стиле (одинаковый размер и количество кадров) почти невозможно, то пришлось усложнять код, ибо другого решения я найти не смог. Сейчас конструктор класса Hero (создание персонажа) выглядит так:

constructor(name, imgPath, imgWidth, imgHeight, scaleMultiplier, baseAttack, health, deathSprites, takeHitSprites)

ScaleMultiplier нужен, чтобы изображения были одинакового размера на экране. deathSprites и takeHitSprites пришлось добавить (и придётся добавлять ещё), т.к. у спрайтов разное количество анимаций, а формулу универсальную формулу я придумать не смог.

Помимо этого, масштабирование изображений персонажей привело к тому, что я не знаю как их расположить так, чтобы они находились в одном месте экрана при разных разрешениях. Пока мне пришлось зафиксировать экран на 1440px/757px. О более маленьких разрешениях, и тем более об экранах смартфонов говорить не приходится.

Если вы вдруг знаете где взять качественные спрайты в свободном доступе, то напишите, пожалуйста, об этом в комментариях. Свои я нашёл на itch.io, а конкретно у этого автора - LuizMelo.

Также, если у вас есть идея как исправить одну из тысячи проблем этого проекта, то смело пишите об этом. Буду рад любой обратной связи.

Аватар пользователя Георгий Баратели
Георгий Баратели 27 января 2021
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
19 января 8 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
19 января 8 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
19 января 8 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
19 января 8 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
19 января 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Новый
Создает веб-приложения со скоростью света
19 января 5 месяцев