D-Lab — бонусный мини-проект

Задача

Создайте небольшой интерактивный проект

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

Обязательное условие: проект должен использовать HTML, CSS, JavaScript и элемент <canvas>, а также содержать не менее двух интерактивных возможностей.

Варианты

Выберите проект или предложите собственный

Управляемый персонаж

Перемещайте объект по Canvas в четырёх направлениях и возвращайте его в исходную точку.

Мини-лабиринт

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

Космический полёт

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

Графический конструктор

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

Виртуальный аквариум

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

Собственная идея

Предложите проект сопоставимой сложности и кратко согласуйте его замысел с учителем.

Требования

Что должно быть в готовой работе

заголовок и краткое описание проекта;
оформление страницы с помощью CSS;
не менее двух графических объектов на Canvas;
не менее двух элементов управления или других интерактивных возможностей;
проверка, не позволяющая управляемому объекту выйти за границы Canvas;
понятная структура кода, которую автор может объяснить.

ИИ как помощник

Допустимые способы использования искусственного интеллекта

ИИ может помогать на отдельных этапах работы. Его ответ необходимо проверить, понять и приспособить к собственному проекту.

Поиск идеи

Попросите предложить несколько проектов с учётом уже изученных средств, затем самостоятельно выберите и уточните замысел.

Предложи пять простых мини-проектов на Canvas, в которых используются кнопки и перемещение объектов. Проект должен быть выполним за 20 минут.

Планирование структуры

Попросите разделить работу на этапы и определить назначение HTML, CSS и JavaScript, не создавая готовую программу.

Составь план проекта «Космический полёт». Укажи, какие элементы должны находиться в HTML, что оформить с помощью CSS и какие действия реализовать на JavaScript. Не пиши готовый код.

Объяснение непонятного кода

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

Объясни простыми словами, как изменение координат x и y перемещает объект на Canvas. Приведи короткий пример.

Получение отдельной подсказки

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

Покажи короткий пример проверки, которая не позволяет прямоугольнику выйти за правую границу Canvas. Не создавай весь проект.

Поиск ошибки

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

После нажатия кнопки объект перемещается, но старое изображение остаётся на Canvas. Найди причину ошибки и объясни, что необходимо изменить.

Проверка и улучшение

Попросите составить перечень проверок или предложить одно небольшое улучшение уже работающего проекта.

Составь список из пяти проверок для проекта с управляемым персонажем на Canvas.

ИИ помогает придумать, спланировать, понять и проверить проект. Итоговую программу необходимо собрать, испытать и объяснить самостоятельно.

Представление результата

Подготовьте краткое объяснение

Какую задачу решает проект?
Какие части проекта вы создали самостоятельно?
Для чего использовался ИИ и какие его предложения вы изменили?