Главная / Программирование и IT / Игра на запоминание карт

Игра на запоминание карт

Описание промпта

Создай браузерную игру на запоминание карт с использованием HTML5, CSS3 и JavaScript. Реализуй анимацию переворачивания карт, уровни сложности, таймер, счетчик ходов, звуковые эффекты, таблицу лидеров с сохранением результатов, выбор тем, мультиплеер, адаптивный дизайн и поддержку клавиатурной нави…

Что делает этот промпт

Генерирует полный исходный код браузерной игры Memory Game с анимациями, звуком, адаптивностью и доступностью.

Преимущества

Помогает изучить реализацию игровой логики, CSS-анимаций и работы с DOM. Готовый шаблон для портфолио или обучения.

Для кого подходит

Фронтенд-разработчики, студенты IT-специальностей, энтузиасты JavaScript.

Инструкция по использованию промпта

Скопируйте код в файл index.html и откройте в браузере. Для мультиплеера потребуется настройка WebSocket-сервера.

Что нужно предоставить

Браузер с поддержкой ES6+, CSS3 (transform, transition). Для мультиплеера требуется серверная часть (в промпте указано как опциональная/усложненная задача).

Что ожидать в результате

Рабочая игра с переворачивающимися картами, таймером, счетчиком, звуками и таблицей рекордов.

Рекомендации

Код самодостаточен. Для продакшена рекомендуется вынести CSS и JS в отдельные файлы и добавить серверную часть для мультиплеера.

Ограничения

В рамках одного файла мультиплеер может быть реализован только локально (hot-seat). Полноценный онлайн-мультиплеер требует бэкенда.

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

Текст промпта

ChatGPT / Claude / Llama Войти для копирования

Выступи в роли опытного фронтенд-разработчика и создай полноценную браузерную игру на запоминание карт (Memory Card Game). Используй HTML5, CSS3 и чистый JavaScript.

Твоя задача — реализовать следующие функции:

1. **Визуал и анимации**: Создай привлекательный дизайн карт с плавной 3D-анимацией переворачивания. Реализуй выбор тем (разные наборы изображений/стилей).

2. **Геймплей**:
- Реализуй уровни сложности с изменением размера сетки и количества пар карт.
- Добавь таймер обратного отсчета и счетчик ходов для оценки результата.
- Реализуй прогрессивное усложнение во время игры.
- Добавь звуковые эффекты для переворота карт и успешных совпадений.

3. **Технические требования**:
- **Адаптивность**: Layout должен корректно отображаться на любых экранах (desktop, tablet, mobile).
- **Доступность**: Обеспечь полную навигацию с клавиатуры (Tab, Enter, Space) и ARIA-атрибуты.
- **Мультиплеер**: Реализуй режим игры на двоих (локально или через простой WebSocket, если архитектура позволяет).
- **Лидерборд**: Сохраняй лучшие результаты в localStorage и отображай таблицу рекордов.

4. **Структура кода**:
- Раздели код на логические модули (логика игры, UI, управление состоянием).
- Используй современные ES6+ синтаксис и методы.
- Код должен быть готов к запуску в браузере без дополнительных сборщиков.

Напиши полный, рабочий код в одном HTML-файле (включая CSS и JS внутри тегов и ), чтобы его можно было сразу открыть в браузере.

Игра на запоминание карт

Поделитесь в социальных сетях

Комментарии