JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<canvas id=canvas width=550px height=550px style="">
</canvas>

CSS

body {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

canvas {
  position: absolute;
  top: 0px;
  left: 0px;
}

JavaScript

//snake game

var debug_msg = '';
var fps = 0;
var msf = 0; //miliseconds per frame render time
var msfa = 0; // total miliseconds per 1 second render time / fps;
var mX = 0;
var mY = 0;
var canvas = document.getElementById('canvas');
var camera = canvas.getContext('2d');
var screen = document.createElement('canvas');
var screenContext = screen.getContext('2d');
var background = document.createElement('canvas');
var ticks_snake_move = 0;
var snake = [];
var camera_properties = {
  x: 0,
  y: 0,
  z: 1,
  newz: 0
};

var snake_nodes = {
  x: 0,
  y: 0,
  ishead: 0
};
snake.nodes = Array();
snake.length = 4; // min start length 4
snake.size = 10;
snake.newsize = 0;
snake.color = '0,255,0';
snake.x = 300 * camera_properties.z;
snake.y = 300 * camera_properties.z;
snake.add = 0;
snake.speed = 4;
snake.skin = new Image();
snake.skin.src = 'https://i.imgur.com/A7agXQt.png';
screen.width = 3000;
screen.height = 3000;
background.width = 1000;
background.height = 1000;

setInterval(camera_z_grow, 2000);
setInterval(camera_z_change, 30);
setInterval(snake_grow, 5000);
setInterval(function() {
  debug_msg = `
  x: ${(snake.nodes[0].x).toPrecision(6)}
  y: ${(snake.nodes[0].y).toPrecision(6)}
  ${fps.toPrecision(2)} fps.
  ${(msfa / fps).toPrecision(2)} ms/frame avg.`;
  fps = 0;
  msfa = 0;
}, 1000);
setInterval(function() {
  snake_move();
}, 32);
setTimeout(function() {
  snake.add = 20;
}, 10);

function background_do_lines() {
  var ctx = background.getContext('2d');
  ctx.strokeStyle = 'rgba(255,100,100,0.2)';
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.rect(0, 0, background.width, background.height);
  ctx.fillStyle = 'rgba(100,200,200,0.2)';
  ctx.fill();
  for (i = 0; i < background.width; i += snake.size * 3) {
    ctx.beginPath();
    ctx.moveTo(i, 0);
    ctx.lineTo(i, background.height);
    ctx.stroke();
  }
  for (j = 0; j < background.height; j += snake.size * 3) {
    ctx.beginPath();
    ctx.moveTo(0, j);
    ctx.lineTo(background.width, j);
   ...