В данной интерактивной игре пользователи за ограниченное время могут проверить свои знания и выйграть главный приз, отвечая на вопросы есть ли данный товар в магазине. За каждый правильный ответ пользователь накапливает баллы, соревнуется с другими участниками и бонусом получает промокод.
bandicam.2025-01-21.17-02-02-023.mp4
- Начало игры: Пользователь может начать игру, нажав кнопку "Начать игру". Это перенаправляет его на игровую страницу, где начинается отсчет времени.
- Таймер: В игре установлен таймер на 60 секунд. Таймер отображает оставшееся время в формате MM:SS. Если время истекает, игра автоматически завершается.
- Карты: Карты перемешиваются и подгружаются на игровое поле. Пользователь взаимодействует с ними по клику на кнопки "Да" - "Нет", по клику на мышь, либо по касанию на экран. .
- Система баллов: Пользователь зарабатывает баллы за правильные ответы. Баллы отображаются на экране, пользователь может видеть текущий счет.
- Результаты и промокоды: После завершения игры пользователю показывается результат, включая заработанные очки и промокод.
- Переключение между окнами: Пользователь может переключаться между различными окнами приложения, такими как: стартовое окно, окно игры, результат, регистрация, турнирная таблица, найти свой результат, и qr приложения.
- Поделиться: Пользователь может поделиться ссылкой на игру, нажав на кнопки "Vk" - "Ok"
- Управление меню: Для удобной навигации пользователь может использовать меню.
- HTML
- СSS
- Less
- JS
В процессе разработки данной игры я закрепила следующие темы:
-
Условные операторы: Конструкции if, if...else, if...else if.
-
Циклы: Цикл for для повторяющихся операций.
-
Декрементирование и инкрементирование переменной: Операции увеличения и уменьшения значений переменных.
-
Математические операции: Math.floor() для округления чисел. Math.random() для возврата случайного числа.
-
Массивы и методы: Методы работы с массивами, такие как forEach() для перебора элементов, map() для трансформации массивов и join() для объединения элементов в строку.
-
Стрелочные функции: Синтаксис и область видимости.
-
Вызов других функций: Одна функция может вызывать другие функции.
-
Поиск элементов на тсранице Используя querySelector.
-
Обработка событий: Методом addEventListener(). Если несколько элементов, к которым нужно повесить событие, то используется метод forEach(), чтобы перебрать каждый элемент в коллекции и добавить к нему обработчик.
-
DOM-манипуляции: Свойства textContent - позволяет считывать или задавать текстовое содержимое элемента. innerHTML - позволяет задать или изменить HTML-содержимое элемента, а также метод remove() для удаления элементов из DOM.
-
Работа с классами CSS: Свойство classList с различными методами, которые позволяют динамически управлять классами элементов на странице. classList.toggle() - добавлять и убирать класс, classList.add() - добавлять класс и classList.remove() - удалять класс.
-
Динамическое присвоение стилей: Если нам необходимо добавить стили, которые не прописаны в css, можно это реализовать у элемента через style в js.
-
Перенаправление: Объект location хранящийся в window, который позволяет получать информацию о текущем адресе страницы и менять его.
-
Шаблонные строки: Шаблонные строки объявляются с помощью обратных кавычек `` и предоставляют возможность использовать строковую интерполяцию ${ }.
-
Форматирование строк: Метод padStart, который помогает форматировать строки до заданной длины.
-
Работа с таймером: Методы setInterval(), setTimeout() для выполнения кода через определенные интервалы времени, и clearInterval() - для отмены.
-
Доступ к свойствам объектов: Например, через точку.
-
Замыкание: Концепцию замыкания, которая позволяет функциям использовать переменные из внешнего контекста, например в функциях анимации.
-
Алгоритм Фишера-Йетса: Алгоритмом Фишера-Йетса для перемешивания элементов массива.
-
Анимацию: Через @keyframes.
- Склонируйте репозиторий на свой компьютер: git clone https://github.com/AntoninaPavlova/Game-Hello.git
- После загрузки разархивируйте
- Запустите файл index.html