JSFiddle - React, Tailwind, and code Playground

by Nathan Piper

HTML

<canvas id="background" height="500" width="500"></canvas>
<canvas id="game" height="500" width="500"></canvas>

CSS

canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 500px;
    position: absolute;
    top: 0;
    left: 0;
}
#background{
  background: black;
}

JavaScript

function canvas(canvas){
	document.getElementById(canvas).getContext('2d');
}
var bg = canvas("background");
var gg = canvas("game");
var fps = 60;
var width = 500;
var height = 500;

var snake = {
	x: 50,
  y: 50,
  width: 25,
  height: 25,
  draw: function(){
  	gg.fillStyle = "white";
  	gg.fillRect(this.x, this.y, this.width, this.height);
  },
  update: function(){}
}
var food = {
	x: Math.round(Math.random()*width),
  y: Math.round(Math.random()*height),
  width: 25,
  height: 25,
  draw: function(){
  	gg.fillStyle = "red";
  	gg.fillRect(this.x, this.y, this.width, this.height);
  },
  update: function(){}
}


function draw(){
	snake.draw();
  food.draw();
}
function update(){}
setInterval(function(){
	draw();
  update();
}, 1000/fps);