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

Здравствуйте дорогие друзья! В этом уроке я покажу, как можно создать простенькую, но интересную игру, на глазомер!

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

Как и всегда, в конце данного урока по 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 пример

Скачать исходники


Хостинг, которым я пользуюсь: Good-Host


Похожие статьи

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

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

*

code

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