Учебник по игре Mario с JavaScript и HTML Canvas

• Разработка игры с боковой прокруткой в стиле Марио.  

• Использование чистого JavaScript без фреймворков.  

• Возможность создания бонусов, стрельбы огненными шарами и других элементов.  

• Настройка проекта и создание необходимых файлов.  

• Добавление силы тяжести и движений игрока.  

• Создание платформ и прокрутка фона.  

• Добавление сценария выигрыша и графических элементов.  

• Создание полного уровня и тонкая настройка.  

• Создание папок и файлов в текстовом редакторе.  

• Создание файла index.html и index.js.  

• Настройка элемента canvas в проекте.  

• Получение доступа к холсту с помощью JavaScript.  

• Создание тега скрипта и указание источника файла index.js.  

• Получение контекста холста и настройка двухмерной игры.  

• Создание класса player в JavaScript.  

• Определение свойств игрока: позиция, ширина, высота, цвет.  

• Установка значений по умолчанию для позиции и размеров игрока.  

• Начинаем с определения положения, ширины и высоты элемента.  

• Создаем базовый квадрат и метод draw для рисования игрока.  

• Используем метод fillRect для рисования прямоугольника на холсте.  

• Создаем константу player и вызываем метод draw.  

• Проверяем, что игрок отображается на экране.  

• Обнаруживаем, что игрок не занимает весь экран.  

• Изменяем размер холста с помощью JavaScript.  

• Устанавливаем ширину и высоту холста равными ширине и высоте окна.  

• Убираем поля вокруг холста с помощью CSS.  

• Изменяем цвет игрока на красный и уменьшаем его размер до 30x30.  

• Добавляем скорость к игроку для его движения.  

• Добавляем свойство velocity с координатами x и y.  

• Создаем метод update для обновления позиции игрока.  

• Перемещаем код обновления над методом draw для корректного движения игрока.  

• Создаем функцию animate для вызова requestAnimationFrame.  

• Вставляем функцию для зацикливания в requestAnimationFrame.  

• Создана анимированная функция для изменения свойств проигрывателя.  

• Используется рекурсивный цикл для вызова animate.  

• Проверка работы через вывод текста в консоль.  

• Замена консольного вывода на player.update для обновления изображения.  

• Высокая скорость обновления изображения из-за увеличения до 20.  

• Вызов draw перед перемещением положения для точного рисования.  

• Использование clearrect для очистки холста перед рисованием.  

• Аргументы clearrect: нулевая позиция x и y, ширина и высота холста.  

• Очистка всего холста для сохранения формы игрока.  

• Квадрат движется вниз из-за скорости.  

• Добавление гравитации для реалистичной физики.  

• Гравитация как ускорение по оси y.  

• Создание константы гравитации и установка её значения.  

• Добавление силы тяжести к оси y скорости игрока.  

• Настройка значения силы тяжести для ускорения падения.  

• Проблема с падением игрока ниже уровня холста.  

• Добавление гравитации только при определенном условии.  

• Проверка позиции игрока и его скорости.  

• Установка скорости игрока на ноль при пересечении нижней границы холста.  

• Добавление прослушивателя событий для клавиатуры.  

• Использование метода addEventListener для прослушивания событий keydown.  

• Определение функции для обработки нажатий клавиш.  

• Использование объекта события для определения нажатой клавиши.  

• Использование деструктурирования для получения кода клавиши.  

• Применение оператора switch для обработки различных нажатий клавиш.  

• Определение клавиш для перемещения игрока.  

• Использование скорости игрока для его движения.  

• Вычитание текущего значения скорости y для движения вверх.  

• Вычитаем 20 из скорости игрока по оси Y и отправляем её вверх.  

• Добавляем скорость по оси Y к положению игрока, но учитываем гравитацию.  

• Скорость Y уменьшается до нуля, когда игрок достигает нижней части экрана.  

• Добавляем скорость X к позиции игрока в функции обновления.  

• Проверяем, что игрок движется по оси X при нажатии клавиши "d".  

• Добавляем прослушиватель событий для клавиши "вверх" для остановки движения.  

• Копируем код для прослушивателя событий и меняем клавишу "вниз" на "вверх".  

• Устанавливаем скорость X игрока равной нулю при нажатии клавиши "вверх".  

• Проверяем, что движение прекращается при отпускании клавиши "вверх".  

• Устанавливаем скорость X игрока на единицу для более точного управления.  

• Проверяем, что клавиша "d" нажимается только один раз при удержании.  

• Создаем новую константу для отслеживания нажатых клавиш.  

• Создаем объект для отслеживания нажатых клавиш.  

• Устанавливаем свойство "pressed" для правой и левой клавиш по умолчанию false.  

• При нажатии клавиши устанавливаем свойство "pressed" равным true.  

• Устанавливаем свойство "pressed" левой клавиши равным true при нажатии клавиши "a".  

• Устанавливаем свойство "pressed" всех клавиш равным false при нажатии клавиши "up".  

• Проверяем работу прослушивателя событий в консоли.  

• Нажатие клавиши вниз устанавливает значение true, отпускание клавиши вверх устанавливает значение false.  

• Использование клавиш в цикле анимации для перемещения игрока влево или вправо.  

• Добавление оператора else для остановки движения при отпускании клавиши.  

• Создание класса платформы с методом конструктора.  

• Определение свойств платформы: позиция, ширина, высота.  

• Добавление функции рисования для отображения платформы.  

• Использование функции обнаружения прямоугольных столкновений.  

• Добавление условия для остановки игрока при падении на платформу.  

• Проверка положения игрока по оси y и x для определения столкновения.  

• Добавление условия для падения игрока при отрыве от платформы.  

• Проверка правой стороны игрока и платформы для остановки движения.  

• Финальная настройка для предотвращения падения игрока при движении влево.  

• Обнаружение коллизий платформы работает корректно.  

• Игрок может запрыгивать на верхние платформы.  

• Для создания эффекта игры Марио и бокового скроллера, фон должен перемещаться при движении игрока.  

• Игрок останавливается при достижении определенной точки.  

• Добавляется условие для ограничения перемещения игрока.  

• Если позиция игрока по оси X меньше 400, игрок перемещается вправо, иначе останавливается.  

• Игрок останавливается при достижении 100% экрана.  

• Добавляется условие для ограничения перемещения влево.  

• Если позиция игрока по оси X больше 100, игрок перемещается вправо, иначе скорость игрока устанавливается равной нулю.  

• При нажатии правой клавиши платформа перемещается влево.  

• При нажатии левой клавиши платформа перемещается вправо.  

• Это создает иллюзию движения платформ вместе с игроком.  

• Создается массив платформ вместо одной константы.  

• Заменяются все ссылки на одну платформу на массив платформ.  

• Используется цикл для доступа к каждой платформе в массиве.  

• Исправляются ошибки в условных обозначениях if и else if.  

• Копируется и вставляется код для каждой платформы в условные обозначения.  

• Использование кода для замены платформ.  

• Вставка платформ в массив для создания нескольких платформ.  

• Использование метода конструктора для передачи значений x и y.  

• Передача значений x и y через объект.  

• Использование свойств x и y для каждой платформы.  

• Пример с двумя платформами с разными позициями.  

• Достижение определенной позиции для выигрыша.  

• Использование смещения прокрутки для отслеживания прогресса.  

• Условие для определения выигрыша при достижении определенного смещения.  

• Создание графических файлов для игры.  

• Импорт изображений в проект.  

• Решение проблем с импортом изображений в JavaScript.  

• Использование VS Code для создания сервера с помощью расширения Live Server.  

• Переход в репозиторий canvas spoilerplate для создания нового сервера.  

• Клонирование репозитория и установка необходимых зависимостей.  

• Переход в веб-каталог и клонирование репозитория.  

• Установка зависимостей с помощью npm или yarn.  

• Запуск сервера с помощью команды npm start.  

• Импорт данных из оригинального проекта в новый серверный проект.  

• Исправление ошибок, связанных с изображениями.  

• Перемещение изображений в новый проект и настройка ссылок на них.  

• Использование drawimage для рисования платформ.  

• Настройка HTML-изображения для платформы.  

• Исправление ошибок и проверка корректного отображения платформ.  

• Ширина платформы по умолчанию равна 200 пикселям, что меньше ширины изображения.  

• Необходимо установить ширину платформы равной ширине изображения.  

• Высота платформы не имеет большого значения, но лучше установить её равной высоте изображения.  

• Игрок должен быть нарисован перед платформами.  

• Игрок должен быть последним элементом, выводимым на экран.  

• Платформы должны быть размещены под игроком для создания иллюзии движения.  

• Измените размер холста на 1024x576 для соотношения сторон 16:9.  

• Используйте черный цвет фона для различения игровой области и фона.  

• В цикле анимации заполняйте прямоугольник с белым цветом для различения игровой области.  

• Используйте display: flex и выравнивание элементов по центру для центрирования холста.  

• Установите высоту тела равной 100% высоты окна браузера для вертикального центрирования.  

• Переместите платформы под игрока, установив фиксированные значения для их положения.  

• Установите значение y для платформ, чтобы они начинались с левой стороны экрана.  

• Измените значение y на отрицательное, чтобы платформы не падали на нижнюю часть экрана.  

• Убедитесь, что платформы действуют как платформы, а не как препятствия для игрока.  

• Платформа должна быть сдвинута вправо на ширину изображения.  

• Уменьшение ширины изображения устраняет пробелы.  

• Платформа теперь идеально подходит для движения персонажа.  

• При падении с края игра перезапускается.  

• Добавление новых изображений для эффекта параллакса.  

• Импорт изображений фона и холмов в игру.  

• Создание нового класса для декораций.  

• Использование класса для всех объектов, кроме платформ и игроков.  

• Создание константы для универсальных объектов.  

• Создание функции для создания изображений.  

• Передача источника изображения в функцию.  

• Использование функции для создания изображений для платформ и фона.  

• Настройка отображения общих объектов на экране.  

• Использование функции рисования для отображения объектов.  

• Исправление отображения фона и платформы.  

• Создание нового общего объекта для холмов.  

• Создание изображения из холмов.  

• Добавление холмов в игру для улучшения визуального эффекта.  

• Экспортируем файл из Illustrator и размещаем холмы в нужном месте.  

• Перемещаем фон и холмы для создания эффекта параллакса.  

• Используем цикл для перемещения всех объектов на значение, равное трем.  

• Исправляем ошибку в коде, чтобы объекты двигались с разной скоростью.  

• Добавляем код для движения влево и вправо для создания параллаксной прокрутки.  

• Проверяем, что при движении вправо добавляется больше холмов.  

• Создаем дополнительную платформу для создания ямы.  

• Настраиваем платформу так, чтобы она была сдвинута вправо.  

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

• Удаляем код, удерживающий игрока на месте в нижней части экрана.  

• При падении игрока перезапускаем игру, вызывая код инициализации.  

• Добавляем условие проигрыша и сбрасываем статистику игроков.  

• Создаем функцию init для сброса всех начальных значений.  

• Удаляем константы и меняем их на let для изменения значений.  

• При проигрыше сбрасываем все начальные значения и перезапускаем игру.  

• Ускорение работы плеера для тестирования игры.  

• Изменение скорости игрока для всех мест, где она установлена.  

• Настройка скорости игрока при прыжке.  

• Создание новых платформ для усложнения игры.  

• Настройка ширины и положения платформ.  

• Проблемы с отображением платформ и их решение.  

• Добавление высокой платформы для сверхдальнего прыжка.  

• Импорт и настройка изображения высокой платформы.  

• Правильное расположение высокой платформы в массиве.  

• Перемещение высокой платформы в нужное место.  

• Уменьшение ширины текущего изображения для точного позиционирования.  

• Проверка и настройка положения высокой платформы.  

• Добавление еще одной платформы для увеличения сложности.  

• Настройка разрыва между платформами.  

• Проверка прыжков и исправление ошибок.  

• Исправление влияния клавиши "Вверх" на скорость прыжка.  

• Увеличение скорости прыжка для улучшения игрового процесса.  

• Прыжки игрока должны соответствовать платформам.  

• Игрок должен запрыгнуть на верхнюю платформу для завершения игры.  

• Проверка смещения прокрутки для определения выигрыша.  

• Платформы начинают прокручиваться на расстоянии 400 пикселей.  

• Вычитание 400 из смещения прокрутки для корректной работы.  

• Завершение игры при достижении белой платформы.  

• Игрок не должен отклоняться в сторону при нажатии на левую часть экрана.  

• Использование оператора or для проверки смещения прокрутки.  

• Перемещение игрока влево только при положительном смещении прокрутки.  

• Установка оператора else if для перемещения платформ вправо.  

• Создание 13 спрайтов для персонажа.  

• Использование инструмента dk tool для создания анимаций.  

• Добавление четырех новых файлов в проект.  

• Импорт листов спрайтов в папку с изображениями.  

• Замена кода для отображения игрока на изображение.  

• Удаление кода для отображения игрока как прямоугольника.  

• Добавление свойства image для отображения изображения игрока.  

• Создание изображения на основе подставки для спрайтов.  

• Экспортированное изображение больше, чем нужно, но это можно исправить с помощью функции рисования изображений.  

• Добавляем аргументы для ширины и высоты персонажа.  

• Увеличиваем высоту до 150 для правильного отображения на экране.  

• Обрезаем изображение, чтобы показывать только одну часть персонажа.  

• Добавляем аргументы для начала обрезки с верхнего левого угла.  

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

• Добавляем свойство frames для отображения текущего кадра анимации.  

• Умножаем ширину обрезки на количество кадров для плавного перехода между изображениями.  

• Обновляем количество кадров в функции обновления.  

• При увеличении количества кадров персонаж исчезает с экрана.  

• Обнуляем кадры при достижении последнего кадра.  

• Исправляем ошибку в умножении ширины обрезки на количество кадров.  

• Импортируем новый лист спрайтов для бега.  

• Добавляем свойство для текущего спрайта и меняем его при беге.  

• Исправляем несоответствие ширины обрезки для разных состояний персонажа.  

• Добавляем свойство ширины обрезки для каждого состояния персонажа.  

• Исправляем ширину обрезки для анимации бега.  

• Проверяем, что изображение выглядит правильно при беге.  

• Указываем высоту и ширину для стоячего спрайта.  

• Изменяем ширину проигрывателя для корректной анимации.  

• Анимация запуска выглядит неровной из-за разницы в количестве кадров.  

• В анимации стояния 28 кадров, в анимации бега - 59-60.  

• Сбрасываем количество кадров до нуля, если текущий спрайт равен текущему спрайту.  

• Добавляем условие для сброса кадров, если их количество превышает 60.  

• Анимация выглядит почти корректно, но в конце отключается.  

• Изменяем частоту кадров на 59, чтобы избежать нервозности.  

• Правильная частота кадров для бега - 29, для стояния - 59.  

• Частота кадров в положении стоя составляет 60 кадров в секунду, а в режиме бега - около 2930 кадров в секунду.  

• При остановке персонаж не возвращается в исходное положение.  

• Для исправления проблемы нужно вернуться к слушателям событий и настроить их.  

• Персонаж начинает бежать, останавливается, встает и снова бежит.  

• Ширина персонажа меняется из-за неправильной анимации.  

• Для решения проблемы нужно добавить листы спрайтов и настроить их.  

• Персонаж должен двигаться влево, а не вправо.  

• Нужно добавить спрайт для движения влево и настроить его.  

• При движении влево анимация не запускается, нужно добавить условие для изменения спрайта.  

• При переключении между стоянием и бегом влево возникают проблемы.  

• Нужно добавить условие для сброса фреймов при определенных условиях.  

• Проблема связана с функцией нажатия клавиши вверх.  

• Переключение между спрайтами нужно делать в цикле анимации.  

• Нужно проверить текущий ключ и текущий спрайт игрока.  

• Сбросить фреймы на единицу в начале анимации.  

• Нужно добавить условие для движения влево и вправо.  

• Переименовать текущую клавишу для удобства.  

• Следить за последней нажатой клавишей для правильного переключения спрайтов.  

• Добавить условия для изменения текущего спрайта в зависимости от последней нажатой клавиши.  

• Персонаж теперь может двигаться влево и вправо, а также останавливаться и вставать.  

• Демонстрация готового продукта и демонстрация возможностей игры.  

• Урок завершен, но есть много возможностей для улучшения игры.  

• В следующем эпизоде будут добавлены новые функции, такие как создание блочных объектов и гумб.  

• Подписывайтесь на канал для продолжения обучения и новых уроков.