presentation

1.

Игра «Угадай число»
Интерактивный проект на HTML, CSS и JavaScript
Студент:
[ФИО Студента], группа [Номер группы]
Тема работы:
Веб-игра «Угадай число» (диапазон 1–100)
Преподаватель: [ФИО Преподавателя]

2.

Цель и задачи работы
Цель работы:
Создать простую и полностью рабочую веб-игру на чистом JavaScript, закрепив базовые навыки работы
с элементами страницы, событиями, таймером и хранилищем браузера.
1. Простая разметка и стили
Создать лаконичный интерфейс в index.html
и понятные крупные стили в style.css.
2. Логика игры
Реализовать генерацию числа (1–100),
проверку ввода и подсказки «больше / меньше».
3. Таймер и рекорд
Добавить секундный таймер игры через setInterval
и сохранение лучшего счёта в localStorage.
4. История попыток
Динамически добавлять строки попыток в список
с помощью document.createElement.

3.

Актуальность проекта
Зачем нужен проект?
Где используется принцип?
Аналоги
• Это отличная учебная задача
для освоения основ JavaScript
без сложных библиотек.
• В интерактивных тренажёрах и тестах.
• Классическая словесная
игра «Угадай задуманное число».
• Наглядный пример полного цикла
программы: ввод данных,
проверка, расчёт, вывод ответа.
• Помогает понять, как страница
общается с пользователем
через события.
• В простых логических мини-играх.
• В формах обратной связи
с проверкой ввода на сайтах.
• Логическая игра «Быки и
коровы».
• Учебные алгоритмы бинарного
поиска.

4.

Используемые технологии
HTML5
CSS3
Чёткая и компактная структура страницы
Простые крупные шрифты (Arial 18–20px)
Поле ввода <input> для чисел
Удобные и большие кнопки
Кнопки управления <button>
Простая раскладка без лишних украшений
Блоки вывода времени, попыток и истории
Цвета статусов: победа (зелёный), ошибка (красный)
JavaScript
JavaScript
document.getElementById — связь с элементами
Math.random — случайное число от 1 до 100
addEventListener — реакция на клики и клавишу Enter
setInterval / clearInterval — секундомер игры
document.createElement — добавление строк истории
localStorage — сохранение лучшего счёта
classList — переключение стилей сообщений
Регулярное выражение RegExp — проверка ввода

5.

Структура проекта
index.html
style.css
script.js
• Всего 35 строк понятного кода.
• Всего около 60 строк простого CSS.
• Всего около 85 строк чистого кода.
• Содержит заголовок, поле ввода и кнопки.
• Увеличенный размер шрифтов и кнопок.
• Содержит 2 основные функции: start() и check().
• Имеет блоки для таймера, попыток и рекорда.
• Удобная мобильная адаптивность.
• Управляет таймером, проверкой и рекордом.
• Подключает файлы style.css и script.js.
• Классы .err и .win для подсказок.
• Код прямой, читаемый, без переусложнения.

6.

Ключевой функционал игры
1. Загадывание числа
Компьютер выбирает число от 1 до 100 с помощью формулы Math.floor(Math.random() * 100) + 1.
2. Подсказки игроку
При каждом ходе игра мгновенно сообщает: «Загаданное число БОЛЬШЕ» или «Загаданное число МЕНЬШЕ».
3. Секундомер игры
Таймер запускается автоматически и считает время в формате Минуты:Секунды (setInterval).
4. История попыток
Все прошлые ходы выводятся на страницу с помощью document.createElement('p').
5. Сохранение рекорда
Лучший результат (наименьшее число попыток) сохраняется в памяти браузера (localStorage).

7.

Демонстрация ключевого кода
1. Проверка ввода и условия
2. История и LocalStorage
function check() {
let val = input.value.trim();
if (!/^(?:[1-9][0-9]?|100)$/.test(val)) {
msg.innerText = 'Ошибка: от 1 до 100!';
msg.classList.add('err');
return;
}
let num = parseInt(val, 10);
count++;
countEl.innerText = count;
// Сохранение рекорда при победе
let best = localStorage.getItem('record');
if (!best || count < parseInt(best, 10)) {
localStorage.setItem('record', count);
recordEl.innerText = count;
}
if (num === target) {
msg.innerText = 'Победа!';
} else if (num < target) {
msg.innerText = 'БОЛЬШЕ, чем ' + num;
} else {
msg.innerText = 'МЕНЬШЕ, чем ' + num;
}
}
// Динамический вывод истории ходов
history.push({ count: count, val: num, text: text });
hist.innerHTML = '';
for (let i = history.length - 1; i >= 0; i--) {
let p = document.createElement('p');
p.innerText = 'Попытка ' + history[i].count +
': ' + history[i].val;
hist.appendChild(p);
}

8.

Что можно добавить в будущем
Уровни сложности
Ограничение попыток
Кнопки выбора диапазона: 1–50 (легко), 1–100 (нормально),
1–1000 (сложно).
Режим с ограниченным числом жизней
(например, угадать за 7 попыток).
Звуки и эффекты
Имена игроков
Простые звуковые сигналы при клике, подсказке и победе.
Возможность ввести имя и сохранять таблицу
из нескольких лучших результатов.

9.

Итоги работы
Выполнение требований:
Результат и самооценка:
Три отдельных файла (HTML, CSS, JS)
Проект полностью рабочий, без ошибок в консоли.
Создание элементов через createElement
Интерфейс сделан максимально простым, чистым и удобным.
Обработка событий click
Массивы и объекты
Условия и циклы (if/else, for)
Код короткий, понятный и легко объясняется на защите.
Все цели задания достигнуты.
Управление классами (classList)
Таймер через setInterval
Хранение рекорда в localStorage
Проверка ввода через RegExp
Оценка работы: Отлично (10/10)

10.

Спасибо за внимание!