【烟花代码】,情人节,情侣生日礼物代码适用

【烟花代码】,情人节,情侣生日礼物代码适用

【烟花代码】,情人节,情侣生日礼物代码适用

老规矩,先上效果图
在这里插入图片描述
图片做了加速处理,放樱花的位置,速度完全由点击控制。

1初始化粒子系统

	var Particle = function(x, y, hue){
   
		this.x = x;
		this.y = y;
		this.coordLast = [
			{
   x: x, y: y},
			{
   x: x, y: y},
			{
   x: x, y: y}
		];
		this.angle = rand(0, 360);
		this.speed = rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed + self.partSpeedVariance));
		this.friction = 1 - self.partFriction/100;
		this.gravity = self.partGravity/2;
		this.hue = rand(hue-self.hueVariance, hue+self.hueVariance);
		this.brightness = rand(50, 80);
		this.alpha = rand(40,100)/100;
		this.decay = rand(10, 50)/1000;
		this.wind = (rand(0, self.partWind) - (self.partWind/2))/25;
		this.lineWidth = self.lineWidth;
	};

2粒子系统的更新

	Particle.prototype.update = function(index){
   
		var radians = this.angle * Math.PI / 180;
		var vx = Math.cos(radians) * this.speed;
		var vy = Math.sin(radians) * this.speed + this.gravity;
		this.speed *= this.friction;
						
		this.coordLast[2].x = this.coordLast[1].x;
		this.coordLast[2].y = this.coordLast[1].y;
		this.coordLast[1].x = this.coordLast[0].x;
		this.coordLast[1].y = this.coordLast[0].y;
		this.coordLast[0].x = this.x;
		this.coordLast[0].y = this.y;
		
		this.x += vx * self.dt;
		this.y += vy * self.dt;
		
		this.angle += this.wind;				
		this.alpha -= this.decay;
		
		if(!hitTest(0,0,self.cw,self.ch,this.x-this.radius, this.y-this.radius, this.radius*2, this.radius*2) || this.alpha < .05){
   					
			self.particles.splice(index, 1);	
		}			
	};

3粒子系统的画图

	Particle.prototype.draw = function(){
   
		var coordRand = (rand(1,3)-1);
		self.ctx.beginPath();								
		self.ctx.moveTo(Math.round(this.coordLast[coordRand].x), Math.round(this.coordLast[coordRand].y));
		self.ctx.lineTo(Math.round(this.x), Math.round(this.y));
		self.ctx.closePath();				
		self.ctx.strokeStyle = 'hsla('+this.hue+', 100%, '+this.brightness+'%, '+this.alpha+')';
		self.ctx.stroke();				
		
		if(self.flickerDensity > 0){
   
			var inverseDensity = 50 - self.flickerDensity;					
			if(rand(0, inverseDensity) === inverseDensity){
   
				self.ctx.beginPath();
				self.ctx.arc(Math.round(this.x), Math.round(this.y), rand(this.lineWidth,this.lineWidth+3)/2, 0, Math.PI*2, false)
				self.ctx.closePath();
				var randAlpha = rand(50,100)/100;
				self.ctx.fillStyle = 'hsla('+this.hue+', 100%, '+this.brightness+'%, '+randAlpha+')';
				self.ctx.fill();
			}	
		}
	};

4创建烟花例子

self.createParticles = function(x,y, hue){
   
	var countdown = self.partCount;
	while(countdown--){
   						
		self.particles.push(new Particle(x, y, hue));
	}
};

5绑定鼠标时间,mousedown,mouseup

	self.bindEvents = function(){
   
		$(window).on('resize', function(){
   			
			clearTimeout(self.timeout);
			self.timeout = setTimeout(function() {
   
				self.ctx.lineCap = 'round';
				self.ctx.lineJoin = 'round';
			}, 100);
		});
		
		$(self.canvas).on('mousedown', function(e){
   
			var randLaunch = rand(0, 5);
			self.mx = e.pageX - self.canvasContainer.offset().left;
			self.my = e.pageY - self.canvasContainer.offset().top;
			self.currentHue = rand(self.hueMin, self.hueMax);
			self.createFireworks(self.cw/2, self.ch, self.mx, self.my);	
			
			$(self.canvas).on('mousemove.fireworks', function(e){
   
				var randLaunch = rand(0, 5);
				self.mx = e.pageX - self.canvasContainer.offset().left;
				self.my = e.pageY - self.canvasContainer.offset().top;
				self.currentHue = rand(self.hueMin, self.hueMax);
				self.createFireworks(self.cw/2, self.ch, self.mx, self.my);									
			});	
			
		});
		
		$(self.canvas).on('mouseup', function(e){
   
			$(self.canvas).off('mousemove.fireworks');									
		});
					
	}

有想要完整源码的小伙伴可以加我,q:2316773638

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/2861.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 黑盒测试 因果图_黑盒测试的六种方法

    黑盒测试 因果图_黑盒测试的六种方法在一个功能模块中往往含有许多的功能模块,如果单独去测试每一个模块则会显得事倍功半,并且逻辑也会比较混乱,容易遗漏一些数据。因果图法是一个比较有用的方法,其考虑到了输入数据之间以及输入与输出之间的各种关系。一、下面首先介绍因果图中的基本符号 1、恒等含义:若原因出现则结果也出现,原因不出现,结果也不出现。即:如a=1.则b=1; a=0,则b=0。2、非(~)含

  • VIM技巧

    VIM技巧

  • 基于SQL的日志分析工具myselect

    基于SQL的日志分析工具myselect

    2021年11月29日
  • vue删除数组中某一元素_数组索引超出范围

    vue删除数组中某一元素_数组索引超出范围在前端开发中,我们经常需要对数组进行操作,增删改是经常的事情,那我们js中该如何删除指定的下标元素呢????我们用splice来操作1.定义和用法splice()方法用于添加或删除数组中的元素。注意:这种方法会改变原始数组。数组中添加新元素:varfruits=[“Banana”,”Orange”,”Apple”,”Mango”];fruits.splice(2,0,”Lemon”,”Kiwi”);fruits输出结果:Banana,Orange,Le.

  • LNMP状态管理命令

    LNMP状态管理命令

  • 什么是虚拟机?什么是Java虚拟机?

    什么是虚拟机?什么是Java虚拟机?什么是虚拟机?什么是Java虚拟机?虚拟机介绍虚拟机,就是虚拟的计算机,可以执行一系列虚拟计算机指令,大体上可以分为系统虚拟机和程序虚拟机。它们运行时,都会受到虚拟机提供的资源的限制。系统虚拟机:仿真模拟系统的,比如VisualBox,VMware。程序虚拟机:为执行单个计算机程序设计的,比如Java虚拟机。JAVA虚拟机Java虚拟机是一台执行字节码的虚拟机计算机,但是字节码不一定是由Java语言编译而成。只要使用这一套虚拟机规则的语言,就可以享受到跨平台,垃圾收集以及可靠的即时编译器

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号