JSFiddle - React, Tailwind, and code Playground
HTML
<center><br><br><br><br><br><br><br>IMAPO.RU</center>
<canvas id="game"></canvas>
CSS
body {
overflow:hidden;
}
#game {
position:fixed;
top:0px;
left:0px;
z-index:-1;
}
JavaScript
//The class we will use to store particles. It includes x and y
//coordinates, horizontal and vertical speed, and how long it's
//been "alive" for.
function resizeCanvas() {
setTimeout(function() {
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
canvas.style.width = width + "px";
canvas.style.height = height + "px";
mouseX=canvas.width/2;
mouseY=canvas.height*0.8;
stage.globalCompositeOperation="lighter"
}, 0);
}
function init() {
//Reference to the HTML element
canvas=document.getElementById("game");
resizeCanvas();
//See if the browser supports canvas
if (canvas.getContext) {
//Get the canvas context to draw onto
stage = canvas.getContext("2d");
//Makes the colors add onto each other, producing
//that nice white in the middle of the fire
stage.globalCompositeOperation="xor";
//Update the mouse position
canvas.addEventListener("mousemove", getMousePos);
window.addEventListener("resize", function() {
resizeCanvas();
stage.globalCompositeOperation="lighter";
mouseX=canvas.width/2;
mouseY=canvas.height*0.8;
});
//Update the particles every frame
var timer=setInterval(update,40);
} else {
alert("Canvas not supported.");
}
}
function getMousePos (evt) {
var rect = canvas.getBoundingClientRect();
var root = document.documentElement;
// return mouse position relative to the canvas
mouseX = evt.clientX - rect.left - root.scrollLeft;
mouseY = evt.clientY - rect.top - root.scrollTop;
}
function update() {
//Adds ten new particles every frame
for (var i=0; i<10; i++) {
//Adds a particle at the mouse position, with random horizontal and vertical speeds
var p = new Particle(mouseX, mouseY, (Math.random()*2*speed-speed)/2, 0-Math.random()*2*speed);
particles.push(p);
}
//Clear the stage so we can draw the new frame
...