Программирование для самых маленьких...
Делаем статичную 404 страницу веселой и интересной
Сергей
Автор
#spider{ margin-top:-77%; } #spider,#ghost,#ghost2{ position:absolute; pointer-events: none; }
$(document).ready(function(){ //ваш код });
SH =window.innerHeight; //высота окна браузера SW =window.innerWidth; //ширина окна браузера
.innerHeight(); и .innerWidth();нельзя применить к объектам window и document.
Затем создадим переменную point для очков и присвоим ей 404, а так же булеву переменную firstflag для отслеживания первого клика по экрану и присвоим ей true.
var point = 404; //очки
var firstflag=true; //флаг первого клика
Опишем теперь, что будет происходить при клике в окне браузера
//обработчик клика в окне
$(window).click(function () { //ваш код });
Будем опускать и поднимать паука. Для этого используем метод JQuery - .animate()
Применяем его к объекту $("#spider") к которому хотим применять анимацию.
//опускаем паука за 500 миллисекунд $("#spider").animate({'top': SH*0.5}, 500,function(){$("#spider").animate({'top':0}, 500);});//после того как опустился - поднимаем паука за 500 миллисекунд
$(window).mousemove(function (pos) {//ваш код });
$("#spider").css('left',(pos.pageX-SW/2)+'px');
//движения паука за курсором с задержкой 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);
объект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)) ) {//здесь опишем то, что должно произойти в результате столкновения}
function soundBlob() { var audio = new Audio(); // Создаём новый элемент Audio audio.src = 'blob.mp3'; // Указываем путь к звуку audio.autoplay = true; // Автоматически запускаем audio.clear; //очищаем объект, чтобы звуки не накладывались друг на друга }
$("#ghost").css("display","none");
point++;
function show_ghost1() { //показываем приведение 1 $("#ghost").css("display","block"); //очищаем интервал показа приведения через 3 секунды clearInterval(idint); }
//функция выполняется каждые 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);//выводим очки на экран }
if(firstflag){ $("#404pic").css("display","none");//скрываем картинку 404 ошибки $("#point_conteiner").css("display","block");//показываем очки setInterval(start_game, 300); //запускаем функцию каждые 300 миллисекунд firstflag=false; //опускаем флаг }
$(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); } });