JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<canvas id="game" width="640" height="480"></canvas>

CSS

canvas {
  background-color: rgb(50, 50, 50);
  image-rendering: -moz-crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
}

body {
  background-color: #000
}

JavaScript

let game = document.getElementById('game');
let ctx = game.getContext('2d');
var snow = document.createElement('canvas');
snow.id = 'snow';
snow.width = game.width;
snow.height = game.height;
snow.bins = [];
snow.mass = 0;
snow.massStart = 0;
for (i = 0; i < game.width; i++) {
  snow.bins[i] = Math.floor(Math.sin(6606 + (i / 100)) * 30 + 40);
  snow.massStart += snow.bins[i];
}
stx = snow.getContext('2d');

ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

ctx.fillStyle = 'white';
ctx.font = "20px Arial";
ctx.fillText('snow', 10, 20);

let draw = function() {
  ctx.clearRect(0, 0, game.width, game.height);
  ctx.drawImage(snow, 0, 0);
  for (i = 0; i < grid.points.length; i++) {
    let x = grid.points[i].x;
    let y = grid.points[i].y;
    ctx.fillStyle = 'rgba(255,255,255,0.' + grid.points[i].a + ')';
    ctx.fillRect(x, y, grid.points[i].r, grid.points[i].r);
  }
  ctx.fillStyle = 'white';
  ctx.font = "20px Arial";
  ctx.fillText('specs of fallen snow', 10, 70);
  ctx.font = "40px Arial";
  ctx.fillText(snow.mass, 10, 40);
  window.requestAnimationFrame(draw);
};

//gen

var grid = {};
grid.ready = false;
grid.points = [];
grid.genMax = 100;
grid.stop = 700;
wind = {};
wind.x = 0;
wind.y = 0;
let genSpeck = function() {
  grid.points.push(
    new Vector(
      gri(0, game.width * 2) - game.width / 2,
      gri(0, game.height) - game.height,
      gri(2, 3),
      gri(2, 7)
    )
  );

};
let genSnow = function() {
  if (grid.points.length >= grid.stop) return;
  for (i = 0; i < grid.genMax; i++) {
    genSpeck();
  }
}

genSnow();
draw();

setInterval(function() {
  for (i = 0; i < grid.points.length; i++) {
    if ((grid.points[i].y > game.height) ||
      (grid.points[i].y > game.height - snow.bins[grid.points[i].x])) {
      //snow bin
      if (grid.points[i].x >= 0 && grid.points[i].x < game.width) {
        let d = grid.points[i].y - (game.height -...