Как создать игру на глазомер?


Здравствуйте дорогие друзья! В этом уроке я покажу, как можно создать простенькую, но интересную игру, на глазомер! Как создать игру на глазомер? Как и всегда, в конце данного урока по javascript можно будет скачать все исходные файлы (скрипты, стили, html страницу)! Суть игры очень просто: перед вами будут появляться два квадрата разного цвета (не всегда разного), вам, на глаз, нужно определить какой из этих квадратов больше - они могут быть и одинакового размера!

Требования к игре

  1. Должны генерироваться 2 квадрата случайного размера и случайного цвета
  2. Ответ осуществляется нажатием на одну из 3 кнопок
  3. Должно подсчитываться и выводиться на экран - количество правильных и  неправильных ответов
 

Из чего будет состоять интерфейс игры?

  1. Два квадрата
  2. Три кнопки для ответа
  3. Две строки с результатами ответов
Рассмотрим HTML код:
<div class="wrap">

	<h2>Какой квадрат больше?</h2>
	
	<div id="one">1</div>
	<div id="two">2</div>
	
	
	<div id="interface">
		<p square=1 class="myButton">1 квадрат</p>
		<p square=2 class="myButton">2 квадрат</p>
		<p square=3 class="myButton">Равны</p>
		<div id="plus">Правильных ответов: 0</div>
		<div id="minus">Неправильных ответов: 0</div>
	</div>
	
</div>
Имеется 2 div блока (квадраты), в области интерфейса 3 тега - "P" (3 кнопки), и два дива - это результаты. Рассмотрим CSS код:
.wrap{
width: 900px;
margin: 0 auto;
background: #fff;
padding: 20px 0;
}

.wrap h2{
text-align: center;
color: #444;
padding-bottom: 20px;
}

#one,#two{
font-size: 20px;
padding: 10px 0 0 10px;
color: #fff;
position: absolute;
margin: 0 0 20px 220px;
}

#two{
margin: 0 0 20px 600px;
}

#interface{
margin: 200px 0 0 300px;
display: block;
font-size: 20px;
color: #444;
}
Рассмотрим и разберем JQuery код:
$(document).ready(function(){
	
	window.one = $('#one');
	window.two = $('#two');
	
	window.plus = 0;
	window.minus = 0;
	
	window.random_one = Math.round(Math.random() * (110 - 100) + 100);
	window.random_two = Math.round(Math.random() * (110 - 100) + 100);

	one.css({'width':random_one,'height':random_one,'background':'#' + random_one});
	two.css({'width':random_two,'height':random_two,'background':'#' + random_two});
	
	$('#interface p').each(function(){
		
		$(this).click(function(){

			if( ( $(this).attr('square') == 1 && random_one > random_two ) || ($(this).attr('square') == 2 && random_two > random_one) || ($(this).attr('square') == 3 && random_one == random_two) ){
				plus++;
				$('#plus').text('Правильных ответов: ' + plus);
			}else{
				minus++;
				$('#minus').text('Неправильных ответов: ' + minus);
			}
		
			random_one = Math.round(Math.random() * (110 - 100) + 100);
			random_two = Math.round(Math.random() * (110 - 100) + 100);

			one.css({'width':random_one,'height':random_one,'background':'#' + random_one});
			two.css({'width':random_two,'height':random_two,'background':'#' + random_two});		
		});

	});
	
});
Сначала мы объявляем нужные константы :
  • 2 квадрата (one и two)
  • Две константы для подсчета верных и неверных ответов (plus и minus соответственно)
  • 2 случайных числа в диапазоне от 100 до 110
Каждое из 2 случайных чисел одновременно будет и высотой, и шириной, и цветом наших квадратов! Максимально возможная разница между двумя квадратами равна 10px, если хотите усложнить игру, то можно уменьшить, например, до 5 пикселей и тогда на глаз определить большую фигуру будет намного сложнее. Для большей сложности, я специально оставил большое расстояние между квадратами, а также решил - при каждом ответе закрашивать их случайным (из заданного диапазона) цветом. Изначально, можно задать большой диапазон, например, от 100 до 500 пикселей, и тогда вначале будет легко, но с каждым правильным ответом можно уменьшать диапазон, тем самым, увеличивая вероятность того, что фигуры окажутся примерно одинаковыми по размеру. Теперь вы можете взглянуть на demo пример и скачать все файлы этого урока! На этом у меня всё, до новых публикаций, пока!
Demo пример Скачать исходники


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

Дата последнего изменения: 2015-11-09 23:28:10

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

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

Игра Угадай число на JavaScript!
Html таблица на JavaScript
Сортировка пузырьком на JavaScript
Движущаяся машина на JavaScript!
Игра «Найди отличия» на JavaScript!
Игра головоломка на JavaScript!

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

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

* Ваше имя:

Ваш e-mail:

*