Для создания веб игр на языке JavaScript используется технология Canvas , которая позволяет выполнять JavaScript код в HTML5 документе. Вы можете более детально ознакомиться с этой технологией посмотрев видео ниже:
На html странице прописывается лишь тег канвас, а также подключение JS файла, в котором будет происходить обработка всей функциональности. К примеру, HTML файл может выглядеть следующим образом:
В JS файле необходимо найти нужный канвас по id и указать способ работы с ним.
Добавление изображений и аудио
Далее необходимо загрузить все изображения, а также аудио файлы, которые будут использоваться в игре. Для этого используйте класс Image и Audio соответсвенно. Ниже вы можете скачать все необходимые картинки, а также аудиофайлы к игре.
Код добавления изображений и аудио в игру:
Рисование объектов
Чтобы нарисовать объекты, а также добавить функционал к игре необходимо прописать функцию, которая будет постоянно вызываться. Такую функцию вы можете назвать как вам будет угодно. Главное, вам нужно вызвать эту функцию из вне её хотя бы один раз, а внутри неё прописать метод requestAnimationFrame , который будет вызывать функцию постоянно.
Весь код игры стоит помещать в этот метод, ведь в нем он будет постоянно обрабатываться и игра будет выглядеть живой и анимированной.
Чтобы отследить нажатие игрока на какую-либо клавишу, необходимо использовать отслеживание событий — addEventListener . К примеру, чтобы отследить нажатие на любую клавишу на клавиатуре надо прописать следующий код:
Видео урок
Это были лишь небольшие азы перед созданием самой игры. Предлагаем вам ознакомиться с небольшим видео уроком, в ходе которого вы создадите небольшую 2D игру на чистом JavaScript’е.
Весь JS код игры
Ниже вы можете посмотреть на полностью весь код JavaScript файла, который был создан в ходе видео урока выше:
April 26, 2016
Данная статья планируется как пошаговый обзор создания простой JavaScript-игры класса “Ball and Paddle” на Canvas. Примерами такой игры могут послужить старые DOS-е игры наподобие таких — Ball and Paddle.
Пример кода из этой статьи взят из видео-курса достаточно известного Интернет-ресурса, посвященного фронтенд-разработке — Udemy.
Почему Canvas и почему игра? Лично для меня процесс познания JavaScript сильно облегчается благодаря Canvas — так интереснее. А создание игры на Canvas — это еще интереснее!
Итак, с чего начнем? Дальше в меру своих сил буду стараться детально пошагово рассказывать, что делает тот или иной кусок кода. И начнем с базового набора — создания Canvas.
Базовый Canvas
HTML-разметка страницы будет предельно простой:
В JavaScript’е создадим две глобальные переменные — одну для элемента Canvas, вторую — для 2d-контекста Canvas. Когда parser браузера построит DOM-дерево документа (событие ), инициализируем обе переменные, выполним проверку удачного получения 2d-контекста Canvas и если проверка будет пройдена успешно, то динамически зададим размеры Canvas:
Базовые элементы игры
Основа Canvas была создана в предыдущем шаге. В этом шаге создадим три фигуры, которые будут учавствовать в игре. Таковыми фигурами будут:
Ниже я приведу JavaScript-код создания всех трех элементов, но сам код комментировать не буду, так как он очень простой и относится к основам Canvas:
Живой результат вышеприведенного кода можно посмотреть на этой странице — Lesson1-1. Это то, что должно получиться и что послужит заготовкой для игры.
Анимация мячика
В этом шаге предстоит сделать более интересные вещи. Во-первых, мы сделаем так, чтобы мячик начал двигаться как по-горизонтали, так и по-вертикали. А во-вторых, сделаем так, чтобы он вел себя как настоящий резиновый мячик — при ударе о стену отскакивал от нее и мчался в противоположном направлении.
Сделать это достаточно просто. Для этого нам понадобится одна из так называемых тайминговых функций JavaScript — . А также немного воображения.
Анимация мячика будем делать по-простому принципу, по которому делается любой мультфильм или кино — мячик будет отрисовываться с заданной частотой ( ), но каждый раз в новой позиции. В результате будет создаваться иллюзия его движения. Каждая новая позиция мячика — это его координата по оси X или Y с новым значением соответственно.
Чтобы мячик двигался достаточно быстро, изменять значения координат ( и ) мячика по оси X и Y будем с определенным шагом ( и ) — допустим, со значениями 5 или 6:
Эффект отскакивания от стенок (как резиновый мячик) обеспечивает проверка условий в участке кода:
Здесь все просто — при выполнении условия знак переменной или будет меняться на противоположный. В результате значение переменной или будет возрастать или уменьшаться. Как следствие, мячик будет двигаться в одну или в другую сторону.
Живой пример приведенного выше кода можно посмотреть и изучить на этой странице — Lesson1-2.
Двигаем paddle
В этом шаге нужно заставить двигаться paddle при помощи мыши. Для этого по событию внутри элемента Canvas будем получать значение X-координаты курсора мыши. И передавать это значение элементу paddle, его X-координате левого верхнего угла. Тем самым мы заставим paddle двигаться. За все эти действия будет отвечать функция :
Обратите внимание на последнюю строку функции — . Переменная необходима для того, чтобы при выходе за границы Canvas элемент paddle скрывался ровно на половину своей ширины.
Также не забудем создать переменные для paddle и передать их в код для отрисовки фигуры:
Живой пример приведенного выше кода можно посмотреть и изучить на этой странице — Lesson1-3. Подвигайте курсором мыши право-влево, чтобы увидеть эффект.
Мячик отскакивает от paddle
На этом этапе нужно сделать так, чтобы мячик отскакивал от paddle, когда последний оказывается на его пути. Выполнить эту задачу просто — ведь мячик уже отскакивает от “стен” Canvas. Следовательно, нужно научить мячик “видеть” еще и paddle.
Для этого сначала нужно опеределить внешние границы paddle — все его четыре стороны:
Когда значения всех сторон будут определены, то можно будет подставить эти значения в условие — и дело сделано:
Живой пример приведенного выше кода можно посмотреть и изучить на этой странице — Lesson1-4. Подвигайте курсором мыши право-влево и постарайтесь поймать мячик с помощью paddle, чтобы увидеть эффект.
Угол отскока мячика
В этом шаге сделаем так, чтобы наша игра смотрелась более правильной с точки зрения физики и обычной природы. То есть, при разном угле попадания на paddle мячик должен отскакивать от него с разной скоростью. Чем острее угол падения, тем с большей скоростью отскакивает от paddle мячик.
Решается эта задача несколькими строками кода:
В первой строке находится X-координата середины paddle. В строке определяется расстояние, на котором мячик соприкоснулся с paddle относительно его середины. В строке полученная дистанция присваивается шагу приращения по оси Х мячика — .
Логично предположить, что чем больше величина дистанции точки соприкосновения мячика относительно середины paddle, тем выше новая скорость движения мячика по-горизонтали. Чтобы эта скорость не была слишком высокой, ее необходимо уменьшить, умножив на 0.35, к примеру.
Живой пример приведенного выше кода можно посмотреть и изучить на этой странице — Lesson1-5.
Оптимизация кода
На данный момент наша задача по построению игры практически решена. Но остался один организационный момент.
Заключается он в том, что код необходимо реорганизовать в отдельные функции. Такой код будет читаться и поддерживаться значительно лучше.
Одна из таких функций уже была создана ранее — это функция . Давайте преобразуемся и весь оставшийся код подобным образом:
Готовый пример преобразованного в функции кода можно посмотреть на этой странице — Lesson1-6.
- Like
- Tweet
- +1
RxJs — map
Первый "серьезный" метод в моей RxJs-копилке знаний. На самом деле все просто — этот метод получает на вход поток, обрабатывает каждый ev. … Continue reading
Всем привет!
Давно я не писал новых игрушек и вот, придумал! Почему бы не сделать небольшую игрушку на canvas?
Сегодня я запускаю цикл статей, где попытаюсь рассказать, как я буду делать новую игру.
Начнем с простого, определим, что будем делать. Моя идея следующая: сделать 2D игру на canvas.
Цель в игре: выжить. Вы играете лучником, который защищается от всякого рода существ, которые хотят его сожрать.
Ваш приз: очки и, собственно, жизнь.
Что нам понадобится?
Для облегчения работы я поискал фреймворки для работы с canvas. В результате поисков я остановился на Konva.
Так же я подумал, что лучше прояснить, что нужно делать, нам поможет ментальная карта:
Что ж, приступим!
Начнем мы с самого начала, естественно.
Что мы сделали? Добавили наше будущее поле игры div#container и подключили скрипт фреймворка.
Добавим немного стилей в .
На выходе мы получим наше игровое поле, которое будет раскрашено травкой 🙂 
JavaScript
Попробуем создать нашего игрока и разместить его на нашем игровом поле, сделать перемещение игрока по полю.
Для начала создадим наше поле.
Поле сделано. Займемся игроком.
Так как игрок это не статическая картинка, а динамическое изображение, то для игрока нам понадобится спрайт с анимацией поведения. Возьмем пока что тот спрайт, который я нашел на просторах интернета. Этот странный зеленый цвет пока нам только на руку. Потом, когда уже будет не нужен, мы его аккуратненько уберем с помощью Photoshop.
Создание и размещение игрока
Вот и все. У нас теперь есть игрок, который отображается на игровом поле и просто стоит, покачивается 🙂
Движение
Все-таки просто стоять и смотреть на игрока неинтересно. Добавим динамики — передвижение при нажатии на стрелочки.
Нам понадобится вспомогательная переменная direction для задания направления игрока. Добавим ее в начало, где задавались размеры для поля.
К тому же, так как игрок будет ходить в разные стороны, нам понадобится прописать новые движения для игрока. Добавим в массив движений 3 новых вариации.
Теперь займемся непосредственно отлавливанием нажатия стрелочек для передвижения игрока. Для определения нажатия на клавиши я взял готовый скрипт input.js, который подключил в блок
В JavaScript блок я дописал следующее:
Отлично. Теперь наш игрок реагирует на нажатия клавиш и перемещается по полю. Но что это? Игрок может выйти за границу! Недопустимо! Разберемся с этим. В функции handleInput() добавим ограничения движений
Готово! Теперь наш игрок двигается только в рамках границы поля.
Думаю, что на сегодня хватит. Статья получилась довольно большой. Остальное в следующей части!
Остались вопросы? Пишите в комментариях. Если я где-то кардинально ошибся — так же напишите мне, пожалуйста. Будем разбираться 🙂
Спасибо за внимание! Подписывайтесь на рассылку 😉
Автор статьи: Alex. Категория: JavaScript
Дата публикации: 07.06.2015