Делаем с Claude

03 Игры в браузере

Результат: у каждого играбельная игра в браузере, в которую хочется сыграть ещё раз.

Главное открытие: игра состоит из правил, и правила можно записать до кода.

  1. 10минДемоАркада: поймай звезду
  2. 10минПриёмыТехзадание игры, баг-репорт
  3. 30минМладшийАркада с уровнями
  4. 30минСтаршаяКвест или головоломка
  5. 10минРелизИгры на телефонах

Демо: аркада за 5 минут

Взрослый вводит один запрос, дети играют по очереди.

Демо: поймай звезду
Сделай аркаду «Поймай звезду» для браузера.
Сверху падают звёзды и камни, внизу корзина.
Управление: стрелки на компьютере, палец на телефоне.
Звезда даёт 1 очко, камень отнимает одну из трёх жизней.
Конец игры: экран со счётом и кнопкой «Ещё раз».
Яркий ночной дизайн.

Каждый играет по разу. Спросить: «Что бесит, а чего хочется ещё?» Одну правку ввести дословно.

Приёмы занятия

1. Техзадание игры

Игра ломается там, где правила не договорены. Поэтому сначала техзадание из шести пунктов и план, код потом.

Техзадание игры
Вот техзадание игры. Сначала напиши план простыми словами, код пока не пиши.
Идея в одной фразе: [идея]
Управление: [клавиши на компьютере] и палец на телефоне
Очки: [за что даются очки]
Конец игры: [когда проигрываешь или выигрываешь]
Внешний вид: [стиль и цвета]
Готово, когда: [что должно работать]

Claude отвечает планом. Читаем вслух, правим пункт, который понят не так, и только потом пишем: «План хороший, делай».

2. Баг-репорт

Сказать «не работает» мало. Хороший баг-репорт отвечает на три вопроса. Это детская версия приёма «Формулировка проблемы».

Баг-репорт
Помоги чётко описать баг.
Что происходит;
Что должно происходить;
Как повторить по шагам.
Баг: [опиши своими словами]

Пример готового баг-репорта. Что происходит: корзина застревает у правого края. Что должно: доезжать до края и останавливаться. Как повторить: зажать стрелку вправо на 3 секунды.

Младший: аркада с уровнями

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

Сборка младшего
Сделай аркаду для браузера по моему техзаданию.
Идея: [идея в одной фразе]
Управление: стрелки или пробел на компьютере, касание и свайп на телефоне.
Уровни: каждые 10 очков игра ускоряется, на экране надпись «Уровень 2», «Уровень 3».
Бонус: редкий предмет [какой предмет], который даёт [что даёт] на 5 секунд.
Рекорд сохраняется между играми и показывается на стартовом экране.
Графика нарисована кодом, без картинок из интернета.
Короткие звуки и кнопка «Без звука».

Дальше 3-5 кругов правок, каждый баг через баг-репорт. Идеи, если застрянет:

  • босс на пятом уровне;
  • тряска экрана при ударе;
  • таблица трёх лучших результатов;
  • режим на двоих за одной клавиатурой.

Старшая: квест или головоломка

Сначала выбирает жанр приёмом «Быстрое решение».

Быстрое решение: выбор жанра
Мне нужно выбрать один вариант.
Кратко напиши плюсы и минусы.
Потом скажи, что выбрать и почему.
Варианты: текстовый квест с выборами, игра «Найди пару», логическая головоломка. Критерий: [что важнее для меня].

Вариант А: квест

Сборка старшей: квест
Сделай текстовый квест в браузере на 10-15 сцен.
Сюжет: [о чём история и кто герой].
В каждой сцене короткий текст и 2-3 варианта выбора. Минимум 3 разные концовки.
Инвентарь: герой находит предметы, и они открывают новые выборы.
Кнопка «Начать заново». Прогресс сохраняется, если закрыть вкладку.
Атмосферный дизайн: [настроение], текст появляется плавно.

Вариант Б: головоломка

Сборка старшей: найди пару
Сделай игру «Найди пару» в браузере на тему [тема].
Карточки переворачиваются по касанию. Три уровня: поле 4 на 4, 5 на 4 и 6 на 6.
Счётчик ходов и таймер. Лучший результат на каждом уровне сохраняется.
Анимация переворота и маленький праздник при победе.

Заглянуть в код

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

Где в коде сложность
Покажи в коде игры строку, где задаётся сложность: скорость, время или число карточек.
Объясни простыми словами, что значит это число.
Скажи, что изменится, если я поставлю его в два раза больше.

Как поменять руками: скопировать код артефакта в файл game.html, открыть его в текстовом редакторе, поменять число, сохранить и открыть файл в браузере. Это мостик к занятию 4: там Claude сам работает с файлами.

Релиз

Опубликовать обе игры и открыть на телефонах. Проверяем: управление пальцем работает, кнопки не мелкие, игра не тормозит, рекорд остаётся после перезагрузки.

Готово, когда

Человек, который видит игру впервые, понимает правила без объяснений.