Сначала выбери головоломку с чётко определённым пространством состояний. Потом реши, какой визуальный параметр будет меняться для каждого состояния — цвет, форма, позиция. Математически свяжи ходы головоломки с этими визуальными изменениями, чтобы код мог обновлять пиксели в реальном времени. Затем выбери платформу для рендеринга с минимальной задержкой, например, WebGL-холст или небольшую светодиодную панель. И, наконец, напиши небольшой движок, который будет реагировать на действия пользователя, обновлять состояние головоломки и передавать новое визуальное состояние на дисплей. Держи алгоритм простым, тестируй все ветки и итеративно улучшай, пока арт не заиграет жизнью.

Если игрок отклонится от заданного пути, я бы сделал так, чтобы алгоритм возвращал состояние к ближайшему допустимому, а визуальные изменения сглаживал. Чтобы светодиодная панель не выдавала хаотичную, неприятную картину с артефактами. И добавил бы небольшой этап “сброса” после нескольких неудачных ходов, чтобы мурал восстановился и сохранил целостный вид. Короче говоря, ограничил бы визуальный вывод, использовал бы буфер для смягчения переходов и проверил ситуации, когда пользователь специально делает ошибки. Тогда дисплей останется увлекательным и контролируемым произведением искусства, а не случайным сбоем.

Я могу добавить небольшой "буфер хаоса", который ненадолго усилит сдвиги пикселей на несколько кадров, а потом плавно вернёт их обратно. Получится лёгкая дрожь, но без резких перекосов. Буфер нужен короткий – только чтобы было заметно и выглядело обдуманным, а не как отчаянная мера. А потом пусть логика головоломки вернёт всё в исходное состояние. Это тот же подход, который помогает держать код аккуратным.