Доброго времени суток, Хабр! Совсем недавно появилась цель создать аналог игры 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.