PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

As the Chinese New Year is coming, I wish you all a happy New Year in advance. Give your browser a firework too.

Chrome plugin for page mouse click fireworks effect

Writing in the front

As shown in the image above, a mouse click sends a firework from the bottom of the page that explodes at the click.

The preparatory work

1. Understand how to make browser plug-ins

Chrome extension: Manifest.json file related fields

2. Implementation scheme

Dynamically insert a Canvas element on the web page, make and display firework effect particles through canvas, and trigger firework ray emission combined with mouse click events.

3. Manual manual code

minifest.json

Simply configure all the necessary parameters

{
    "name": "Fireworks Click effects"."version": "1.0.0"."manifest_version": 2."description": "Fireworks Click effects"."browser_action": {
        "default_title": "View"."default_icon": "1.jpg"
    },
    "content_scripts": [{"matches": ["<all_urls>"]."js": ["firework.js"]}],"permissions" : ["tabs"."activeTab"] // Permissions requested from the browser
}
Copy the code

firework.js

1. Create canvas canvas

Insert a Canvas canvas on the page to achieve animation display.

let body = document.getElementsByTagName('body') [0];
let myCanvas = document.createElement('canvas');
myCanvas.id = 'canvas';
myCanvas.style.position = 'fixed';
myCanvas.style.left = '0';
myCanvas.style.top = '0';
body.before(myCanvas);// Before inserts canvas in front of body
body.style.opacity = 0.9;
Copy the code

2. Browser compatibility

This is a Chrome browser plug-in, can be ignored originally, but I still give you to add, can also be separately extracted to the HTML page display

window.requestAnimFrame=(function(){
    return window.requestAnimationFrame||
        window.webkitRequestAnimationFrame||
        window.mozRequestAnimationFrame||
        function(callback){
        window.setTimeout(callback,1000/60)}}) ();Copy the code

3. Create a fireworks object

function Firework(sx,sy,tx,ty){
    this.x=sx;
    this.y=sy;
    this.sx=sx;
    this.sy=sy;
    this.tx=tx;
    this.ty=ty;
    // Calculate the distance between the launch point and the bloom point
    this.distanceToTarget=calculateDistance(sx,sy,tx,ty);
    // Distance of movement
    this.distanceTraveled=0;
    // The generated trajectory
    this.coordinates=[];
    this.coordinateCount=3;
    while(this.coordinateCount--){
        this.coordinates.push([this.x,this.y])
    }
    this.angle=Math.atan2(ty-sy,tx-sx);
    this.speed=2;
    this.acceleration=1.05;
    this.brightness=random(50.70);// The brightness of the fireworks
    this.targetRadius=1// The radius of the wreath
}
Copy the code

4, update the location of fireworks

Firework.prototype.update=function(index){
    this.coordinates.pop();
    this.coordinates.unshift([this.x,this.y]);
    if(this.targetRadius<8) {this.targetRadius+=0.3
    }else{
        this.targetRadius=1
    }
    this.speed*=this.acceleration;
    var vx=Math.cos(this.angle)*this.speed,
        vy=Math.sin(this.angle)*this.speed;
    this.distanceTraveled=calculateDistance(this.sx,this.sy,this.x+vx,this.y+vy);
    // If the distance of the firework is greater than or equal to the distance between the initial position and the target position, a new firework is generated and the current firework is removed, otherwise the firework position is updated
    if(this.distanceTraveled>=this.distanceToTarget){
        // Fireworks burst
        createParticles(this.tx,this.ty);
        // Destroy the fireworks
        fireworks.splice(index,1)}else{
        this.x+=vx;this.y+=vy
    }
};
Copy the code

5, fireworks ray emission effect

Firework.prototype.draw=function(){
    // Start a new path, clearing all previous paths
    ctx.beginPath();
    // Save a coordinate
    ctx.moveTo(this.coordinates[this.coordinates.length-1] [0].this.coordinates[this.coordinates.length-1] [1]);
    // Draw from the coordinates provided by moveTo to the specified coordinates
    ctx.lineTo(this.x,this.y);
    // Set the line style
    ctx.strokeStyle="hsl("+hue+"100%,"+this.brightness+"%)";
    // Use this function to draw the above graphics onto the canvas
    ctx.stroke();
    ctx.beginPath();
    // Draw the mouse click circle
    // Arc (center of the circle x coordinate, center of the circle y coordinate, radius of the circle, starting Angle (in radians, l center of the circle at 3 o 'clock is 0 degrees), ending Angle, specify whether to draw clockwise or counterclockwise (optional))
    ctx.arc(this.tx,this.ty,this.targetRadius,0.Math.PI*2);
    // Stroke draw
    ctx.stroke()
};
Copy the code

6. Definition of fireworks particle bloom method

function Particle(x,y){
    this.x=x;this.y=y;this.coordinates=[];
    this.coordinateCount=5;
    while(this.coordinateCount--){
        this.coordinates.push([this.x,this.y])
    }
    // Bloom in all directions
    this.angle=random(0.Math.PI*2);
    this.speed=random(1.10);
    this.friction=0.95;
    this.gravity=1;
    this.hue=random(hue-20,hue+20);
    this.brightness=random(50.80);
    this.alpha=1;
    this.decay=random(0.015.0.03);// Particle disappear time (transparency increases speed)
}
Copy the code

Fireworks particles bloom

// Fireworks burst
Particle.prototype.draw=function(){
    ctx.beginPath();
    ctx.moveTo(this.coordinates[this.coordinates.length-1] [0].this.coordinates[this.coordinates.length-1] [1]);
    ctx.lineTo(this.x,this.y);
    // The color of the fireworks
    ctx.strokeStyle="hsla("+this.hue+"100%,"+this.brightness+"%."+this.alpha+")";
    ctx.stroke()
};
Copy the code

8. Complete code

let body = document.getElementsByTagName('body') [0];
let myCanvas = document.createElement('canvas');
myCanvas.id = 'canvas';
myCanvas.style.position = 'fixed';
myCanvas.style.left = '0';
myCanvas.style.top = '0';
body.before(myCanvas);// Before inserts canvas in front of body
body.style.opacity = 0.9;
// body.appendChild(myCanvas);

//requestAnimFrame package, compatible with all browsers
window.requestAnimFrame=(function(){
	return window.requestAnimationFrame||
		window.webkitRequestAnimationFrame||
		window.mozRequestAnimationFrame||
		function(callback){
			window.setTimeout(callback,1000/60)}}) ();var canvas=document.getElementById("canvas"),
		// canvas.getContext (contextID) returns an environment used to draw on the Canvas;
		// contextID is only "2d", i.e. 2d drawing
		ctx=canvas.getContext("2d"),
		// Get the width of the viewable area of the computer
		cw=window.innerWidth,ch=window.innerHeight,
		fireworks=[],// Store the fireworks array
		particles=[],// Store an array of blooming particles
		hue=180.// Set the color range
		limiterTotal=5.// Click bloom speed
		limiterTick=0.// Click the timer
		timerTotal=40.// Auto bloom speed
		timerTick=0.// Automatic timer
		mousedown=false,
		mx,my;
		// Set the canvas width and heightcanvas.width=cw; canvas.height=ch;// random function
	function random(min,max){
		return Math.random()*(max-min)+min
		}
		// Calculate the distance between two points
	function calculateDistance(p1x,p1y,p2x,p2y){
		var xDistance=p1x-p2x,yDistance=p1y-p2y;return Math.sqrt(Math.pow(xDistance,2) +Math.pow(yDistance,2))}// Define the firework object
	function Firework(sx,sy,tx,ty){
		this.x=sx;
		this.y=sy;
		this.sx=sx;
		this.sy=sy;
		this.tx=tx;
		this.ty=ty;
		this.distanceToTarget=calculateDistance(sx,sy,tx,ty);
		// Distance of movement
		this.distanceTraveled=0;
		// The generated trajectory
		this.coordinates=[];
		this.coordinateCount=3;
		while(this.coordinateCount--){
			this.coordinates.push([this.x,this.y])
			}
		this.angle=Math.atan2(ty-sy,tx-sx);
		this.speed=2;
		this.acceleration=1.05;
		this.brightness=random(50.70);// The brightness of the fireworks
		this.targetRadius=1// The radius of the wreath
		}
		// Update the firework location
	Firework.prototype.update=function(index){
		this.coordinates.pop();
		this.coordinates.unshift([this.x,this.y]);
		if(this.targetRadius<8) {this.targetRadius+=0.3
			}else{
				this.targetRadius=1
				}
		this.speed*=this.acceleration;
		var vx=Math.cos(this.angle)*this.speed,
			vy=Math.sin(this.angle)*this.speed;
		this.distanceTraveled=calculateDistance(this.sx,this.sy,this.x+vx,this.y+vy);
		 // If the distance of the firework is greater than or equal to the distance between the initial position and the target position, a new firework is generated and the current firework is removed, otherwise the firework position is updated
		if(this.distanceTraveled>=this.distanceToTarget){
			// Fireworks burst
			createParticles(this.tx,this.ty);
			// Destroy the fireworks
			fireworks.splice(index,1)}else{
				this.x+=vx;this.y+=vy
				}
			};
	// Fireworks emit rays
	Firework.prototype.draw=function(){
		// Start a new path, clearing all previous paths
		ctx.beginPath();
		// Save a coordinate
		ctx.moveTo(this.coordinates[this.coordinates.length-1] [0].this.coordinates[this.coordinates.length-1] [1]);
		// Draw from the coordinates provided by moveTo to the specified coordinates
		ctx.lineTo(this.x,this.y);
		// Set the line style
		ctx.strokeStyle="hsl("+hue+"100%,"+this.brightness+"%)";
		// Use this function to draw the above graphics onto the canvas
		ctx.stroke();
		ctx.beginPath();
		// Draw the mouse click circle
		// Arc (center of the circle x coordinate, center of the circle y coordinate, radius of the circle, starting Angle (in radians, l center of the circle at 3 o 'clock is 0 degrees), ending Angle, specify whether to draw clockwise or counterclockwise (optional))
		ctx.arc(this.tx,this.ty,this.targetRadius,0.Math.PI*2);
		// Stroke draw
		ctx.stroke()
		};
	// Fireworks display method
	function Particle(x,y){
		this.x=x;this.y=y;this.coordinates=[];
		this.coordinateCount=5;
		while(this.coordinateCount--){
			this.coordinates.push([this.x,this.y])
			}
		// Bloom in all directions
		this.angle=random(0.Math.PI*2);
		this.speed=random(1.10);
		this.friction=0.95;
		this.gravity=1;
		this.hue=random(hue-20,hue+20);
		this.brightness=random(50.80);
		this.alpha=1;
		this.decay=random(0.015.0.03);// Particle disappear time (transparency increases speed)
		}
	Particle.prototype.update=function(index){
		this.coordinates.pop();
		this.coordinates.unshift([this.x,this.y]);
		// Particle motion
		this.speed*=this.friction;
		this.x+=Math.cos(this.angle)*this.speed;
		this.y+=Math.sin(this.angle)*this.speed+this.gravity;
		this.alpha-=this.decay;// Transparency is increased
		if(this.alpha<=this.decay){
			particles.splice(index,1)// Destroy fireworks particles}};// Fireworks burst
	Particle.prototype.draw=function(){
		ctx.beginPath();
		ctx.moveTo(this.coordinates[this.coordinates.length-1] [0].this.coordinates[this.coordinates.length-1] [1]);
		ctx.lineTo(this.x,this.y);
		// The color of the fireworks
		ctx.strokeStyle="hsla("+this.hue+"100%,"+this.brightness+"%."+this.alpha+")";
		ctx.stroke()
		};
	// Create a particle
	function createParticles(x,y){
		// The number of particles in the fireworks
		var particleCount=200;
		while(particleCount--){
			particles.push(new Particle(x,y))
			}
		}
	function loop(){
		 // Let the browser loop through the specified function to update the animation.
		requestAnimFrame(loop);
		hue+=0.5;
		ctx.globalCompositeOperation="destination-out";
		ctx.fillStyle="Rgba (0, 0, 0, 0.5)";
		ctx.fillRect(0.0,cw,ch);
		ctx.globalCompositeOperation="lighter";
		var i=fireworks.length;
		while(i--){
			fireworks[i].draw();
			fireworks[i].update(i)
			}
		var i=particles.length;
		while(i--){
			particles[i].draw();
			particles[i].update(i)
			}
		// Select the position randomly
		if(timerTick>=timerTotal){
			// The mouse is not clicked
			if(! mousedown){// fireworks.push(new Firework(cw/2,ch,random(0,cw),random(0,ch/2)));
				timerTick=0}}else{
				timerTick++
			}
		// Mouse click position
		if(limiterTick>=limiterTotal){
			if(mousedown){
				fireworks.push(new Firework(cw/2,ch,mx,my));
				limiterTick=0}}else{
				limiterTick++
			}
		}
	body.addEventListener("mousemove".function(e){
		mx=e.pageX-body.offsetLeft - window.scrollX;// Mouse click coordinates - body offset - window scroll distance
		my=e.pageY-body.offsetTop - window.scrollY;// Mouse click coordinates - body offset - window scroll distance
		});
	body.addEventListener("mousedown".function(e){
		// e.preventDefault();
		mousedown=true
		});
	body.addEventListener("mouseup".function(e){
		// e.preventDefault();
		mousedown=false
		});
	window.onload=loop;
Copy the code

Add a plugin to Chrome

(1) Download the code locally

Gitee: [gitee.com/zheng_yongt…]

[img- 50uqfooz-1641831055753] [img- 50uqfooz-1641831055753] [G: Gitee warehouse mD-document warehouse blog image browser click fireworks effect. JPG]

As shown in the image above, you can circle the project directory of this plugin. Just pull the Chrome-FireworkClick folder into the Chrome Extension Management folder. If you like, you can click on a star.

More plug-in

Browser Background skin plug-in Desktop widget animation plug-in Website-b video comment mask plug-in Set website-B video as the browser background

The source code

Code Cloud (Gitee) : gitee.com/zheng_yongt…

GitHub:github.com/yongtaozhen…

Download resources

CSDN resource download