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

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

Читайте также:

Html таблица на JavaScript
Сортировка пузырьком на JavaScript
Движущаяся машина на JavaScript!
Видео галерея на JavaScript!
Падающий мяч на JavaScript!
Генератор случайных картинок на JavaScript!
Как изменить фон страницы на JavaScript
Анимация на чистом javascript

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

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

* Ваше имя:

Ваш e-mail:

*