Программирование для самых маленьких...
Делаем статичную 404 страницу веселой и интересной
Сергей
Автор
13
1
Итак, имеем страницу:
Сделаем так, чтобы приведения летали по странице, а паучок их ловил, за каждое пойманное приведение будем прибавлять очко к 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);
}
});