HTML5 Криптограмма

Локально запускаемая HTML5-копия игры в жанре криптограммы, созданная по визуальному и механическому референсу.

Демо: https://TokGrin.github.io/CryptogramGame/ Референс: https://games.xpeh.net/cryptogram/

О проекте

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

Цель проекта — воспроизвести основной игровой цикл оригинала и создать цельный, понятный и стабильный интерфейс с использованием HTML5, CSS3 и JavaScript.

Возможности

• 3 игровых уровня
• Расшифровка слов и фразы
• Экранная клавиатура
• Система ошибок
• Система подсказок
• Окна победы и поражения
• Финальное состояние после прохождения всех уровней
• Последовательная разблокировка уровней
• Сохранение прогресса через localStorage
• Возможность начать новый игровой цикл
• Адаптивный интерфейс
• Анимации правильных и неправильных ответов

Игровой процесс

Игровой цикл построен следующим образом:

1. Игрок открывает игру и знакомится с правилами.
2. Выбирает незаполненную ячейку.
3. Выбирает необходимую букву на экранной клавиатуре.
4. Игра проверяет ответ.
5. При правильном ответе буква появляется в ячейке и автоматически выбирается следующая.
6. При ошибке ячейка и клавиша получают визуальную обратную связь.
7. После заполнения всех ячеек появляется окно победы.
8. После трёх ошибок появляется окно поражения.

Уровни

Уровень	Тип	Задание	Стартовые буквы
1	Зашифрованное слово	ПЕСЕЦ	П, С
2	Зашифрованное слово	ПРОГРАММИСТ	П, О, А, И
3	Зашифрованная фраза	МОЖНО ГРАБИТЬ КОРОВАНЫ	Е, И, О, А, М, Г, К

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

Система подсказок

В игре используется счётчик подсказок с иконкой лампочки.

• На старте игрок получает 3 подсказки.
• За первое прохождение каждого уровня начисляется +2 подсказки.
• Награда добавляется к текущему количеству подсказок.
• Повторное прохождение уровня не выдаёт дополнительную награду.
• Количество подсказок и прогресс сохраняются через localStorage.
• Для защиты от конфликтов со старыми сохранениями используются версии ключей прогресса.

Пример

3 подсказки
↓
использована 1
↓
осталось 2
↓
уровень пройден
↓
+2
↓
итого 4

Состояния игры

Победа

После правильного заполнения всех ячеек появляется окно:

• «Уровень пройден!»
• правильный ответ
• награда +2
• кнопки перехода дальше или открытия списка уровней

Поражение

После трёх ошибок появляется окно с:

• сообщением об ошибке;
• правильным ответом;
• возможностью продолжить/повторить игру;
• переходом к списку уровней.

Полное прохождение

После завершения третьего уровня появляется:

«Все уровни пройдены! Поздравляем!»

UX/UI

Интерфейс построен вокруг максимально быстрой визуальной обратной связи.

Правильный ответ

• буква появляется в ячейке;
• используется короткая анимация;
• автоматически выбирается следующая незаполненная ячейка.

Неправильный ответ

• ячейка подсвечивается красным;
• клавиша подсвечивается красным;
• применяется короткая анимация тряски;
• после ошибки ячейка возвращается в обычное состояние.

Технологии

Технология	Назначение
HTML5	Структура игры, экранов и модальных окон
CSS3	Визуальный стиль, адаптивность, анимации
JavaScript	Игровая логика и управление состояниями
localStorage	Сохранение прогресса и подсказок

Проект не требует backend и может запускаться локально.

AI-assisted development

AI использовался не только для первоначальной генерации кода, но и как инструмент итерационной разработки.

Рабочий процесс:

Реализация
    ↓
Запуск и проверка
    ↓
Поиск проблемы
    ↓
Точечное исправление
    ↓
Повторная проверка

AI применялся для:

• генерации базовой HTML/CSS/JS структуры;
• разработки игровой механики;
• доработки интерфейса;
• поиска логических ошибок;
• проверки системы подсказок;
• отладки localStorage;
• проверки переходов между уровнями;
• обработки edge cases;
• настройки размеров, отступов, шрифтов и модальных окон;
• поиска регрессий после изменений.

Тестирование

Проверялись следующие части проекта:

• игровой цикл;
• выбор ячейки и буквы;
• правильные и неправильные ответы;
• расход и получение подсказок;
• сохранение прогресса;
• разблокировка уровней 1 → 2 → 3;
• победа и поражение;
• завершение всех уровней;
• навигация по меню;
• сброс прогресса;
• визуальное центрирование;
• размеры кнопок и отступы;
• отсутствие регрессий после изменений.

Запуск

Проект не требует установки зависимостей или backend.

Локальный запуск

Скачайте репозиторий и откройте HTML-файл игры в браузере.

git clone https://github.com/TokGrin/CryptogramGame.git
cd CryptogramGame

После этого откройте основной HTML-файл в браузере.

Также проект доступен онлайн:

https://TokGrin.github.io/CryptogramGame/

Структура проекта

CryptogramGame/
├── index.html
├── style.css
├── script.js
└── README.md

Названия файлов могут отличаться в зависимости от текущей структуры репозитория.

Что реализовано

• HTML5-игра
• 3 уровня
• Игровая механика криптограммы
• Экранная клавиатура
• Система ошибок
• Система подсказок
• Последовательная разблокировка уровней
• Сохранение прогресса
• Окно победы
• Окно поражения
• Финальное окно
• Анимации
• Адаптивный интерфейс
• Локальный запуск без backend
• AI-assisted разработка и тестирование

Итог

В результате создана самостоятельная HTML5-копия криптограммы на 3 уровня, ориентированная на локальный запуск и демонстрацию качества реализации.

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