Игра на чистом JavaScript за 20 минут

it Новости Игра на чистом JavaScript за 20 минут Игра на чистом JavaScript за 20 минут 208 336 15 мая 2018 в 09:12

На JS можно создавать сложные и простые игры любых жанров. Мы расскажем как создать 2D игру на JavaScript и HTML5 всего за 20 минут.

Для создания веб игр на языке JavaScript используется технология Canvas, которая позволяет выполнять JavaScript код в HTML5 документе. Вы можете более детально ознакомиться с этой технологией посмотрев видео ниже:

На html странице прописывается лишь тег канвас, а также подключение JS файла, в котором будет происходить обработка всей функциональности. К примеру, HTML файл может выглядеть следующим образом:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Flappy Bird!</title> </head> <body> <canvas id="canvas" width="288" height="512"></canvas> <script src="js/game.js"></script> </body> </html>

В JS файле необходимо найти нужный канвас по id и указать способ работы с ним.

var cvs = document.getElementById("canvas"); var ctx = cvs.getContext("2d");

Добавление изображений и аудио

Далее необходимо загрузить все изображения, а также аудио файлы, которые будут использоваться в игре. Для этого используйте класс Image и Audio соответсвенно. Ниже вы можете скачать все необходимые картинки, а также аудиофайлы к игре.

Скачать аудио файлы можно по этой ссылке;

Код добавления изображений и аудио в игру:

var bird = new Image(); var bg = new Image(); // Создание объекта var fg = new Image(); // Создание объекта var pipeUp = new Image(); // Создание объекта var pipeBottom = new Image(); // Создание объекта bird.src = "img/bird.png"; // Указание нужного изображения bg.src = "img/bg.png"; // Аналогично fg.src = "img/fg.png"; // Аналогично pipeUp.src = "img/pipeUp.png"; // Аналогично pipeBottom.src = "img/pipeBottom.png"; // Аналогично // Звуковые файлы var fly = new Audio(); // Создание аудио объекта var score_audio = new Audio(); // Создание аудио объекта fly.src = "audio/fly.mp3"; // Указание нужной записи score_audio.src = "audio/score.mp3"; // Аналогично

Рисование объектов

Чтобы нарисовать объекты, а также добавить функционал к игре необходимо прописать функцию, которая будет постоянно вызываться. Такую функцию вы можете назвать как вам будет угодно. Главное, вам нужно вызвать эту функцию из вне её хотя бы один раз, а внутри неё прописать метод requestAnimationFrame, который будет вызывать функцию постоянно.

function draw() { // Какой-либо код requestAnimationFrame(draw); // Вызов функции постоянно } draw(); // Вызов функции из вне

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

Чтобы отследить нажатие игрока на какую-либо клавишу, необходимо использовать отслеживание событий - addEventListener. К примеру, чтобы отследить нажатие на любую клавишу на клавиатуре надо прописать следующий код:

// При нажатии на какую-либо кнопку document.addEventListener("keydown", someMethod); // Вызывается метод someMethod function someMethod() { // Изменяем что-то в коде }

Видео урок

Это были лишь небольшие азы перед созданием самой игры. Предлагаем вам ознакомиться с небольшим видео уроком, в ходе которого вы создадите небольшую 2D игру на чистом JavaScript'е.

Весь JS код игры

Ниже вы можете посмотреть на полностью весь код JavaScript файла, который был создан в ходе видео урока выше:

Больше интересных новостей

Как с помощью JavaScript определить IP адрес пользователя? Мобильная разработка: что выбрать Electron, Tauri или Flutter? 4 худших ошибки в карьере программиста Плохой код обходится компаниям в $85 млрд. в год

📎📎📎📎📎📎📎📎📎📎