JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<center><br><br><br><br><br><br><br>APO-UCOZ.COM</center>

<canvas id="game"></canvas>

CSS

body {
    overflow:hidden;
}

#game { 
position:fixed; 
top:0px; 
left:0px; 
z-index:-1; 
}

JavaScript

var canvas;
var stage;
var width = 650;
var height = 400;
var particles = [];
var max = 60;
var mouseX=0;
var mouseY=0;

var speed=3;
var size=20;

//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 Particle(x, y, xs, ys) {
  this.x=x;
  this.y=y;
  this.xs=xs;
  this.ys=ys;
  this.life=0;
}

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