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

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

Скачать

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


Раздел: Программирование

Дата последнего изменения: 2017-04-29 16:43:36

Просмотров: 12634

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

* Комментарий: (отменить ответ)

* Ваше имя:

Ваш e-mail:

*