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

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

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/

Lightbox - игрушка про квадратик (Phaser, ECMAScript6)

2017-03-26 17:20
beast

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

Основная цель - попробовать ECMAScript6 в работе, а ещё собрать в итоге игру в один файл.

История

Первоначальная идея была сделать кубик, состоящий из света, а жить он должен был в тёмном мире, где всё хочет его убить. Выживать он должен был подпитываясь энергией от пролетающих мимо "энергетических заправок". Но TN-матрица на моём ноутбуке скорректировала планы, потому что тёмная игра смотрелась ужасно, играть было неудобно. Поэтому фон стал светлым, а кубик тёмным. Тут бы впору переименовать его в "Dark energy box", но я решил оставить всё как есть.

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

lightbox game

Ресурсы

Исходный код там - https://bitbucket.org/grigoriytretyakov/lightbox-game

Звуковые эффекты делал там http://www.bfxr.net/

Музыку для игры взял там http://opengameart.org/content/game-game

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

Избавился от Marker With Label

2014-09-04 19:50

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

А spritesheet сгенерировал скриптом на питоне, который выглядит примерно так:

import math

from os import path
from PIL import ImageFont, Image, ImageDraw


def here(*pathchunks):
    return path.abspath(path.join(path.dirname(__file__), *pathchunks))


def spritesheet(image, labels, columns):
    original_width, original_height = image.size

    font_name = '/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf'
    font = ImageFont.truetype(font_name, 10)

    sheet_items = []
    for label in labels:
        item_image = image.copy()

        item_draw = ImageDraw.Draw(item_image)

        _, text_height = item_draw.textsize(label)
        text_width, _ = font.getsize(label)

        item_draw.text(
            ((original_width - text_width) / 2, (original_height - text_height) / 2),
            label, (255, 255, 255), font=font)

        sheet_items.append(item_image)

    sheet_width = original_width * columns
    lines = int(math.ceil(len(labels) / float(columns)))
    sheet_height = original_height * lines
    sheet = Image.new(mode='RGBA', size=(sheet_width, sheet_height), color=(0, 0, 0, 0))

    for number, item_image in enumerate(sheet_items):
        x = number % columns
        y = int(number / columns)
        sheet.paste(item_image, (x * original_width, y * original_height))

    sheet.save(here('sheet.png'), 'PNG')


if __name__ == '__main__':
    spritesheet(
        Image.open(here('image.png')), [str(i) for i in range(25)], 10
    )

Полезные вещи из мира JavaScript

2014-08-15 17:50

Основной мой профиль - разработка на Python серверной части web-приложений. Довольно часто пишу что-то консольное на том же питоне, что крутится на серверах во мраке линуксовых терминалов. Во всяком случае так было раньше. В последнее время стал писать на JavaScript гораздо больше, вот игрушки пробую делать, а совсем недавно делал на работе приложение с картами, картинками и прочей красотой - wifi.osmino.com. В качестве бонуса - опыт работы с новыми библиотеками, в качестве минуса - очень много сил ушло на разработку этого проекта, после работы не было желания что-либо делать, а особенно на JavaScript, поэтому Sparkling Tail остался в том же состоянии, что и был.

Marker With Label

Эта штука позволяет делать надписи на маркерах для google maps, очень пригодилась, потому что нужно было обозначать на скоплениях сетей примерное количество wifi-сетей в группе. Сайт проекта.

waiteForImages

Когда DOM-дерево формируется динамически javascript'ом, а среди вставленных элементов есть картинки, то лучше не показывать их пока они не загрузились. Эта библиотека помогает это сделать, без необходимости самому создавать эти обработчики на каждый img. Сайт проекта.

SimpleBox

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

UglifyJs

Эту штуку использовал для сжатия исходников (и буду использовать для сжатия исходников своих игр). Однако для того, чтобы применить её пришлось узнать немного про nodejs.

Для начала нужно было установить последнюю версию nodejs, нашёл в сети кусок скрипта, который растащили по сети все кому не лень, утащу и я:

sudo apt-get update
sudo apt-get install -y python-software-properties python g++ make
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

Потом установил UglifyJs, и запустил сжатие:

uglifyjs -o dest_filename src_filename

Старт разработки игры про Sparkling Tail

2014-07-29 23:10
Новый Sparkling tail

Это пост-отметка, о том, что я начал разработку новой игры.

Главный персонаж - реинкарнировавшийся Sparkling Tail, только теперь он научился ходить, и ему больше не нужно прыгать словно гусеница, как раньше. Он будет жить в своём небольшом, но агрессивном мире. Почти всё, что есть в этом мире (надо бы этому миру название придумать), крайне вредно для Sparkling Tail'a, поэтому ему придётся избегать встречи с этими опасными штуками.

Разработка игры будет с использованием Phaser. Работать должна в десктопных браузерах и на андроидовском Chrome (это единственное мобильное железо, которое у меня есть, тестировать на IPhone и WinPhone не могу).

Быстрого релиза не будет, потому что делаю игру в свободное время, в основном по вечерам и на выходных. Однако посты с небольшими, но полезными мне сниппетами для Phaser, будут.