Разработка на коленке

"тут должна быть красивая цитата о программировании"

Match3Cat - игрушка про котиков на Reactjs

2017-10-17 23:35
cat

На работе у меня стало очень много ReactJS, и мне стало интересно, как будет выглядеть разработка игры на этом фреймворке.

История

Это просто результат любопытства из категории "а что будет, если...". В итоге получилась вот такая штука.

Сперва в игре список котов был сделан одномерным массивом, который было очень удобно обновлять в Redux (где каждый раз нужно создавать новую копию данных, чтобы внести изменения). А разбиение на таблицу добился простой эмуляцией двумерного массива на одномерном списке (операция деления по модулю очень помогает). Не то чтобы это было нужно, просто было интересно писать алгоритм. И было всё довольно неплохо до того момента, пока мне не понадобилась анимация в момент совпадения котиков. Тут мне нужно было знать, где находился котик в момент совпадения по цветам, а значит нужно было хранить позицию. Чтобы не возиться с дополнительным хранилищем, котики были переделаны в словарь, а вместо одномерного списка - двумерный массив. Ну а ещё каждому котику присваивался уникальный номер, чтобы генерировать уникальный же key

const createCat = (() => {
    let nextCatNumber = 0;

    return ((x, y) => {
        return {
            num: nextCatNumber++,
            kind: Math.floor(Math.random() * CATS_NUMBER),
            x: x,
            y: y,
        };
    })
})();

В целом, получилось довольно интересно, но писать игры на ReactJS мне не понравилось, не для этого фреймворк предназначался.

Теперь настал черёд воинственных прямоугольных попрыгунчиков .

Ссылка на игру

match3cat game

Ресурсы

Исходный код там - https://github.com/grigoriytretyakov/react-match3-game

Игра там - http://tinycode.ru/games/match3cat/