Игра «Угадай число» на JavaScript!



Приветствую тебя дорогой читатель! В этом уроке я покажу, как создать игру на угадывание числа на 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:

<script type="text/javascript">

	var randomNum = Math.round((Math.random() * (9999 - 1000) + 1000));
	var countStep = 1;
	
	function checkAnswer(){

		var info;
		var answer = document.getElementById('answer');
		var result = Math.abs(randomNum - answer.value);

		if( result == 0 ){
			info = 'Поздравляем! Вы угадали число!';
			answer.style.display = 'none';
			document.getElementById('send').style.display = 'none';
		}else if( result < 10 ){
			info = 'Очень тепло! (ошиблись в диапазоне от 1 до 10)';
		}else if( result < 100 ){
			info = 'Тепло! (ошиблись в диапазоне от 10 до 100)';
		}else if( result < 1000 ){
			info = 'Холодно! (ошиблись в диапазоне от 100 до 1000)';
		}else{
			info = 'Очень холодно! (ошиблись на 1000 и более)';
		}

		document.getElementById('info').innerHTML += '<p>#' + countStep + ' Вы ответили: ' + answer.value + ' - ' + info + '</p>';
		answer.value = '';
		countStep++;
	}
</script>

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

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

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

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

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

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

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

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

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

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

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

Оставить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *