JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<canvas id="Canvas" width="720" height="480"></canvas>

CSS

body {
    background:#262626;
    color:white;
    font-family:helvetica, sans-serif;
}
#Canvas {
    background:rgb(10, 10, 10);
    border:solid 2px black;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
}

JavaScript

var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d");
var ch = canvas.height;
var cw = canvas.width;

//Update speed
var speed = 100;
//size of fill cells
var cellWidth = 8;

var maxYpos = ch;
var minYpos = 0;
var maxXpos = cw;
var minXpos = 0;

var gameStat;
var direction;
var snake_array = [];
var Lenght = 5;

var foodPosX;
var foodPosY;

//start the game
function init(){
    if(gameStat === undefined)
        Spawn();
        Update();
}

//get random cordinats
function randPos(randomX, randomY){
	randomX = Math.floor(Math.random()*(maxXpos - minXpos)+minXpos);
	randomY = Math.floor(Math.random()*(maxYpos - minYpos)+minYpos);
	return {x: randomX ,y: randomY};
}

//get random direction (up=1, down=2, left=3, right=4)
function randDir(){
    var randomDir = Math.floor(Math.random()*(5 - 1)+1);
    direction = randomDir;
}

function Spawn(){
	randDir();
	Food();
	Append(randPos().x, randPos().y);
}

function Append(snakeX, snakeY){
    
    //Building snake boddy
    for(var i = Lenght; i >= 0; i--){
        //going upwards
        if(direction == 1) snake_array.push({x: snakeX, y: snakeY - (i*cellWidth)});
        //going downwards
        else if(direction == 2) snake_array.push({x: snakeX, y: snakeY + (i*cellWidth)});
        //going Left
        else if(direction == 3) snake_array.push({x: snakeX + (i*cellWidth), y: snakeY});
        //going Right
        else if(direction == 4) snake_array.push({x: snakeX - (i*cellWidth), y: snakeY});
    }
}
	
function Food(){
	//getting new random food position
	foodPosX = randPos().x;
	//getting new random food position
	foodPosY = randPos().y;
	
	ctx.beginPath();
	ctx.fillRect(foodPosX, foodPosY, cellWidth, cellWidth);
	ctx.fillStyle = 'orange';
	ctx.fill();	
}

function Snake(){
	//moving
	//if(direction);
	//drawing
	ctx.beginPath();
	ctx.fillRect(snake_array[0].x, snake_array[0].y, cellWidth, cellWidth);
	ctx.fillStyle = 'green';
	ctx.fill();
	//if food
	if(snake_array[0].x == foodPosX &...