JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <canvas width ="600" height = "600" id = "canvas"></canvas>
  <script src="scripts.js"></script>
</body>

JavaScript

function Rect(x,y){
	this.x = x;
	this.y = y;
	
	this.color = colorArr[colorNumber];
	if(colorNumber < 6){
		colorNumber ++;
	}else{
		colorNumber = 0;
	}
	this.draw = function(){
		ctx.fillStyle = this.color;
		ctx.fillRect(this.x,this.y,25,25)
	}
}
function rand(max){
  return Math.floor(Math.random() * (max + 1))
}

function event(e){
	e.preventDefault()
	switch(e.keyCode){
		case 37:
			if(direct != "right" && direct != "left"){
				direct = "left";
				document.removeEventListener("keyup", event);
			}
			break;
		case 38:
			if(direct != "down" && direct != "up"){
				direct = "up";
				document.removeEventListener("keyup", event);
			}
			break;
		case 39:
			if(direct != "left" && direct != "right"){
				direct = "right";
				document.removeEventListener("keyup", event);
			}
			break;
		case 40:
			if(direct != "up" && direct != "down"){
				direct = "down";
				document.removeEventListener("keyup", event);
			}
			break;
	}
	
}
function init(){
	colorNumber = 0;
	colorArr = ["#F22D2D", "#F22DBA", "#312DF2", "#2DE2F2", "#31F22D", "#E2F22D", "#F2892D"];
	intervalTime = 200;
	canvas = document.getElementById("canvas");
	ctx = canvas.getContext("2d");
	playerArr = [];
	food = new Rect(25 * rand(15), 25 * rand(15));
	direct = "right";
	
	document.addEventListener("keyup", event)
	
	playerArr.push(new Rect(175,0));
	playerArr.push(new Rect(150,0));
	playerArr.push(new Rect(125,0));
	playerArr.push(new Rect(100,0));
	playerArr.push(new Rect(75,0));
	playerArr.push(new Rect(50,0));
	playerArr.push(new Rect(25,0));
}

function update(){
	for(var i = playerArr.length-1; i > 0; i--){
		playerArr[i].x = playerArr[i - 1].x
		playerArr[i].y = playerArr[i - 1].y
	}
	switch (direct) {
		case "right":
			playerArr[0].x += 25;
			break;
		case "up":
			playerArr[0].y -= 25;
			break;
		case "left":
			playerArr[0].x -= 25;
			break;
		case "down":
			playerArr[0].y += 25
			break
	}
}

function draw(){
	document.removeEventListener("keyup",...