Игры на html5

04.05.2020
Posted in blog-article
04.05.2020 admin

Игры на html5

Новый год уже близко, самое время заняться чем-нибудь не только полезным, но и весёлым. Сегодня мы научим вас делать простые игры на хтмл5, зачем? Применив немного силы гугления их можно встраивать в приложения и вот у вас мегакэжуал сделанный своими руками

Учимся делать HTML5-игры с Phaser 3

Phaser — популярная платформа Javascript для создания работающих в браузере HTML5-игр. Это бесплатный, мощный, простой в использовании инструмент с активной поддержкой. Я считаю, что это идеальная платформа для создания первых игр.

В этом уроке мы построим игру, где игрок получает очки каждый раз, когда прикасается к желтой монете. Этот приём является базовым для большинства игровых программ, а потому станет отличной основой для изучения принципов работы Phaser.

Впереди мы расскажем о том, как кодируются сцены, спрайты, тексты, столкновения и tweens!

Установка

Настройка нашего проекта будет простой. Создаем новый каталог под названием «first-game» и отправляем внутрь:

— пустой файл «index.html», который будет отображать нашу игру;

— пустой файл под названием «игра.js», в котором будет храниться наш код Javascript;

— каталог с именем «assets», состоящий из 2 скриптов.

Как показать игру

Начнем с файла «index.html». Перед вами код, который поможет отобразить на веб-странице нашу игру.

<!DOCTYPE html>

<html>

<head>

<meta charset=»UTF-8″>

<title>My First Phaser Game</title>

<script src=»https://cdn.jsdelivr.net/npm/phaser@3.14.0/dist/phaser.min.js»></script>

<script src=»game.js»></script>

</head>

<body>

<h1>My First Phaser Game</h1>

<div id=»game»></div>

<p>Use the arrow keys to move around and collect the coins.</p>

</body>

</html>

Здесь все довольно просто, если обратить внимание на 2 важных момента.

— Загружаем 2 скрипта: phaser.minute.js (берем его у The Phaser framework версии 3.14.0) и game.js (наш файл).

— Добавляем <div id=»game»> элемент в точку начала игры.

Теперь сосредоточим внимание на файле game.JS.

Создание сцены

Каждый проект Phaser состоит из сцен. У нас будет только одна сцена, в которую мы уместим всю игру.

Для создания сцены мы используем класс с 3 методами. Очень важно понять, что делает каждый из этих методов, поскольку они являются ключом к тому, как работает Phaser.

// Create our only scene called mainScene, in the game.js file

class mainScene {

// The 3 methods currenlty empty

preload() {

// This method is called once at the beginning

// It will load all the assets, like sprites and sounds

}

create() {

// This method is called once, just after preload()

// It will initialize our scene, like the positions of the sprites

}

update() {

// This method is called 60 times per second after create()

// It will handle all the game’s logic, like movements

}

}

Подводя итог, повторим порядок использования и именования этих 3х методов: preload() > create() > update() > update() > update() > и т. д.

Начать игру

Теперь, когда наша сцена создана, пришло время начать игру. Для Phaser.Game() в конце JavaScript-файла существует много дополнительных параметров. Перечислим основные из них.

new Phaser.Game({

width: 700, // Width of the game in pixels

height: 400, // Height of the game in pixels

backgroundColor: ‘#3498db’, // The background color (blue)

scene: mainScene, // The name of the scene we created

physics: { default: ‘arcade’ }, // The physics engine to use

parent: ‘game’, // Create the game inside the <div id=»game»>

});

Далее мы опишем процесс заполнения preload(), create() и update() методов и завершим работу над нашим маленьким проектом.

Тест игры

Пришло время оценить промежуточные результаты нашей работы. Для этого воспользуемся локальным веб-сервером. Отметим отдельно, что обычное открытие index.html-файла через браузер нам не подойдёт.

Если вы уже знаете, как производить настройку локального веб-сервера, можете пропустить эту часть. Сейчас я опишу вам очень простой метод, который подойдет даже начинающим.

Скачайте и установите Adobe Brackets — это бесплатный редактор кода, который работает на Windows, Mac и Linux. Затем с его помощью откройте каталог «first-game», который мы создали ранее, и нажмите на маленький значок болта в правом верхнем углу приложения. Это автоматически создаст локальный веб-сервер и запустит игру в открывшемся окне браузера.

Если вы всё сделали правильно, перед вами будет только синий фон. Не волнуйтесь, скоро результат наших действий станет более красочным и интересным!

Добавляем игрока

Первым элементом, который мы добавим, станет игрок (белый монстр). Справимся с этой задачей за 2 коротких шага.

Шаг 1. Загрузите спрайт. Так как мы загружаем активного персонажа, следует сделать это в preload().

// Parameters: name of the sprite, path of the image

this.load.image(‘player’, ‘assets/player.png’);

Шаг 2. Отобразить спрайт на экране. Поскольку этот момент является частью сцены, мы сделаем это в create().

// Parameters: x position, y position, name of the sprite

this.player = this.physics.add.sprite(100, 100, ‘player’);

Стоит упомянуть 3 интересных момента.

-Код игрока хранится в переменной this.player, которая доступна во всех методах.

-Мы ввели this.physics для создания игрока. Это означает, что мы используем физический движок на sprite, который в дальнейшем упростит обработку столкновений с монеткой.

-Если мы поставим игрока на позицию x = 0 и y = 0, то это отобразится в верхнем левом углу экрана.

Добавляем монету

Сейчас мы добавим желтую монету, которую игрок должен поймать. Процесс будет очень похож на то, что мы делали ранее.

Сначала загружаем изображение монеты preload().

this.load.image(‘coin’, ‘assets/coin.png’);

Затем мы показываем монету на экране в create():

this.coin = this.physics.add.sprite(300, 300, ‘coin’);

Добавляем счет

Последний элемент, который отсутствует в нашей игре, это оценка действий игрока. Вставляем этот код прямо в create().

// Store the score in a variable, initialized at 0

this.score = 0;

// The style of the text

// A lot of options are available, these are the most important ones

let style = { font: ’20px Arial’, fill: ‘#fff’ };

// Display the score in the top left corner

// Parameters: x position, y position, text, style

this.scoreText = this.add.text(20, 20, ‘score: ‘ + this.score, style);

Теперь мы добавили все значимые элементы, осталось запрограммировать их на действие. Если вы проверите запуск прямо сейчас, то обнаружите, что игрок застрял на середине экрана, а монетки не реагируют на столкновения. Не пугайтесь, так и должно быть. Сейчас мы всё доработаем.

Перемещение игрока

Чтобы переместить игрока, мы должны объяснить Фазеру, что для получения входных данных мы будем использовать клавиши со стрелками. Для этого мы введём эту строку в create() метод.

this.arrow = this.input.keyboard.createCursorKeys();

С помощью этой новой переменной игра сможет проанализировать, какая клавиша со стрелкой нажата в данный момент, и изменить позицию игрока. Для того, чтобы игрок получил возможность перемещаться в любое время, вы добавляем в update()  следующий код, который будет активироваться 60 раз в секунду.

// Handle horizontal movements

if (this.arrow.right.isDown) {

// If the right arrow is pressed, move to the right

this.player.x += 3;

} else if (this.arrow.left.isDown) {

// If the left arrow is pressed, move to the left

this.player.x -= 3;

}

// Do the same for vertical movements

if (this.arrow.down.isDown) {

this.player.y += 3;

} else if (this.arrow.up.isDown) {

this.player.y -= 3;

}

Взаимодействие счётчика с монетой

Нам необходимо сделать так, чтобы при каждом прикосновении игрока к монете, счёт увеличивался на 10 очков, а монета перемещалась в любую другую точку. Решить эту задачу нам поможет следующий код, который мы добавим в hit().

hit() {

// Change the position x and y of the coin randomly

this.coin.x = Phaser.Math.Between(100, 600);

this.coin.y = Phaser.Math.Between(100, 300);

// Increment the score by 10

this.score += 10;

// Display the updated score on the screen

this.scoreText.setText(‘score: ‘ + this.score);

}

Нам нужно активировать hit() тогда, когда игрок и монета соприкоснутся. Но как мы узнаем, когда это произойдет? В этом нам поможет встроенный физический движок от Фазер. Просто поместите этот код в начале update().

// If the player is overlapping with the coin

if (this.physics.overlap(this.player, this.coin)) {

// Call the new hit() method

this.hit();

}

Увеличиваем удовольствие от игры

Игроки любят зрелищность. В данный момент в результате поимки монеты изменяется только счёт на табло. Этого мало! Сделаем так, чтобы в момент захвата монеты персонаж временно увеличивался в размерах.

В этом нам поможет анимация, код которой мы интегрируем hit() .

// Create a new tween

this.tweens.add({

targets: this.player, // on the player

duration: 200, // for 200ms

scaleX: 1.2, // that scale vertically by 20%

scaleY: 1.2, // and scale horizontally by 20%

yoyo: true, // at the end, go back to original scale

});

Выполняем контрольный запуск игры.

Всё работает? Поздравляю, игра готова! Думаю, я знаю, чем вы будете заниматься в ближайшее время: играть в то, что вы только что создали своими руками.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Contact

Давайте работать вместе!

Пишите нам и найдем точки соприкосновения, может станем партнерами, а может поможем вам зайти в нашу чудесную нишу

Вы разработчик?

Пишите! Нам постоянно нужны новые кадры, либо можем помочь в продвижении вашего приложения

Новичок?

Поможем быстро войти в нишу, не тратя годы на понимание

Давно в нише?

Рады будем пообщаться как на темы whitehat, так и blackhat тематики ^_^ + всегда есть что обсудить по поводу рекламных сетей

ПИШИ В TELEGRAM!

Contact