js用类的方法写萤火虫和组合创建的方法写萤火虫

本文介绍了一种使用HTML、CSS和JavaScript实现萤火虫动画效果的两种方法。一种是通过面向对象的类方法,另一种是组合创建法。文章详细解释了如何创建萤火虫对象,设置随机位置,以及如何使萤火虫在页面上飞行。

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

在这里插入图片描述在这里插入图片描述
上面两张为素材图

方法一:类的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			html{
				height: 100%;
			}
			body{
				margin: 0;
				padding: 0;
				height:100%;
				background: url(img/bg.jpg) no-repeat;
				background-size: cover;
			}
			
			img{
				/*display: block;*/
				position: absolute;
				width: 20px;
				height:auto;
				}
		</style>
	</head>
	<body>
		<!--<img src="img/1.jpg"/>-->
		<script src="js/startMove.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//面向对象   类的创建方法
			class Fireworm{
				constructor(){
					this.oImg = document.createElement("img");
					this.oImg.src = "img/1.jpg";
				}
				//取随机位置
				pos(){
					var cw = document.documentElement.clientWidth;
					var ch = document.documentElement.clientHeight;
					
					this.posx = Math.floor(Math.random()*(cw - 20));
					this.posy = Math.floor(Math.random()*(ch - 20));
				}
				//萤火虫显示
				show(){
					//调用位置
					this.pos();
					
					document.body.appendChild(this.oImg);
					this.oImg.style.left = this.posx + "px";
					this.oImg.style.top = this.posy + "px";
				}
				//萤火虫飞
				fly(){
					//再去获取下位置,保证和当前位置不一样
					this.pos();
					//调用startMove函数来控制萤火虫的运动
					startMove(this.oImg,{left:this.posx,top:this.posy},()=>{
						this.fly();
					})
				}
			}
			for(let i = 0;i < 50;i++){//控制萤火虫的个数
				var fireworm = new Fireworm();
				fireworm.show();
				fireworm.fly();
			}
		</script>
	</body>
</html>

方法二:组合创建法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			html{
				height: 100%;
			}
			body{
				margin: 0;
				padding: 0;
				height:100%;
				background: url(img/bg.jpg) no-repeat;
				background-size: cover;
			}
			
			img{
				/*display: block;*/
				position: absolute;
				width: 20px;
				height:auto;
				}
		</style>
	</head>
	<body>
		<script src="js/startMove.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//面向对象   组合创建法
			function Fireworm(){
				this.oImg = document.createElement("img");
				this.oImg.src = "img/1.jpg";
			}
			//获取随机位置
			Fireworm.prototype.getranPos = function(){
				//获取可视区域宽高
				var cw = document.documentElement.clientWidth;
				var ch = document.documentElement.clientHeight;
				//获取萤火虫的出现位置
				this.posx = Math.floor(Math.random()*(cw - 20));
				this.posy = Math.floor(Math.random()*(ch - 20));
			}
			//萤火虫展示出来
			Fireworm.prototype.show = function(){
				//展示出第一次的位置
				this.getranPos();
				
				document.body.appendChild(this.oImg)
				this.oImg.style.left = this.posx + "px";
				this.oImg.style.top = this.posy + "px";
			}
			//萤火虫飞
			Fireworm.prototype.fly = function(){
				//再获取下位置,保证两次位置不一样
				this.getranPos();
				//调用运动函数startMove
				startMove(this.oImg,{left:this.posx,top:this.posy},()=>{
					this.fly();
				})
			}
			for(var i = 0;i < 30;i++){//控制萤火虫的个数
				var fireworm = new Fireworm();
				fireworm.show();
				fireworm.fly();
			}
		</script>
	</body>
</html>
Matlab代码实现萤火虫算法: %===========初始化值================== n=30;%萤火虫个数 t=20;%迭代次数 bestx=zeros(1,t+1);%记录最优解 bestf=zeros(1,t+1); alpha=0.8;%步长 gamma=1;%吸引度系数 beta0=2;%初始亮度 beta=ones(1,n)*beta0;%萤火虫的亮度,即函数值 xmin=-10; xmax=10;%定义随机解的范围 x=rand(n,2)*(xmax-xmin)+xmin;%随机解 y=f(x(:,1),x(:,2));%计算函数值 %=========求最优解=============== [bestf(1),i]=min(y); bestx(1,:)=x(i,:); %=============循环================= for k=1:t %迭代次数 %=======每个萤火虫对应运动======== for i=1:n %对于每个萤火虫 xi_repeat=repmat(x(i,:),n,1); %重复生成n行x(i,:) (相当于复制) yi=f(x(i,1),x(i,2)); %计算个体亮度 for j=1:n %萤火虫的互相交流 if yi>b(j) %如果个体亮度大于其他萤火虫的亮度 rij=(sum((xi_repeat-x).^2,2)).^0.5; %计算与其他萤火虫ij之间的距离 nearby_catch=beta(i)*exp(-gamma*rij); %计算捕捉概率 dx=(x(j,:)-x(i,:))*alpha*nearby_catch; %计算利用方程 x(i,:)=x(i,:)+dx;%更新当前解 y(i)=f(x(i,1),x(i,2));%计算函数值 end end end [bf,i]=min(y); bestf(k+1)=bf; bestx(k+1,:)=x(i,:); end%循环结束 %=====结果展示============== y bestf bestx figure(1) plot(bestf);grid title('函数值对迭代次数的变化趋势') xlabel('迭代次数') ylabel('函数值') figure(2) ezcontourf('x^2+y^2-20*cos(2*pi*x)-20*cos(2*pi*y)+40',[-10,10],50) %绘制等高线 hold on for i=1:n plot(x(i,1),x(i,2),'r*') end hold off grid title('函数图像及初始解')
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值