Игра “Угадай число” на 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 файле):

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

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



Похожие публикации:

Оставить комментарий

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

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>