Программирование для самых маленьких...

Делаем статичную 404 страницу веселой и интересной

Сергей

Автор

13
1
Доброго времени суток, сегодня мы с вами превратим 404 страницу некого сайта, в незатейливую игру, будем использовать JQuery. Так как игра у нас простая, никаких игровых движков мы использовать не будем, поэтому код может выглядеть несколько топорным, но для нашей цели вполне подходит.


Итак, имеем страницу: Сделаем так, чтобы приведения летали по странице, а паучок их ловил, за каждое пойманное приведение будем прибавлять очко к 404.


Приступим:


 Чтобы при движении объектов по странице другие объекты оставались на своих местах добавим в css стили паука и приведений свойство position:absolute; Подправим верстку страницы при необходимости,
так же добавим свойство pointer-events: none; чтобы паук и приведения не реагировали на клик по ним.
Ну и дорисуем в паука длинную паутину и поднимем картинку выше за экран.


В итоге css будет выглядеть так:

	#spider{
	margin-top:-77%;
	}

	#spider,#ghost,#ghost2{
	position:absolute;
	pointer-events: none;
	}


Создадим файл js_mini_game.js и начнем кодить.


Начнем с того что начнем выполнять наш код после того как страница готова к использованию (то есть загружена), весь код будем писать внутри этой функции:  

	$(document).ready(function(){ //ваш код });

Определим высоту и ширину окна браузера в котором открыли нашу замечательную страницу:

	SH =window.innerHeight; //высота окна браузера 
	SW =window.innerWidth; //ширина окна браузера

Используем функции чистого JavaScript т.к. методы JQuery
.innerHeight(); и .innerWidth();
нельзя применить к объектам window и document.


Затем создадим переменную point для очков и присвоим ей 404, а так же булеву переменную firstflag для отслеживания первого клика по экрану и присвоим ей true.


	 var point = 404; //очки
	 var firstflag=true; //флаг первого клика


Опишем теперь, что будет происходить при клике в окне браузера


	//обработчик клика в окне
	 $(window).click(function () { //ваш код });


Будем опускать и поднимать паука. Для этого используем метод JQuery - .animate() Применяем его к объекту $("#spider") к которому хотим применять анимацию.


.animate() - принимает первым параметром оператор или функцию, которая описывает что должно произойти с объектом,
второй параметр – это время за которое должна выполниться функция и третий – необязательный параметр, функция или оператор которая должна выполниться когда выйдет заданное время (то есть после первой функции).


Паука будем опускать на половину экрана SH*0.5:

	//опускаем паука за 500 миллисекунд
	$("#spider").animate({'top': SH*0.5}, 500,function(){$("#spider").animate({'top':0}, 500);});//после того как опустился - поднимаем паука за 500 миллисекунд


Можно сохранить и посмотреть, что у нас получилось. (Не забывает подключить в страницу html, скрипт jquery ,наш скрипт и стили css).
Если все правильно, то при клике паук должен опускаться и подниматься на паутине.


Сделаем так, чтобы паучок двигался за курсором мыши

	
	$(window).mousemove(function (pos) {//ваш код });


При каждом движении мыши будем изменять у паука свойство css left. Объект pos содержит в координаты курсора на экране

	
	$("#spider").css('left',(pos.pageX-SW/2)+'px');


Вычитаем половину ширины экрана из координаты страницы Х для того чтобы паук был над курсором.
Можно посмотреть что получилось.


Паук двигается слишком быстро.


Установим задержку перед изменением css паука в пол-секунды:

	//движения паука за курсором с задержкой 500 миллисекунд
	setTimeout(function () {$("#spider").css('left',(pos.pageX-SW/2)+'px');} , 500);   


Теперь напишем функцию, которая будет передвигать приведений по экрану в хаотичном порядке.


	function fly_object() {//ваш код }


Перемещать приведений будем с помощью все того же метода .animate изменяя css свойство margin Сгенерируем случайным образом атрибуты margin: top, bottom, left, right с помощью функции Math.random();
функция генерирует случайное число от 0 до 1 поэтому умножим полученное число на высоту/ширину экрана минус высота/ширина приведения для того чтобы они не вылетали за пределы экрана.
Не обязательно генерировать случайно число для каждого атрибута,


достаточно «обратному» атрибуту присвоить результат с противоположным знаком:

	//генерируем случайную точку на экране для приведения 1
        var top = Math.round(Math.random() * (SH - $('#ghost').height()));
        var bottom = top*(-1);
        var left = Math.round(Math.random() * (SW- $('#ghost').width())) ;
        var right = left*(-1);



аналогично для приведения 2.


Запустим функцию чуть позже.=)


Итак, приступим к самой сложной части, к определению столкновения двух объектов, т.к. мы не используем никаких игровых движков, определять столкновение нам придется самим, в движках это делалось бы заготовленной функцией (плох тот движок, у которого ее нет). Использовать мы будем математику, ту, которая вам «в жизни никогда не пригодится». P.S. наш способ будет работать с погрешностями, но для нашей игры это не так страшно.


Немного теории:

	объект1 пересекается с объектом2, 
	когда координата центра объекта1 
	будет больше чем координата левого края объекта2 
	и меньше чем координата правого края объекта2, 
	аналогично с верхом и низом. 



Определим, где находится наш объект, для этого определим его расстояние от левого края экрана


	$('#spider').offset().left 

прибавим половину ширины объекта и получим центральную точку по горизонтали

	$('#spider').offset().left+$('#spider').width()/2

Вся теория у нас есть.


Напишем теперь условия которые определяют


столкновение паука и приведений:

		if(	  
		  (($('#spider').offset().left+$('#spider').width()/2<=$('#ghost').offset().left+$('#ghost').width())
			  &&($('#spider').offset().left+$('#spider').width()/2>=$('#ghost').offset().left))
			  &&
			   (($('#spider').offset().top+$('#spider').height()<=$('#ghost').offset().top+$('#ghost').height())
			  &&($('#spider').offset().top+$('#spider').height()>=$('#ghost').offset().top))
		 )
		 {//здесь опишем то, что должно произойти в результате столкновения}


Аналогично для приведения2


В результате столкновения будем увеличивать очки на 1, скрывать приведение, показывать его через 3 секунды, и запускать звук.


Начнем со звука.
Положим, что у вас уже есть звук, который будет звучать при поимке приведения, у меня он называется «blob.mp3» и лежит он в той же директории что и html страница.


Напишем ниже функцию :

		function soundBlob() {
		  var audio = new Audio(); // Создаём новый элемент Audio
		  audio.src = 'blob.mp3'; // Указываем путь к звуку 
		  audio.autoplay = true; // Автоматически запускаем
		  audio.clear; //очищаем объект, чтобы звуки не накладывались друг на друга
		}


Скрыть приведение нам поможет свойство css display:none; Есть конечно в JQuery функция .hide();
Но для нас она работает слишком медленно.


	$("#ghost").css("display","none");


Увеличивать очки будем инкрементом (увеличением на 1)


	point++;


И наконец, покажем приведение через 3 секунды после исчезновения. Используем функцию setInterval();
первый параметр у нее это функция которая будет выполняться, а второй время через которое ее выполнить.
Так же при вызове функция возвращает свой id , который мы будет ловить в переменные idint и idint2.
В setInterval(); будем выполнять функцию show_ghost1() и show_ghost2(), для каждого приведения будет своя «функция показа». Выглядят они одинаково, за исключением имени объекта, и id setInterval(). Почему нужно очищать setInterval() подумайте сами =)


показываем приведение 1:

		function show_ghost1() {
		  //показываем приведение 1
		  $("#ghost").css("display","block");
		  //очищаем интервал показа приведения через 3 секунды
		  clearInterval(idint);
		}


Соберем все что написали в одну функцию start_game() и
добавим в конце вывод очков в заранее заготовленный контейнер с id =”point_conteiner”


function start_game():

	//функция выполняется каждые 300 миллисекунд
	function start_game() {
		fly_object();
	//столкновение паука с приведением 1
		if(	  
		  (($('#spider').offset().left+$('#spider').width()/2<=$('#ghost').offset().left+$('#ghost').width())
			  &&($('#spider').offset().left+$('#spider').width()/2>=$('#ghost').offset().left))
			  &&
			   (($('#spider').offset().top+$('#spider').height()<=$('#ghost').offset().top+$('#ghost').height())
			  &&($('#spider').offset().top+$('#spider').height()>=$('#ghost').offset().top))
		 )
		 {
			 soundBlob(); //воспраизводим звук
			 point++; //увеличиваем очки на 1
			 $("#ghost").css("display","none"); //скрываем пойманное приведение
			 idint= setInterval(show_ghost1, 3000); //показываем приведение через 3 секунды		 
		 }
	 
	//столкновение паука с приведением 2  
	  if(	  
		  (($('#spider').offset().left+$('#spider').width()/2<=$('#ghost2').offset().left+$('#ghost2').width())
			  &&($('#spider').offset().left+$('#spider').width()/2>=$('#ghost2').offset().left))
			  &&
			   (($('#spider').offset().top+$('#spider').height()<=$('#ghost2').offset().top+$('#ghost2').height())
			  &&($('#spider').offset().top+$('#spider').height()>=$('#ghost2').offset().top))
		 )
		{//аналогично для приведения 2
			  soundBlob(); 
			  point++; 
			  $("#ghost2").css("display","none"); 
			  idint2= setInterval(show_ghost2, 3000);
		  }
	 
	 $("#point_conteiner").text(point);//выводим очки на экран
    }


 Почти все готово, функцию start_game() будем выполнять каждые 300 миллисекунд, а начнем это делать при первом клике на экран. Для этого вернемся в функцию где мы описывали первый клик и добавим туда


условие:

		if(firstflag){   
			$("#404pic").css("display","none");//скрываем картинку 404 ошибки
			$("#point_conteiner").css("display","block");//показываем очки
			setInterval(start_game, 300); //запускаем функцию каждые 300 миллисекунд
			firstflag=false; //опускаем флаг
		}


Вот и все, наша мини-игра готова, страница 404 стала веселее, а вы дочитали статью до конца.


То, что получилось можно посмотреть, пройдя по ссылке http://insideonline.ru/лучшая_игра


Весь код:

		$(document).ready(function(){ 

			 SH =window.innerHeight; //высота окна браузера 
			 SW =window.innerWidth; //ширина окна браузера
			 var point = 404; //очки
			 var firstflag=true; //фраг первого клика
			
			 //обработчик клика в окне
			 $(window).click(function () {
				   if(firstflag){   
					$("#404pic").css("display","none");//скрываем картинку 404 ошибки
					$("#point_conteiner").css("display","block");//показываем очки
					setInterval(start_game, 300); //запускаем функцию каждые 300 миллисекунд
					firstflag=false; //опускаем флаг
					}
				   
					   $("#spider").animate({'top':SH*0.5}, 500,function(){//опускаем паука за 500 миллисекунд
					   $("#spider").animate({'top':0}, 500); //после того как опустился - поднимаем паука за 500 миллисекунд
						});	
					 
				 }
			 );

			 //обработчик движения мыши
		   $(window).mousemove(function (pos) { 
		   
		   //движения паука за курсором с задержкой 500 миллисекунд
		   setTimeout(function () {
				$("#spider").css('left',(pos.pageX-SW/2)+'px'); 
				}, 500);   
		   }); 
		   
		   //летающие приведения
			function fly_object() {
				
			//генерируем случайную точку на экране для приведения 1
				var top = Math.round(Math.random() * (SH - $('#ghost').height() ));
				var bottom = top*(-1);
				var left = Math.round(Math.random() * (SW- $('#ghost').width())) ;
				var right = left*(-1);
				
			//для приведения 2	
				var top2 = Math.round(Math.random() * (SH - $('#ghost2').height() ));
				var bottom2 = top2*(-1);
				var left2 = Math.round(Math.random() * (SW- $('#ghost2').width()) );
				var right2 = left2*(-1);
				 
			//перемещаем приведения в случайно сгенерированные точки за 1 секунду
				$('#ghost').animate({'margin': + top + 'px ' + right + 'px ' + bottom + 'px ' + left + 'px'},1000);
				$('#ghost2').animate({'margin': + top2 + 'px ' + right2 + 'px ' + bottom2 + 'px ' + left2 + 'px'},1000);
			}

			
			//функция выполняется каждые 300 миллисекунд
			function start_game() {
				fly_object();
			//столкновение паука с приведением 1
				if(	  
				  (($('#spider').offset().left+$('#spider').width()/2<=$('#ghost').offset().left+$('#ghost').width())
					  &&($('#spider').offset().left+$('#spider').width()/2>=$('#ghost').offset().left))
					  &&
					   (($('#spider').offset().top+$('#spider').height()<=$('#ghost').offset().top+$('#ghost').height())
					  &&($('#spider').offset().top+$('#spider').height()>=$('#ghost').offset().top))
				 )
				 {
					 soundBlob(); //воспраизводим звук
					 point++; //увеличиваем очки на 1
					 $("#ghost").css("display","none"); //скрываем пойманное приведение
					 idint= setInterval(show_ghost1, 3000); //показываем приведение через 3 секунды		 
				 }
			 
			//столкновение паука с приведением 2  
			  if(	  
				  (($('#spider').offset().left+$('#spider').width()/2<=$('#ghost2').offset().left+$('#ghost2').width())
					  &&($('#spider').offset().left+$('#spider').width()/2>=$('#ghost2').offset().left))
					  &&
					   (($('#spider').offset().top+$('#spider').height()<=$('#ghost2').offset().top+$('#ghost2').height())
					  &&($('#spider').offset().top+$('#spider').height()>=$('#ghost2').offset().top))
				 )
				{//аналогично для приведения 2
					  soundBlob(); 
					  point++; 
					  $("#ghost2").css("display","none"); 
					  idint2= setInterval(show_ghost2, 3000);
				  }
			 
			 $("#point_conteiner").text(point);//выводим очки на экран
			}
			 
			  
			
		function soundBlob() {
		  var audio = new Audio(); // Создаём новый элемент Audio
		  audio.src = 'blob.mp3'; // Указываем путь к звуку 
		  audio.autoplay = true; // Автоматически запускаем
		  audio.clear; //очищаем объект, чтобы звуки не накладывались друг на друга
		}
			
			
			function show_ghost1() {
				//показываем приведение 1
				$("#ghost").css("display","block");
				//очищаем интервал показа приведения через 3 секунды
				 clearInterval(idint);
			}
			
			function show_ghost2() {
				//показываем приведение 2
				$("#ghost2").css("display","block");
				//очищаем интервал показа приведения через 3 секунды
				clearInterval(idint2);
			}
			
		});