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

В этом прототипе нужно как можно дольше продержаться, уклоняясь от столкновений с зомби, а для борьбы использовать снаряд из света. Проблема в том, что снаряд один и его нужно ловить обратно для повторного броска, а зомби ещё и пытается от него уклоняться (иногда - успешно).

Управлять - стрелками или WAD, для выстрела - пробел. На тачскрине тоже играть можно: свайпами меняем направление или прыгаем, а стрелять просто нажатием на экран.

Эволюция персонажей

В финальном варианте игры персонажи не такие, как я их создавал в первом варианте. Сперва я думал сделать просто прыгающие квадраты, а уже потом под влиянием комикса сделал из врагов (frags) зомби. Так у зелёного врага в глазах появились крестики. Потом я попытался сделать глаза более выразительными, а тело зомби деформированным.

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

pointerMove(pointer) {
    let frame = pointer.position.x < this.startButton.x ? 0 : 3;

    let offset = 1;
    if (pointer.position.y > (this.startButton.y + this.startButton.height)) {
        offset = 2;
    }
    else if (pointer.position.y < (this.startButton.y - this.startButton.height)) {
        offset = 0;
    }

    frame += offset;

    this.startButton.setFrame(frame);
}

Мобильные устройства

Так это выглядит на экране моего телефона:

А так это смотрится, если экран повернуть вертикально:

Код для ресайза и для управления с тачскрина взял из книги "HTML5 Cross Platform Game Development Using Phaser 3", которую написал Emanuele Feronato (https://www.emanueleferonato.com/).

Исходники и игра

Исходники https://gitlab.com/grigoriytretyakov/phaser3-bouncing-frags

Играть можно там, или кликнув по зомби: