Планирование проекта

• Цель․ Предоставить пользователю интерактивный способ «погадать», т․е․ угадать задуманное число (или карту, знак зодиака и т․п․) за минимальное количество ходов․
• Требования к функционалу․
  1. Ввод/задание тайного значения (пользователь загадывает число от 1 до N)․
  2. Алгоритм угадывания (обычно бинарный поиск)․
  3. Интерфейс с кнопками «Больше», «Меньше», «Угадал!»․
  4. Отображение количества оставшихся попыток․
  5. Обработка ошибок (жульничество, выход за пределы диапазона)․
• Технические ограничения․ Всё должно работать в браузере без серверных запросов, чтобы упростить размещение (GitHub Pages, Netlify, любой обычный хостинг)․

Структура проекта

style․css ← стили (можно встроить в <style>)
script․js ← логика игры
README․md ← описание проекта (необязательно)

В дальнейшем, если захотите добавить более «магический» контент (текст предсказаний, генерацию карт Таро и т․д․), можно подключить серверный язык (PHP, Node․js) и базу данных, но для базовой версии это не требуется․

Ниже – минимальная разметка, покрывающая все необходимые элементы․ Обратите внимание, что мы используем только те теги, которые разрешены в условии (h1‑h4, p, ul, ol, li, b, pre, code)․

Стилизация (CSS)

Для простоты стили можно разместить в отдельном файле style․css или в блоке <style> внутри head․ Ниже пример базовых стилей, которые делают страницу приятной для глаз․

/* style․css */
body {
 text-align: center;
 background:#fafafa;
 color:#2c3e50;
}
button {
 font-size:16px;
 padding:10px 20px;
 margin:10px;
 cursor:pointer;
}
․hidden {display:none;}

Логика игры (JavaScript)

Самый важный кусок – алгоритм бинарного поиска․ Он гарантирует, что за ⌈log₂(N) попыток (для N=100 – 7) мы найдём загаданное число․

// script․js
// ---------- глобальные переменные ----------
let min = 1; // нижняя граница диапазона
let max = 100; // верхняя граница диапазона
let attempts = 0; // текущий номер попытки
const maxAttempts = 7;

// ---------- элементы DOM ----------
const intro = document․getElementById('intro');
const startBtn = document․getElementById('startBtn');
const question = document․getElementById('question');
const lessBtn = document․getElementById('lessBtn');
const equalBtn = document․getElementById('equalBtn');
const moreBtn = document․getElementById('moreBtn');

// ---------- вспомогательные функции ----------
function show(elem){ elem․classList․remove('hidden'); }
function hide(elem){ elem․classList․add('hidden'); }

function nextGuess{
 if (attempts >= maxAttempts){
 // Пользователь «жульничает» – попыток больше, чем должно быть hide(lessBtn); hide(equalBtn); hide(moreBtn);
 return;
 }
 attempts++;
 const middle = Math․floor((min + max) / 2); show(lessBtn); show(equalBtn); show(moreBtn);
}
// ---------- обработчики ----------
startBtn․addEventListener('click',  => {
 hide(intro); hide(startBtn);
 attempts = 0;
 min = 1; max = 100;
 nextGuess;
});

lessBtn․addEventListener('click',  => {
 // Загаданное число меньше текущего предположения
 max = Math․floor((min + max) / 2) ─ 1;
 if (max < min) { hide(lessBtn); hide(equalBtn); hide(moreBtn);
 return;
 } nextGuess;
});

moreBtn․addEventListener('click',  => {
 // Загаданное число больше текущего предположения
 min = Math․floor((min + max) / 2) + 1;
 if (min > max) { hide(lessBtn); hide(equalBtn); hide(moreBtn);
 return;
 }
 nextGuess;
});

equalBtn․addEventListener('click',  => {
 const guessed = Math;floor((min + max) / 2); hide(lessBtn); hide(equalBtn); hide(moreBtn);
});

Кратко о работе скрипта:

• При старте диапазон задаётся min=1, max=100․
• Функция nextGuess вычисляет среднее значение (middle) и выводит вопрос․
• Кнопки «Меньше», «Больше», «Угадал!» меняют границы диапазона и вызывают nextGuess снова․
• Если попыток становится больше maxAttempts, выводится сообщение о «жульничестве»․

Расширение проекта: от «числа» к «гаданию»

После того как базовый механизм готов, его легко адаптировать под любые «магические» задачи:

1. Таро‑гадание․ Вместо чисел храните массив из 78 названий карт․ При старте случайным образом выбирайте одну карту, а затем предлагайте пользователю «угадать» её, используя те же кнопки «Больше/Меньше» (по порядку колоды) или «Угадал!»․ Можно добавить изображения карт․
2. Знак зодиака․ Список из 12 знаков, каждый со своим диапазоном дат․ Пользователь вводит свою дату рождения, а скрипт «угадывает» знак, задавая вопросы о месяце/дне․

Важные нюансы и рекомендации

• Адаптивность․ Добавьте медиазапросы, чтобы кнопки удобно размещались на мобильных устройствах․
• Доступность․ Используйте атрибут aria-label для кнопок, чтобы скрин‑ридеры могли правильно их озвучить․
• Защита от «жульничества»․ Ограничьте количество попыток, проверяйте, чтобы границы min и max не пересекались, и выводите предупреждение, если пользователь вводит противоречивые ответы․
• Кеширование․ Если планируете хранить статистику (сколько попыток потребовалось в среднем), используйте localStorage или серверный API․
• SEO․ Добавьте мета‑теги description и keywords, чтобы поисковики понимали, что ваш сайт – «игра‑угадайка», «онлайн‑гадание»․

Деплой (размещение) сайта

1. Создайте репозиторий на GitHub․
2. Включите GitHub Pages (Settings → Pages → branch main)․
3. После нескольких минут ваш сайт будет доступен по адресу https://ваш_логин․github․io/имя_репозитория/․

Альтернативные варианты: Netlify, Vercel, любой обычный FTP‑хостинг․

Полный пример готового проекта

Что дальше?

После того как базовый «угадай‑число» готов, вы можете:

• Добавить анимацию (CSS‑переходы, небольшие эффекты появления)․
• Встроить базу предсказаний (JSON‑файл с 100 различными текстами, которые выводятся после угадывания)․
• Создать мульти‑язычную версию, используя объект const LANG = {ru:{․․․}, en:{․․․}}․
• Подключить Google Analytics для отслеживания количества сыгранных игр․
• Разработать мобильное приложение на базе Cordova/Capacitor, используя тот же код․

Создание сайта, где пользователи могут «погадать», – это отличное упражнение для отработки навыков фронтенда и алгоритмического мышления․ Мы разобрали весь процесс от планирования до готового к публикации кода, а также показали, как легко адаптировать простую игру «Угадай число» под любые другие виды гаданий․

Теперь вы знаете, как:

• Спроектировать пользовательский интерфейс․
• Реализовать бинарный поиск на JavaScript․
• Обработать ввод пользователя и защитить игру от ошибок․
• Опубликовать готовый проект в интернете․

Удачной разработки и приятных «магических» экспериментов!