JSFiddle - React, Tailwind, and code Playground

by rbrousla

HTML

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="640" height="640" style="border:1px solid #000000;"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
    </script>
<script src="snake_core.js"></script>

  </body>
</html>

JavaScript

window.addEventListener("keydown", moveSnake, false);
var game_over = false;
var snake = new Array(4);
var snakeLen = 4;
var dir = "right";
var food = "";
var level = new Array();
var total_height = 640;
var total_width = 640;
var lvl_width = 20;
var lvl_height = 20;
var speed = 16;

snakeHeadImage = new Image();
snakeHeadImage.src = "resources/head.png";
snakeBodyImage = new Image();
snakeBodyImage.src = "resources/body.png";
snakeTailImage = new Image();
snakeTailImage.src = "resources/tail.png";

//food
foodImage = new Image();
foodImage.src = "resources/food.png";

create_snake();
create_food();

for(i = 0; i < lvl_width; i++)
{
	level[i] = new Array(lvl_height);
	for(var ii = 0; ii < lvl_height; ii++)
	{
		level[i][ii] = -1;
	}
}

window.requestAnimFrame = (function(callback) 
{
	return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
	function(callback) 
	{
		window.setTimeout(callback, 1000);
	};
})();


var the_date = new Date();
var test1 = the_date.getTime();
var stamp = the_date.getTime() + 250;

function animate() 
{
	the_date = new Date();
	test1 = the_date.getTime();
	if(stamp <= test1)
	{
		move_snake();
		the_date = new Date();
		stamp = the_date.getTime() + 250;
	}
	if(game_over == false)
	{
		// clear
		context.clearRect(0, 0, canvas.width, canvas.height);
		displayText("Score: " + (snakeLen - 4));
		display();
	}
	else
	{
		displayText("You so Sux.. Game Over homie");
	}
	//context.drawImage(aniblock, aniblock_x, aniblock_y); 

	// request new frame
	requestAnimFrame(function()
	{
	  animate();
	});
} 

function displayText(what)
{
	context.font = "30px Arial";
	context.fillText(what, 50, 50);
}

function checkSnakeCollide()
{
	if( snake[0].xx == food.xx && snake[0].yy == food.yy )
	{
		create_food();
		return true;
	}
	else
	{
		//if head moving right
		if(dir == "right")
		{
			if(snake[0].xx > lvl_width -...