Javascript: делаем картинку, бегающую по окну браузера

Подход из статьи тоже таки устарел, можно попробовать решение новее отсюда.

Лет 10-15 назад такие штучки были в моде, только те скрипты вряд ли будут работать сегодня - из-за обязательных тогда веток кода, поддерживающих браузер Netscape Navigator. Ну а современные хромооперы, на уровне некоторых свойств Javascript определяя себя как Netscape, тем не менее, и не думают поддерживать Netscape-совместимый код. Почему - вопрос не ко мне, а к разработчикам "движков" браузеров. Поэтому напишем всё, пользуясь стандартными средствами Javascript, по идее, должно сработать даже в Internet Explorer 6. Ну и в текущем "Хроме" у меня показалось нормально.

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

Скрипт в работе, открыть в новом окне/вкладке

Файл fly.js - код скрипта

var imgWidth=32; var imgHeight=32; //размеры картинок
var speed = 150; //задержка в мс для контроля скорости
var step = 10; //шаг в пикселах
var b=false; //нужна ли кнопка вкл/выкл
var button_left = 10; var button_top = 10; //её абсолютные координаты
var img_folder = "http://nickolay.info/jscript/fly/"; //папка для картинок с '/' в конце пути

var button = Array(); //массив картинок
button[0]=new Image(); button[0].src=img_folder+"off.gif"; //картинки вкл/выкл
button[1]=new Image(); button[1].src=img_folder+"on.gif";
if (b) { //показать кнопку вкл/выкл
 var text=
  '<div align="center"><a href="javascript:showhideAnimation()"><img name="Button" src="'+
  button[0].src+'" width="'+imgWidth+'" height="'+imgHeight+'" border="0" /></a></div>';
   //код кнопки
 document.writeln('<div id="FlyOnOff" '+
  'style="position:absolute; visibility:show; pixelLeft:'+button_left+
  'px; pixelTop:'+button_top+'px; z-index:0">'+text+'</div>');
}

//ниже - код для движения
document.onmousemove=getMousePosition;

var dotRadius=50; //радиус круга для беготни вокруг курсора мыши
var dotAngle=0; //угол положения
var dotDirection=1; //направление (1 - по часовой)
var alpha; //угол по отношению к курсору мыши
var mult; //флаг
var picX = 20; var picY = 100; //картинкины координаты
var mouseX = 0; var mouseY = 0; //мышиные координаты
//загрузка картинок
var img = Array();
for (var i=-4; i<5; i++) if (i!=0) {
 img[i]=new Image();
 img[i].src=img_folder+i+'.gif';
}
//показать раздел для картинки
document.writeln('<div id="FlyDiv" style="position:absolute">');
document.writeln('<img name="pic" src="' + img[1].src + '"></div>');

function display(direction) { //направление от -4 до 4 кроме 0
 pic.src = img[direction].src;
}

function getMousePosition(e) {
 mouseY= window.event.y + document.body.scrollTop;
 mouseX= window.event.x + document.body.scrollLeft;
}

function calcNewPos() { //главное - вычисление позиции dot, куда идёт
 var dotX=0; var dotY=0; //координаты
 var dotSpeed; //абсолютная угловая скорость
 var dist=Math.sqrt(Math.pow(mouseY-picY,2) + Math.pow(mouseX-picX,2));
 dotSpeed=Math.PI/15;
 dotAngle+=dotDirection*dotSpeed;
 dotX=mouseX+dotRadius*Math.cos(dotAngle);
 dotY=mouseY+dotRadius*Math.sin(dotAngle);
 var arg = (dotY-picY) / (dotX-picX);
 mult = (dotX - picX < 0) ? mult = -1 : 1;
 alpha = Math.atan(arg);
 var dx = mult * step * Math.cos(alpha);
 var dy = mult * step * Math.sin(alpha);
 picX += dx;
 picY += dy;
}

function showhideAnimation() { //кнопка вкл/выкл
 FlyDiv.style.visibility=="hidden" ? FlyDiv.style.visibility = "visible" :
  FlyDiv.style.visibility = "hidden";
 Button.src = FlyDiv.style.visibility=="hidden" ? button[1].src : button[0].src;
}

function moveMe() { //движение
 calcNewPos();
 FlyDiv.style.left = picX - pic.width / 2;
 FlyDiv.style.top = picY - pic.height / 2;
 alpha=-180*alpha/Math.PI;
 alpha+=22.5;
 var OK=0;
 for(var i=0; (i<4)&& !OK; i++) {
  if (alpha<-Math.PI+45*i) {
   display(mult*(i+1));
   OK=1;
  }
 }
}

function ChangeDotDirection() { //переключить направление
 dotDirection=-dotDirection; dotAngle+=Math.PI;
}

//запуск системы
setInterval('moveMe()', speed);
setInterval('ChangeDotDirection()', speed*50);

Код с примером вызова скрипта

<script type="text/javascript" src="http://nickolay.info/jscript/fly/fly.js">
</script>
<noscript>
 <div align="center">Извините, для работы приложения нужен включённый Javascript</div>
</noscript>

Технические замечания:

Легко заметить, что таракан бежит к курсору "мыши", а когда курсор неподвижен, начинает бегать кругами вокруг него.

Таракашку или другую букашку лучше сделать как анимированный gif с двумя фазами движения и маленькой задержкой смены кадров (у меня - 10 мс, стоящие по умолчанию в GIF Animator). Можно двигать и статичные картинки, но тогда их стоит сделать потщательней и покрасивей, так как объект отображается всего в восьми ракурсах (соответственно, исходная картинка поворачивается на 45 градусов). Какие нужны имена картинок - видно из приложенного архива, от -4.gif до 4.gif включительно, кроме нуля.

В начале файла fly.js приведены настройки, которые нужно поменять для ваших картинок - прежде всего, в 6 первых строках. Обратите внимание, что кнопку включения/выключения объекта можно показывать или не показывать на экране, а картинки для неё называются on.gif и off.gif. Задержку speed из fly.js нужно подобрать опытным путём так, чтобы в момент вывода картинки на определённом месте успели отобразиться все кадры gifки. Это создаст нормальный эффект движения. Я качеством картинки не озадачивался, намалевав за 2 минуты в Paint и сделав повороты в Photoshop.

Антивирусное или антирекламное расширение браузера при определённых условиях может заблокировать таракашку, тогда добавьте страницу с ней в исключения.

 Скачать скрипт "картинка, бегающая по окну браузера", архив .zip со всеми файлами (11 Кб)

 Альтернативные картинки для скрипта - муха 40x40 px, а не таракан 32x32 px, архив .zip :) (14 Кб)

29.08.2015, 23:11 [11720 просмотров]