"Geometric memory" - это вариация игры на память, только нужно запоминать не разные фигурки, а разное расположение цветов в одних и тех же формах. Всего в игре три разных геометрических фигуры: квадрат, треугольник и круг.

Для раскраски фигур используется 3 цвета, плюс ещё один для фона. Цвет рамки совпадает с последним цветом из палитры, фактически, это тот цвет, который больше всего контрастирует с фоном.

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

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

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

Исходники

https://gitlab.com/grigoriytretyakov/geometric-memory

Игра

Кликнув по картинке, можно попробовать найти разницу между этим двумя квадратами.

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

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

Управлять - стрелками или 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

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

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

Сперва я думал сделать так, чтобы машинка собирала разбросанные шины в центре поля, а людей и конусы сбивать было нельзя. Но потом оказалось, что гораздо веселее как раз таки сбивать конусы, а о людях вообще не заботиться. Потом сделал так, чтобы люди были кем-то вроде дорожных работников, которые поднимают сваленные конусы. Что самое интересное, обычного рандомного движения для людей оказалось достаточно, а писать ИИ не понадобилось, и без него играть порой сложно.

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

class Cone {
    constructor(scene, x, y) {
        this.UP = 'cone1';
        this.DOWN = 'cone2';

        this.isUp = true;

        this.scene = scene;

        this.body = this.scene.matter.add.image(x, y, this.UP);

        this.body.body.label = 'cone';

        this.body.body.cone = this;

        this.body.setScale(0.5);
    }

    up () {
        this.isUp = true;
        this.body.setTexture('cone1');
    }

    down () {
        this.isUp = false;
        this.body.setTexture('cone2');
    }
};

createCollisions() {
    this.matter.world.on('collisionstart', (event) => {
        event.pairs.forEach(pair => {
            const { bodyA, bodyB  } = pair;

            if (bodyA.label === 'car' && bodyB.label === 'cone') {
                bodyB.cone.down();
            }
            else if (bodyA.label === 'cone' && bodyB.label === 'car') {
                bodyA.cone.down();
            }
            else if (bodyA.label === 'man' && bodyB.label === 'cone') {
                bodyB.cone.up();
            }
            else if (bodyA.label === 'cone' && bodyB.label === 'man') {
                bodyA.cone.up();
            }
        });

        if (this.cones.filter(cone => cone.isUp).length === 0) {
            this.scene.start('GameOver');
        }
    });
}

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

Тут я просто хотел сделать маленький шутер. Простой и несложный. Просто стрелялка на Phaser третьей версии.

Чтобы получать удовольствие от разработки (возможно и от большинства практических занятий), нужно соблюдение пары условий:

1. это должно нравиться;
2. со временем навык должен совершенствоваться, чтобы получалось всё лучше и быстрее.

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

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

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

Цель написания этой игрушки состояла в создании конфига, которй позволит писать игры на phaser3, используя в качестве сервера что-то яваскриптовое, что будет быстро собирать и обновлять страницу. До этого я запускал сборку webpack'ом, а файлы хостил питоном - python -m SimpleHTTPServer.

В итоге наткнулся на статью A Modern Web Development Setup For Phaser 3, откуда взял всё необходимое.

В результатет получилась такая игра.

Исходники