Главная » 2010 » Июль » 21 » Пчела и цветочек (Javascript)
21.07.2010, 11:38

Пчела и цветочек



Если передвинуть цветочек мышкой, то пчела полетит за ним. Очень прикольный скрипт.

1) Скачиваем архив.
2) Все графические файлы и js заливаем в корень сайта.
3) В head кидаем эти скрипты:

Code
<SCRIPT LANGUAGE="JavaScript" SRC="dynlayer.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="drag.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--

for (var i=0;i<=4;i++) {
  eval("bee_r"+i+" = new Image()")
  eval("bee_r"+i+".src = 'bee-r"+i+".gif'")
  eval("bee_l"+i+" = new Image()")
  eval("bee_l"+i+".src = 'bee-l"+i+".gif'")
}

function init() {
  flower1 = new DynLayer('flower1Div')
  bee1 = new Bee('bee1Bee',null,flower1)
   
  drag.resort = false
  drag.add(flower1)

  document.onmousedown = mouseDown
  document.onmousemove = mouseMove
  document.onmouseup = mouseUp
  if (is.ns) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}

function mouseDown(e) {
  if ((is.ns && e.which!=1) || (is.ie && event.button!=1)) return true
  var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft
  var y = (is.ns)? e.pageY : event.y+document.body.scrollTop
  if (drag.mouseDown(x,y)) {
  return false
  }
  else return true
}
function mouseMove(e) {
  var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft
  var y = (is.ns)? e.pageY : event.y+document.body.scrollTop
  if (drag.mouseMove(x,y)) {
  bee1.startFly()
  return false
  }
  else return true
}
function mouseUp(e) {
  var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft
  var y = (is.ns)? e.pageY : event.y+document.body.scrollTop
  if (drag.mouseUp()) {
  return false
  }
  else return true
}

function Bee(id,nestref,flower) {
  this.dynlayer = DynLayer
  this.dynlayer(id,nestref)
  this.i1 = new DynLayer(id+'i1',id)
  this.i2 = new DynLayer(id+'i2',id)
  this.flower = flower
  this.flyactive = false
  this.animactive = false
  this.animcount = 0
  this.direction = "r"
  this.animdir = 1
  this.amplitude = 35
  this.angleinc = 10
  this.hoverangle = 0
  this.centerX = this.x
  this.centerY = this.y
  this.startFly = BeeStartFly
  this.fly = BeeFly
  this.animate = BeeAnimate
  this.land = BeeLand
}
Bee.prototype = DynLayer.prototype
function BeeStartFly() {
  if (!this.flyactive) {
  var distx = Math.abs(this.x+8-this.flower.x)
  var disty = Math.abs(this.y+8-this.flower.y)
  if (Math.sqrt(Math.pow(distx,2)+Math.pow(disty,2)) > 35) {
  this.slideActive = false
  this.animactive = true
  this.animate()
  this.flyactive = true
  this.fly()
  }
  }
}
function BeeFly() {
  if (this.flyactive) {
  var distx = Math.abs(this.x+8-this.flower.x)
  var disty = Math.abs(this.y+8-this.flower.y)
  if (Math.sqrt(Math.pow(distx,2)+Math.pow(disty,2)) > 40 || distx > 15) {
  var angle = Math.floor(Math.atan(disty/distx)*180/Math.PI)
  if (distx==0 && disty==0) angle = 0
  if (this.flower.x>=this.x+8) {
  if (this.flower.y<=this.y+8) angle = angle // 0 to 90
  else angle = 360-angle // 270 to 360
  this.direction = "r"
  }
  else {
  if (this.flower.y<=this.y+8) angle = 180-angle // 90 to 180
  else angle = 180+angle // 180 to 270
  this.direction = "l"
  }
  this.centerX += 3*Math.cos(angle*Math.PI/180)
  this.centerY -= 3*Math.sin(angle*Math.PI/180)
  this.hoverangle += this.angleinc
  this.moveTo(this.centerX,this.centerY-this.amplitude*Math.sin(this.hoverangle*Math.PI/180))
  setTimeout(this.obj+'.fly()',20)
  }
  else {
  this.flyactive = false
  this.slideTo(this.flower.x+3,this.flower.y-5,2,20,this.obj+".land()")
  }
  }
}
function BeeAnimate() {
  if (this.animactive) {
  this.i1.doc.images[this.id+'i1Img'].src = eval('bee_'+this.direction+Math.floor(5*Math.random())+'.src')
  this.i2.doc.images[this.id+'i2Img'].src = eval('bee_'+this.direction+Math.floor(5*Math.random())+'.src')
  setTimeout(this.obj+'.animate()',20)
  }
}
function BeeLand() {
  this.centerX = this.x
  this.centerY = this.y
  this.hoverangle = 0
  if (!this.flyactive) {
  this.i1.doc.images[this.id+'i1Img'].src = bee_r1.src  
  this.i2.doc.images[this.id+'i2Img'].src = bee_r1.src  
  this.animactive = 0  
  }  
}  
   
//-->
</SCRIPT>
<STYLE TYPE="text/css">
<!--
#bee1Bee {position:absolute; left:100; top:100; width:16; height:16;}
#bee1Beei1 {position:absolute; left:0; top:0; width:16; height:16;}
#bee1Beei2 {position:absolute; left:0; top:0; width:16; height:16;}
#flower1Div {position:absolute; left:120; top:120; width:45; height:72;}
-->
</STYLE>

4) В body добавляем onload:

Code

<body onLoad="init()">

и вставляем это:

Code
<DIV ID="flower1Div"><IMG SRC="flower.gif" WIDTH=45 HEIGHT=72></DIV>

<DIV ID="bee1Bee">
<DIV ID="bee1Beei1"><IMG NAME="bee1Beei1Img" SRC="bee-r1.gif" WIDTH=16 HEIGHT=16></DIV>
<DIV ID="bee1Beei2"><IMG NAME="bee1Beei2Img" SRC="bee-r1.gif" WIDTH=16 HEIGHT=16></DIV>
</DIV>
Материал взят с сайта infoscript.ru
Теги: Скачать Пчела и цветочек
Скачать "Пчела и цветочек"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: Неизвестен
Категория: JavaScript's | Просмотров: 2544 | Добавил: antisept | Рейтинг: 5.0/1 |
Теги: цветочек, Пчела
Всего комментариев: 1
+1  
1 saske   (21.07.2010 13:23) [Материал]
Аватар пользователя
Название крутое biggrin

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]