Сайт мини-игр

Учебный одностраничный проект, выполненный по готовому дизайн-макету. На сайте представлены шесть интерактивных мини-игр, игровая логика которых написана на JavaScript.

В ходе работы я практиковал семантическую HTML-разметку, построение интерфейса с помощью CSS Grid и Flexbox, адаптацию сайта для планшетов и мобильных устройств через медиазапросы и организацию стилей по методологии БЭМ. Реализованы карточки игр, hover-эффекты, плавные переходы, анимированная бегущая строка и плавная прокрутка между разделами.

Игровая логика написана на JavaScript. В проекте используются функции, массивы, циклы, условные конструкции, генерация случайных значений, обработчики событий и работа с DOM. Бегущая строка формируется динамически, а целевая секция прокрутки кнопки «Поехали!» меняется в зависимости от ширины экрана.

Игры

1. Угадай число — игрок угадывает случайное число от 1 до 100, получая подсказки.
2. Простая арифметика — генерация случайного примера с одной из четырёх арифметических операций.
3. Переверни текст — введённый пользователем текст выводится в обратном порядке.
4. Камень, ножницы, бумага — игра против компьютера со случайным выбором.
5. Простая викторина — несколько вопросов с подсчётом правильных ответов.
6. Генератор случайных цветов — изменение фона секции на случайный RGB-цвет.

Реализованные задачи

• семантическая HTML-разметка;
• адаптивная вёрстка для компьютеров, планшетов и мобильных устройств;
• построение интерфейса с помощью Flexbox и CSS Grid;
• организация стилей по методологии БЭМ;
• использование SCSS-переменных и вложенности;
• карточки игр, hover-эффекты и плавные CSS-переходы;
• бесконечная анимированная бегущая строка;
• динамическое создание элементов бегущей строки средствами JavaScript;
• плавная прокрутка к разделам страницы;
• изменение целевой секции прокрутки в зависимости от ширины экрана;
• генерация случайных чисел и цветов;
• обработка пользовательского ввода;
• обработчики событий и работа с DOM;
• использование функций, массивов, объектов, циклов и условных конструкций;
• работа с растровыми изображениями и SVG-графикой.

Технологии: HTML5, CSS3, SCSS, JavaScript, Flexbox, CSS Grid, БЭМ, DOM API, SVG, медиазапросы.

Результат можно увидеть по ссылке: https://steamybutton.github.io/mini-games-js/