Игра угадай число на JavaScript

Автор: | 09.05.2017
Нет комментариев

Приветствую тебя дорогой читатель! В этом уроке я покажу, как создать игру на угадывание числа на JavaScript!

Игра угадай число на JavaScript

Сначала кратко расскажу о том, что это за игра и как в нее играть, а после разберем реализацию.

 

Описание игра

Смысл игры заключается в том, что компьютер будет загадывать четырехзначное положительное число (то есть число от 1000 до 9999), а игрок должен будет угадать это число за минимальное количество попыток, используя подсказки компьютера.

Подсказки будут такими:

  • если игрок ошибся на число до 10, то компьютер скажет – Очень тепло!
  • если игрок ошибся на число от 10 до 100, то компьютер скажет – Тепло!
  • если игрок ошибся на число от 100 до 1000, то компьютер скажет – Холодно!
  • если игрок ошибся на число от 1000 и более, то компьютер скажет – Очень холодно!
  • ну и если игрок отгадает число, то будет выведена информация о том, что пользователь победил.

Также, вместе с подсказками будет выводиться номер попытки и само число, которое написал пользователь в качестве своего ответа.

Пример того, как я играл:

Пример игры

Как видно на картинке, мне удалось отгадать число только с 21 попытки.

Теперь приступим к реализации!

P.S. Как и в других уроках по JavaScript, в самом конце будет работающий демо пример, а также возможность скачать его к себе на компьютер.

 

Реализация

Итак, давайте рассмотрим HTML верстку:

        <div id="wrap">         
                <div id="info">Загадано 4х-значное число:</div>
                <input id="answer">
                <button id="send" onclick="checkAnswer()">Ответить</button>
        </div>

Блок с id wrap – общий блок с игрой.
Блок с id info – это тот блок, в котором, в начале игры, выводится текст о том, что загадано число, а в ходе игры в этот блок будет добавляться информация о попытке ответа.

Текстовое поле (input) – поле, в которое пользователь будет вводить свой ответ, а по клику на кнопку (button) будет вызываться функция checkAnswer (об этом ниже).

 

CSS стили:

#wrap{
    width: 800px;
    margin: 0 auto;
    padding: 40px;
    font-size: 18px;
    border: 3px solid #9ea5a9;
}
#info{
        margin-bottom: 10px;
}
#answer{
    width: 60px;
    font-size: 24px;
}
#send{
    font-size: 24px;
    color: #fff;
    background: #3C8FB7;
    padding: 4px 8px;
    border: 0;
    cursor: pointer;
}
  • #wrap – стили для общего блока – выравниваем его по центру, задав автоматический отступ слева и справа;
  • #info – стили для блока, в котором выводится информация о ходах пользователя;
  • #answer – стили для текстового поля;
  • #send – стили для кнопки ответа.

 

Реализация игры на JavaScript:

Сначала объявляем 2 переменные:

  1. randomNum – случайное число от 1000 до 9999;
  2. countStep – счетчик попыток, изначально 1, так как для правильного ответа пользователь должен сделать хотя бы одну попытку.

Далее идет функция checkAnswer – в ней происходит следующее:

Объявляем 3 локальные переменные:

  1. info – в эту переменную мы будем выводить информационный текст, например, о том, что человек ошибся, либо дал правильный ответ;
  2. answer – в эту переменную мы сохраняем объект (информация из текстового поля), с которым удобно работать, например, получая его значение или изменяя его стили;
  3. result – в эту переменную мы сохраняем результат вычитания ответа пользователя из числа, загаданного компьютером, то есть мы находим разницу между двумя числами, метод Math.abs позволяет получить модуль числа, то есть если в результате разности получится отрицательное число, то Math.abs преобразует его в положительное число.

Далее идет проверка результата – если результат равен 0, значит игрок дал правильный ответ – выводим об этом информацию, а также, скрывает текстовое поле и кнопку ответа.
Все остальные условия просто проверяют “степень ошибки” и сохраняют в переменную info соответствующий текст.

После всех условий, в блок с идентификатором info выводим текст – так скажем, реакцию на ответ пользователя (номер попытки, ответ игрока и текстовое сообщение).

Предпоследней строкой мы очищаем текстовое поле (то есть оно очищается после каждого ответа), и последней строчкой увеличиваем счетчик попыток.

Теперь можете взглянуть на реальный пример, а также скачать его (все в одном html файле):

Посмотреть результат

Скачать

Если у вас есть вопросы по данному уроку, то можете задать их в комментариях.

На этом у меня все, желаю вам удачи, пока!

Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.