鼠标事件之游来游去的小鱼

最新推荐文章于 2023-12-09 20:58:42 发布

yw1688

最新推荐文章于 2023-12-09 20:58:42 发布

阅读量688

点赞数

分类专栏： Javascript

Javascript 专栏收录该内容

102 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的粒子系统动画，通过鼠标交互动态生成粒子，并利用多种物理算法模拟粒子间的相互作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>