Flexbox Froggy — игра для изучения CSS Flexbox
24 уровня с лягушками и лилиями для практики CSS Flexbox. Редактор кода и русский интерфейс; исходники для собственного запуска с лицензиями и памяткой.
Flexbox Froggy — браузерная учебная игра Thomas Park и участников проекта. Напишите CSS, чтобы расположить лягушек на нужных лилиях. 24 задания постепенно знакомят с выравниванием, направлением и размещением элементов Flexbox; русский перевод включён.
В бесплатном архиве — исходные HTML, CSS, JavaScript, изображения и переводы, оригинальный README и лицензия, зафиксированные npm-манифесты, русская памятка и контрольные суммы. Снимок репозитория: 9a6feab850a56cbe9ad90f3afcc95e88335bbec8. Папка node_modules не включена: зависимости восстанавливаются через npm ci --ignore-scripts. Это исходники, а не собранный автономный дистрибутив.
Для установки нужны Node.js/npm и интернет; серверная часть и AI-модель не требуются. Исходная страница использует Google Fonts, Analytics и рекламный скрипт Google, поэтому полная работа без сети не заявляется. Официальный сайт доступен для знакомства до скачивания. Просмотрены уровни 1 и 12 сайта; локальная установка снимка и прохождение всех уровней не проверялись.
Автор: Thomas Park, переводчики указаны в оригинальном README; русский перевод — Artyom Vozhzhov. Код распространяется по MIT, изображения — CC BY 3.0. Полные лицензии и атрибуция включены. Коммерческое использование и изменение допустимы при соблюдении этих лицензий. Размещающий профиль не является разработчиком или представителем Codepip.
Официальный сайт: https://flexboxfroggy.com/
Исходный репозиторий: https://github.com/thomaspark/flexboxfroggy
flexboxfroggy/ — исходники, изображения, переводы и npm-манифесты
README-RU.md — установка и ограничения
ATTRIBUTION.md — авторство и состав изменений
CC-BY-3.0.txt — полная лицензия изображений
SOURCE.json — источник, revision и SHA-256
JavaScript
Распакуйте ZIP. В папке flexboxfroggy восстановите зависимости командой npm ci --ignore-scripts, затем откройте index.html в современном браузере или разместите папку на статическом веб-сервере. Для первой установки нужен интернет и Node.js/npm. Полные шаги, внешние интеграции и ограничения — в README-RU.md. Можно сначала попробовать официальный сайт.
Код — MIT License, Copyright (c) 2015 Thomas Park. Изображения — CC BY 3.0, Thomas Park / Flexbox Froggy. Сохраняйте авторство, уведомления и полные лицензии; при изменении изображений обозначайте изменения. Разрешены личное и коммерческое использование, изменение и распространение по условиям соответствующих лицензий. Эксклюзивные права не передаются; полные тексты и attribution включены в архив.