Лопни шарики на время – игра на 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 пример

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


Хостинг, которым я пользуюсь: 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>