首页 » 技术分享 » 游来游去的小鱼

游来游去的小鱼

　
评论关闭　1,947次浏览

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>particle-4</title>
<meta http-equiv="imagetoolbar" content="no">

<style type="text/css">
 html {
  overflow: hidden;
 }
 body {
  margin: 0px;
  padding: 0px;
  background: #ccc;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: crosshair;
 }
 #SF {
  position: absolute;
  left: 15%;
  top: 15%;
  width: 70%;
  height: 70%;
  overflow: hidden;
  background: #fff;
 }

 #SF img {
  cursor: pointer;
  position: absolute;
 }
 #FPS {
  position: absolute;
  right: 5px;
  bottom: 5px;
  font-size: 10px;
  color: #666;
  font-family: courier;
 }
</style>

<script type="text/javascript">
//

var D  = 150;
var NB = 15;

var o = [];
var xm = 0;
var ym = 0;
var R  = 1 / (D * D);
var fps = 0;
var M = 0;

document.onmousemove = function(e){
 if(window.event) e=window.event;
 tg = (e.target) ? e.target : e.srcElement;
 if(tg.obj){
  xm = tg.obj.x;
  ym = tg.obj.y;
  M = 10;
 } else M = 0;
}

function resize() {
 nx = document.getElementById("SF").offsetWidth;
 ny = document.getElementById("SF").offsetHeight;
}
onresize = resize;

obZ = function() {
 this.x  = Math.random() * nx;
 this.y  = Math.random() * ny;
 this.vx = 0;
 this.vy = 0;
 this.O = new RotImg(this, document.getElementById("SF"), [
  ["p1", 0,0],
  ["p2", 8,-30],
  ["p2", 8,30],
  ["p5", 20,180]
 ]);
}

function RotImg(parent, obj, param){
 this.param = param;
 for(var i in param){
  s = param[i];
  m = document.createElement("img");
  m.src = document.getElementById(s[0]).src;
  m.obj = parent;
  obj.appendChild(m);
  param[i][0] = m;
  param[i][3] = m.width * .5;
  param[i][4] = m.height * .5;
  param[i][2] *= Math.PI/180;
 }
 this.position = function (x,y, angle){
  with (this) {
   for(var i in param){
    a = ( angle + param[i][2]);
    r = param[i][1];
    with(param[i][0].style){
     left = Math.round(-param[i][3] + x + Math.cos(a) * r) + 'px';
     top  = Math.round(-param[i][4] + y + Math.sin(a) * r) + 'px';
    }
   }
  }
 }
}

function mainloop(){
 M--;
 fps++;
 for(var i=0; i<NB; i++){
  with(o[i]){
   for(var j=0; j<NB; j++){
    B = o[j];
    if(i != j){
     dx = x - B.x;
     dy = y - B.y;
     d  = (dx * dx + dy * dy);
     if(d < 2 * D * D){
      w = Math.exp(-(dx * dx * R)) *  Math.exp(-(dy * dy * R));
      // cohesion
      vx -= 1.8 * w * dx;
      vy -= 1.8 * w * dy;
      // avoidance
      if(B.x<x) vx += 100 * w; else vx -= 100 * w;
      if(B.y<y) vy += 100 * w; else vy -= 100 * w;
      // alignment
      b = w * B.vx;
      if(Math.abs(b)>10)b = (b / Math.abs(b)) * 10;
      vx += b;
      b = w * B.vy;
      if(Math.abs(b)>10)b = (b / Math.abs(b)) * 10;
      vy += b;
     }
    }
   }

   if(M > 0){
    dx = x - xm;
    dy = y - ym;
    w = Math.exp(-(dx * dx * R)) *  Math.exp(-(dy * dy * R));
    if(xm < x) ex = w; else ex = -w;
    if(ym < y) ey = w; else ey = -w;
    vx += 100 * NB * ex;
    vy += 100 * NB * ey;
   }

   vx *= .98;
   vy *= .98;
   x += vx / (NB * 100);
   y += vy / (NB * 100);
   if(x > nx + 10) x = -10; else if(x < -10) x = nx + 10;
   if(y > ny + 10) y = -10; else if(y < -10) y = ny + 10;
   O.position(x, y, Math.atan2(vy, vx));
  }
 }
 setTimeout("mainloop();", 1);
}

onload = function(){
 resize();
 xm = 10000;
 ym = 10000;
 for(var i=0; i<NB; i++)o[i] = new obZ()
 mainloop();
 setInterval("document.getElementById('FPS').innerHTML=fps+' fps';fps=0", 1000);
}

</script>
</head>

<body>

<div id="SF"></div>

<div style="visibility: hidden">
 <img id="p1" src="http://www.lanrentuku.com/down/js/images/12476486070.gif">
 <img id="p2" src="http://www.lanrentuku.com/down/js/images/12476486071.gif">
 <img id="p5" src="http://www.lanrentuku.com/down/js/images/12476486072.gif">
</div>

<div id="FPS"></span>

<p>查找更多代码，请访问：<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>

</body>
</html>

转载自原文链接, 如需删除请联系管理员。

原文链接：游来游去的小鱼，转载请注明来源！

赞 0