https://habrahabr.ru/post/329652/Доброго времени суток, Хабр! Совсем недавно появилась цель создать аналог игры
Agar.io. Чтобы не терять время и не усложнять себе жизнь было решено, что проще и быстрее будет делать игру используя готовый движок для разработки игр.
Мой выбор пал на
phaser.js, так как, мне показалось, по нему больше всего есть обучающего материала и он достаточно быстрый так как построен на библиотеке
Pixi.js.
В этой части я расскажу как реализовать управление мышью. В конечном итоге мы получим вот такой результат:
Итак, в первую очередь инициализируем все наши переменные:
var width = window.innerWidth; //получаем ширину страницы
var height = window.innerHeight; //получаем высоту страницы
var game = new Phaser.Game(width, height, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); //генерируем canvas на phaser, с высотой и шириной экрана пользователя.
var player; // собственно переменная отвечающая за такой объект как юнит.
var bg; //фон страницы, в нашем случае сетка
Далее идет функция preload() отвечающая за предзагрузку всех графических элементов страницы, у меня это только сетка:
function preload() {
game.load.image('background', 'img/grid.png');
}
После функция create() в которой мы создаем наше холст со всеми элементами на нем:
function create() {
game.time.advancedTiming = true;
game.time.desiredFps = 60; //собственно fps
game.time.slowMotion = 2.0; //свойство позволяющее замедлять скорость анимации на сайте, по умолчанию 0, у нас 2, чтобы юнит не слишком резво метался по полю
bg = game.add.tileSprite(0, 0, 8000, 8000, 'background'); / фон сетка
game.world.setBounds(0, 0, 8000, 8000); размеры карты
game.stage.backgroundColor = "#000"; // цвет фона
var bmd = generateCircle('red', 20); / рисуем круг самописной функцией диаметром 20px
player = game.add.sprite(game.world.centerX, game.world.centerY, bmd); //создаем юнита
game.physics.enable(player, Phaser.Physics.ARCADE); // вызываем физический движок ARCADE(он встроен в phaser.js)
game.camera.follow(player); //добавляем слежение камеры за игроком
}
Дальше в функции upload() вызываем событие при движении мышью:
function update() {
game.input.addMoveCallback(function(){
game.physics.arcade.moveToPointer(player, 400); //при использовании физического движка ARCADE есть стандартная функция слежения юнита за курсором
});
}
Функция render() нужна для отладки:
function render() {
game.debug.cameraInfo(game.camera, 32, 32); //выводим инфу касательно движений камеры
}
Функция рисующая круг:
function generateCircle(color, size){
var bitmapSize = size * 2
var bmd = this.game.add.bitmapData(bitmapSize, bitmapSize);
bmd.ctx.fillStyle = color;
bmd.ctx.beginPath();
bmd.ctx.arc(size, size, size, 0, Math.PI*2, true);
bmd.ctx.closePath();
bmd.ctx.fill();
return bmd;
}
На этом все, у нас готово управление как в agar.io. Ещё раз
ссылка на конечный результат.
Там пока нет границ карты и гранул поедая который игрок увеличивается, по ходу разработки я постараюсь продемонстрировать как это реализовать, а так же как сделать игру многопользовательской на node.js.