До 30 ноября

Скидки до 81 000 руб и вторая профессия в подарок!

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

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

Время чтения статьи ~1 минута
Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции
Игра на 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
4
Рекомендуемые программы
профессия
Осваивайте разработку веб-страниц, оживляйте дизайн макетов, публикуйте сайты и приложения. Отслеживайте ошибки в интерфейсе и устраняйте их
10 месяцев
с нуля
Старт 28 ноября
профессия
Обучитесь разработке бэкенда сайтов и веб-приложений — серверной части, которая отвечает за логику и базы данных
10 месяцев
с нуля
Старт 28 ноября
профессия
Выполняйте ручное тестирование веб-приложений, находите ошибки в продукте. Узнайте все о тест-дизайне.
4 месяца
с нуля
Старт 28 ноября
профессия
Научитесь разработке веб-приложений, сайтов и программного обеспечения на языке Java, программируйте и используйте структуры данных
10 месяцев
с нуля
Старт 28 ноября
профессия
новый
Собирайте, анализируйте и интерпретируйте данные, улучшайте бизнес-процессы и продукт компании. Обучитесь работе с библиотеками Python
9 месяцев
с нуля
Старт 28 ноября
профессия
Занимайтесь созданием сайтов, веб-приложений, сервисов и их интеграцией с внутренними бизнес-системами на бекенд-языке PHP
10 месяцев
с нуля
Старт 28 ноября
профессия
Создание веб-приложений со скоростью света
5 месяцев
c опытом
Старт 28 ноября
профессия
Обучитесь разработке визуальной части сайта — фронтенда, а также реализации серверной — бэкенда. Освойте HTML, CSS, JavaScript
16 месяцев
с нуля
Старт 28 ноября
профессия
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 28 ноября
профессия
новый
Организовывайте процесс автоматизации тестирования на проекте, обучитесь языку программирования JavaScript, начните управлять процессом тестирования
8 месяцев
c опытом
Старт 28 ноября