Все статьи | Дневник студента

Игра на 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
Рекомендуемые программы

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

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