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 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: 0.1,
  newz: 0
};
var snake_nodes = {
  x: 0,
  y: 0,
  ishead: 0
};
snake.nodes = Array();
snake.length = 100;
snake.size = 30;
snake.newsize = 0;
snake.x = 100 / camera_properties.z;
snake.y = 100 / camera_properties.z;
snake.add = 0;
snake.speed = 10;
snake.skin = new Image();

background.width = screen.width = 3000;
background.height = screen.height = 3000;
setInterval(camera_z_grow, 2000);
setInterval(camera_z_change, 30);
setInterval(snake_grow, 5000);

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 * 10) {
    ctx.beginPath();
    ctx.moveTo(i, 0);
    ctx.lineTo(i, background.height);
    ctx.stroke();
  }
  for (j = 0; j < background.height; j += snake.size * 10) {
    ctx.beginPath();
    ctx.moveTo(0, j);
    ctx.lineTo(background.width, j);
    ctx.stroke();

  }

}


function camera_z_grow() {
  //if (camera_properties.z < 2) return;
  //camera_properties.newz = camera_properties.z + 1;
}

function camera_z_change() {
  if (camera_properties.newz != 0) {
    var difference = camera_properties.newz - camera_properties.z;
    var step = difference / 10;
    camera_properties.z += step;
  }
  if (camera_properties.z == camera_properties.newz) {
    camera_properties.newz = 0;
  }
  if (camera_properties.z > 3) {
    camera_properties.z = 3;
    camera_properties.newz = 0
  }
  if (camera_properties.z < 1) {
   ...