Лопни шарики на время - игра на javascript!


Приветствую вас дорогие друзья! В этом уроке я покажу, как можно создать игру, в которой необходимо лопнуть шарики определенных цветов за время! Лопни шарики на время - игра на javascript! Как и в других играх на javascript, в конце урока имеются исходные файлы и demo пример! Итак, сначала опишу, в чём суть игры!
Перед вами будут разноцветные шарики (трех цветов) и будет определенное время, за которое вам нужно выполнить задание! Задание будет примерно такого типа: "лопнуть 10 зеленых, 10 красных и 10 фиолетовых шариков за 30 секунд ".
 

Правила игры

Правила очень просты:
  1. Нельзя лопать больше шариков, чем это установлено в задании, то есть если нужно лопнуть 10 красных шариков, то, лопнув, например, 11 шаров - вы проиграете.
  2. Нужно уложиться в отведенное время.
 

Особенности игры

Давайте рассмотрим основные особенности игры, которые нам необходимо учесть при написании кода:
  • Шарики трех цветов - зеленые, красные и фиолетовые
  • Игра начинается по нажатию на кнопку - "Начать"
  • Проигрыш, если лопнуть больше, чем в задании
  • Проигрыш, если вышло время
  • Имеются уровни
  • Чем быстрее вы завершите предыдущий уровень, тем больше времени у вас будет в следующем (время сохраняется)
  • Каждый раз усложнять игру, добавляя больше шариков, но при этом и увеличивать время
  • Играть можно до бесконечности
Давайте рассмотрим HTML код:
<div class="wrap">
	
	<p id="start">Начать</p>
	<task>Задание: лопнуть 5 фиолетовых, 5 зеленых и 5 красных шариков!<br>Текущий уровень: 1</task>
	<time>Осталось секунд: 20</time>
	
	<div class="green"></div>
	<div class="green"></div>
	<div class="purple"></div>
	<div class="purple"></div>
	<div class="red"></div>
	<div class="red"></div>
	<div class="green"></div>
	<div class="red"></div>
	<div class="purple"></div>
	<div class="purple"></div>
	<div class="red"></div>
	<div class="purple"></div>
	<div class="red"></div>
	<div class="green"></div>
	<div class="purple"></div>
	<div class="purple"></div>
	<div class="red"></div>
	<div class="green"></div>
	<div class="red"></div>
	<div class="green"></div>
	<div class="green"></div>
	<div class="red"></div>
	<div class="purple"></div>
	<div class="red"></div>
	<div class="green"></div>
	<div class="purple"></div>
	<div class="purple"></div>
	<div class="purple"></div>
	<div class="red"></div>
	<div class="purple"></div>
	<div class="red"></div>
	<div class="green"></div>
	<div class="purple"></div>
	<div class="purple"></div>
	<div class="red"></div>
	<div class="purple"></div>
	<div class="red"></div>
	
</div>
У нас имеется обертка - "wrap", в ней мы расположили кнопку старта игры, блок с заданием (task) и блок со временем (time). Также, выведем блоки div (шары) у каждого из которых задан нужный класс, соответствующий определенному цвету. CSS стили:
.wrap{
width: 900px;
margin: 0 auto;
background: #fff;
padding: 20px 0;
}

task,time{
display: none;
clear: both;
font-size: 20px;
color: #444;
padding: 10px 20px 30px 20px;
}

#start{
text-align: center;
color: #444;
font-size: 25px;
cursor: pointer;
}

.green,.purple,.red{
width: 100px;
height: 100px;
float: left;
background: url('green.jpg') no-repeat;
}

.purple{
background: url('purple.jpg') no-repeat;
}

.red{	
background: url('red.jpg') no-repeat;
}
Как видите, каждому классу прописан свой фон (картинка в той же директории, что и файлы стиля).. Теперь давайте рассмотрим и разберем основные моменты JQuery кода:
$(document).ready(function(){
	
	window.green = 5;
	window.purple = 5;
	window.red = 5;
	window.time = 20;
	window.level = 1;
	window.factor = 10;

	function start(){
		
		$('.wrap div').each(function(){
			
			$(this).click(function(){

				color = $(this).attr('class');
				$(this).hide();
				
				if( color == 'green' ) green--;
				if( color == 'purple' ) purple--;
				if( color == 'red' ) red--;
				
				if( green == 0 && purple == 0 && red == 0 ){
					time += factor;
					green += factor;
					purple += factor;
					red += factor;
					factor += 2;
					level++;
					
					$('.wrap div').unbind('click');
					
					for (var i = 0; i < factor * 4; i++){
						
						var random = Math.round(Math.random() * (3 - 1) + 1);
						
						if( random == 1) color = 'green';
						if( random == 2) color = 'purple';
						if( random == 3) color = 'red';
							
						$('.wrap').append('<div class="' + color + '"></div>');
					}
					
					start();
				}
							
				if( green < 0 || purple < 0 || red < 0 ) time = 0;
				$('task').html('Задание: лопнуть ' + purple + ' фиолетовых, ' + green + '  зеленых и ' + red + ' красных шариков!<br>Текущий уровень: ' + level);
			});
		});
	}
	
    function sort_ball() { 
     selected = $('.wrap div');
		if( time > 0 ){
			time--;
			$('time').html('Осталось секунд: ' + time);
		}else $('time').html('Вы проиграли!');
    }
     
	$('#start').click(function(){
		$('task,time').css('display','block');
		$(this).hide();
		setInterval(sort_ball, 1000);
		start();
	});
});
Сначала мы описываем константы:
  1. window.green (red,purple) - начальное количество зеленных (красных, фиолетовых) шаров, которые необходимо лопнуть
  2. time = 20 - это количество секунд, которое отводится на выполнение задания на первом уровне сложности
  3. window.level = 1 - соответственно отвечает за текущий уровень
  4. window.factor = 10 - это коэффициент, который будет увеличивать сложность (увеличивать количество шаров, которые необходимо лопнуть), а также это число будем умножать на 4 и генерировать новые шарики.
Далее идет описание функции - start(), которую мы запускает после нажатия на соответствующую кнопку. В ней мы проходим по всем div блокам (шарикам) и определяем лопнувшие шары, уменьшая их количество (скрывая). Когда мы выполнили задание, происходит увеличение времени и шаров на значение коэффициента. Также, мы увеличиваем само значение коэффициента на 2 и переходим на следующий уровень (level++). После этого, с помощью функции unbind, мы снимаем обработку событий (клика мышью) со всех элементов - дивов, делаем это для того, чтобы при повторном пуске функции start и при генерации новых шаров, они (новые шары) попали в выборку. Генерация новых элементов случайного (одного из 3) цвета происходит так: генерируем случайное число от 1 до 3 и в зависимости от этого выбираем цвет шара (каждая цифра соответствует своему цвету). Функция sort_ball() срабатывает каждую секунду (благодаря установленному интервалу) и уменьшает оставшееся время на 1. Если время больше 0, то выводим это время, иначе выводим сообщение о том, что игра проиграна. Теперь вы можете посмотреть на реальный пример и скачать все исходные файлы! На этом у меня, всё, до новых уроков, пока!
Demo пример Скачать исходники


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

Дата последнего изменения: 2015-11-15 00:16:34

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

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

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

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

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

* Ваше имя:

Ваш e-mail:

*