Javascript — кликер по файлам cookie
Источник задания : https://github.com/becodeorg/BXL-Swartz-5.34/blob/main/1.The-Field/12.Javascript/cookieClicker.md.
Ссылка на живую версию : https://teo-cozma.github.io/Javascript/
Члены команды
- Бригита Сабутите (Javascript и HTML)
- Дэвид Тирел (Javascript)
- Теодора Козма (HTML и CSS)
Языки
Инструменты
- Visual Studio Code (текстовый редактор)
- Discord, Google Meet, Github, Replit (общение)
- Adobe XD (прототипирование)
- Служба проверки разметки W3C (проверка HTML)
- Служба проверки CSS W3C (проверка CSS)
- Google Lighthouse (проверка производительности)
Изображение
Ресурсы
Что такое Cookie-кликер?
- http://orteil.dashnet.org/cookieclicker/
- https://en.wikipedia.org/wiki/Cookie_Clicker
- https://cookie-clicker2.com/
- https://particle-clicker.web.cern.ch/
- https://www.youtube.com/watch?v=2Dx76lD8Scc&t=69s
Учебники для нашего проекта:
https://www.flaticon.com/free-icons/cookie
https://www.youtube.com/watch?v=uUgOBe_wb6E
https://www.youtube.com/watch?v=j_nI6G3ZDiE
https://codesource.io/how-to-disable-button-in-javascript/
https://stackoverflow.com/questions/57477529/disable-a-button-if-empty-input
https://www.youtube.com/watch?v=PSEhNb69XpI
https://www.youtube.com/watch?v=vU2akkcSV-g
https://www.youtube.com/watch?v=PSEhNb69XpI
https://www.youtube.com/watch?v=KgYkgBno5Gs
https://stackoverflow.com/questions/8583524/how-to-set-time-limit
Услуги по проверке:
- https://validator.w3.org/#validate_by_input
- http://jigsaw.w3.org/css-validator/
Журнал проекта
День первый (25/10)
Обзор инструкций
- Что: Cookie Clicker.
- Почему: проект консолидации (в основном навыков Javascript).
- Когда: С сегодняшнего дня 4 полных дня командной работы до 28.10.
- Как: в группах по три человека, сотрудничая и используя соответствующие языки программирования.
- Кто: Теодора Козма, Бригита Сабутите, Дэвид Тирел.
- Какие роли? Есть интерфейс, серверная часть и управление проектами. Все роли могут быть взаимозаменяемыми, и код в любом случае будет общим, но в целом один человек может больше сосредоточиться на конкретной роли.
- Бэкэнд (Javascript): Дэвид.
- Бэкенд (Javascript) + Фронтенд (структура HTML): Бригита.
- Фронтенд (CSS + возможно Sass) + Менеджер проекта: Теодора.
Мозговой штурм
3 раздела:
Раздел файлов cookie: заголовок 1 для счетчика файлов cookie. H1 для количества кликов.
- Интерактивный файл cookie + его заголовок + счетчик файлов cookie = 1-й раздел.
- «В HTML поместите кнопку щелчка, которая будет увеличивать счетчик, и метку, инициализированную значением 0, для отображения указанного счетчика».
Раздел очков:
- Раздел очков: подсчет очков.
- 1 файл cookie: файл cookie представляет собой отдельную кнопку.
(Печенье + оценка = левая половина)
- Раздел магазина:
- Достижения и улучшения?
- Раздел магазина = кликер кнопки обновления + счетчик очков = 2-й раздел:
Установите множитель (двойные или тройные баллы) --> этот шаг для проверки.
Цена мультипликатора (при покупке)
Обновление очков
Счетчик внутри множителя
Увеличение стоимости (стоимость более высокого мультипликатора)
- Также выделенный дисплей (кнопка внизу?)
Шаг 12: необходимый элемент, некоторые кнопки деактивированы. пример: менее 20 очков игрок не может получить доступ к определенным функциям.
(Правая половина)
Пример (ссылка): http://orteil.dashnet.org/cookieclicker/.
Задачи на сегодня
Сегодня утром (10:30 - 12:30)
- Исследование по проекту (инструкция по заданию).
- Посмотрите, что соответствует текущим обязательным шагам (бонусы пока отложены).
- Подробный анализ кода оригинального кликера cookie.
(https://www.youtube.com/watch?v=2Dx76lD8Scc&t=69s) Описание игры (и ее экзистенциальных качеств!)
- 1 клик = 1 файл cookie.
- 15 кликов = 15 куков = 1 курсор (купленный).
- 10 курсоров = 1 файл cookie в секунду (CpS).
- 100 печенек = бабушка, которая производит и продает ваше печенье.
- Файлы cookie — это валюта, которая позволяет вам покупать фермы, шахты, фабрики и т. д. = экономика файлов cookie является всепроникающей и подавляющей. Это в конечном итоге превращается в cookieverse.
- Превосходство существования = Вознеситесь и начните заново.
- Золотое печенье появляется случайным образом.
- Ждите бабушки: потенциальный бунт и апокалипсис. Спасите всех, получив экономическую выгоду, или используйте их, чтобы заработать больше богатства.
- Небольшой «взлом кода» в консоли: Game.Earn(x).
(http://orteil.dashnet.org/cookieclicker/)
Информационный журнал/История версий
- Безопасное сохранение
- Стиль отображения курсора
- Функция импорта/экспорта: получение сохраненной игры из старой версии (отключается через неделю).
- Кнопка продажи
- Случайное золотое печенье (как определить его частоту)
- Статистика кликов
- Нажатие повышает
- Бабушкиное недовольство и апокалипсис --> появились существа, потребляющие печенье
- Раздел меню статистики для обновлений и достижений.
- Достижения молочного вкуса -_-
- Меню опций:
- Общие: сохранение + автосохранение, экспорт/импорт, сохранение стирания;
- Настройки: громкость, красивая графика, звуки... это все бонусы.
За кодом (исследуется вместе с инспектором)
- HTML-структура (то, что мы могли бы сохранить для внешнего вида):
- Заголовок: все ссылки на стили и скрипты (Заголовок мигает...)
- Тело :
- Без баннерной упаковки
- Верхняя панель: авторские права и ссылка на социальные сети (как нижний колонтитул, но вверху страницы). В этом году нам обязательно нужно будет включить информацию об авторских правах в наши имена и ссылки на наши целевые страницы (?).
- Div id:"game": фактический раздел игры.
- Разделы находятся под тегом «section» и имеют свои названия в зависимости от их положения (слева, справа, посередине) + разделители.
- Якоря: это отдельный тип класса? Посмотрите это.
- Якорь cookie = кликабельный cookie !!!
- Добавим ли мы вымышленное название ресторана?
- Счетчик файлов cookie: x файлов cookie; в секунду: с.
- Создадим ли мы меню с опциями, статистикой, информацией...?
- Кроме того, подраздел для каждого пункта меню?
- (Техническая проблема: страница постоянно обновляется для обновления данных, поэтому трудно оставаться в одном разделе, чтобы просмотреть код, прежде чем он начнет мигать)
- Тег «b»: для чего он нужен?
- Некоторые элементы div скрыты?
- Раздел магазина:
- Купить/Продать: они должны быть связаны с событиями Javascript, поскольку их значения будут меняться при каждом щелчке мыши.
- Товары (мины, бабушки): при первом запуске игры они должны быть скрыты. (Еще одна интересная ссылка: https://particle-clicker.web.cern.ch/)
Сегодня днем (13:30 - 17:00)
- Сбор идей, исследований и объединение ресурсов.
- Какие технические трудности/проблемы могут возникнуть впереди?
- Как работает множитель?
- Отобразить расположение разделов и их кнопок (хотя это не особо хлопотно).
- Понимание того, как применять Javascript.
- Соберите ресурсы и информацию о том, как написать код для каждой кнопки.
Какова наша методология групповой работы?
Как работает каждый из нас?
- Один
- Исследования сосредоточены
- Программирование ориентировано
- Проводим ли мы «сеансы кодирования в реальном времени», когда мы делимся своим экраном и печатаем код, и каждый из них тут же вносит свой вклад?
Как мы можем заставить этот срок работать на нас?
Как мы разделим работу по кодированию? Как определить следующие задачи и делегировать их? Если каждый из нас работает в свое время, как нам согласовать и закрепить окончательный код?
Решение о том, как общаться и делиться информацией:
- В Discord, комната 4 (чат+звонок).
- ... (другие инструменты для совместной работы).
- Определенно Github, репозитории будут общими.
Принятие решения о дальнейших действиях:
- Закончить исследование сегодня?
- Начать планировать (+ писать?) структуру HTML? Структура Javascript?
- Следуем ли мы каждому шагу в точности?
- Решено, по крайней мере, обязательные шаги (все входы и кнопки, имеющие наиболее важные функции) будут включены, а бонусы пока отложены (но могут быть включены, если это возможно).
- Эти шаги следует выполнять один за другим или несколько одновременно?
- Это важный вопрос, который следует поднять, поскольку роли разделены: 2 человека работают на бэкэнде, 2 человека на фронтенде.
- Следовательно, в Javascript будут ли эти шаги распределены?
- Когда дело доходит до создания проекта, сколько мы берем от оригинала и сколько делаем самостоятельно?
Ежедневный метод работы:
- Каждый из нас вначале работает самостоятельно, а в конце дня делится своим кодом через Discord, а затем «фиксирует» все на Replit.
Думаем наперёд – оценочная часть
- Регулярно оценивайте прогресс и проверяйте наличие необходимых функций.
- Регулярно обновляйте ReadMe.
- Ближе к концу (в последний день или даже во время процесса кодирования) используйте инструменты проверки и производительности (см. Lighthouse и инструмент проверки W3C); возможно, в четверг.
Шаги сегодняшнего дня (14:30 - 16:30)
- Дополнительные исследования и определение задач на завтра:
- Бригита: исследование и написание HTML.
- Дэвид: Исследование Javascript.
- Теодора: визуальные исследования и прототипирование.
День второй (26/10)
Утренняя встреча в 9:00:
- Шаг 5 завершен.
- Делимся кодом.
- Технические проблемы: соединение HTML с Javascript, обеспечение правильной работы функций.
- Также бонусы предназначены для игроков, поэтому шаг 11 и далее являются обязательными.
- Автокликер делает Дэвид.
- Множитель сделан Бригитой; также ожидается.
- Решение проблем в скриптах.
Сегодня утром (9:30 - 12:30)
Продолжайте назначенные шаги. Рассматривайте любые проблемы. Встреча в 13.30 для обсуждения прогресса и решения любых вопросов.
Сегодня днем (13:30 - 16:30) Тео: сделайте сайт адаптивным. Примечание. Кнопки множителя также должны включать стоимость! + найти скрипт, который отключит определенные кнопки в зависимости от количества файлов cookie. Дэвид: общие функции; Функция загрузки решена. Бригита: общий код и функции; проблемы с синтаксисом решены.
Скрам-встреча (16:30 - 17:00)
День третий (27/10)
Утренняя встреча (9:00)
Вечерняя встреча (16:45 - 17:00)
День четвертый (28/10)
Утренняя встреча (9:00 – 9:30)
Что необходимо сделать сегодня:
Дневная работа (13:30 – 16:00)
Результаты =
- Производительность = 91;
- Доступность = 95;
- Лучшие практики = 100;
- SEO = 92;
Постпроектный отчет (16:20 - 17:00 и завтра 29.10):
- Остаются технические вопросы: множитель. Завтра будет рассмотрено снова.
(29/10)
