JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" style="border:3px solid #0000FF; width:170px;height:170px;" width="170" height="170"></canvas>
<span id="test"></span>

JavaScript

var canvas = document.getElementById("canvas");
var ctx =canvas.getContext("2d");

var direction=1;
var keys = [];

document.onkeydown = function(e){
	keys[e.keyCode]=true;
};
document.onkeyup = function(e){
	keys[e.keyCode]=false;
};

var player = {
	x:80,
	y:80,
	roundedX:0,
	roundedY:0,
	timer:0,
	timerReverse:false
};
var ghosts = [[0,0],[0,0],[0,0],[0,0]];
var grid = [
	[0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0],
	[0,1,1,0,1,1,1,0,1,0,1,1,1,0,1,1,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,1,1,0,1,0,1,1,1,1,1,0,1,0,1,1,0],
	[0,0,0,0,1,0,0,0,1,0,0,0,1,0,0,0,0],
	[1,1,1,0,1,1,1,0,1,0,1,1,1,0,1,1,1],
	[1,1,1,0,1,0,0,0,0,0,0,0,1,0,1,1,1],
	[0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0],
	[1,1,1,0,1,0,0,0,0,0,0,0,1,0,1,1,1],
	[1,1,1,0,1,0,1,1,1,1,1,0,1,0,1,1,1],
	[0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0],
	[0,1,1,0,1,1,1,0,1,0,1,1,1,0,1,1,0],
	[0,0,1,0,0,0,0,0,0,0,0,0,0,0,1,0,0],
	[1,0,1,0,1,0,1,1,1,1,1,0,1,0,1,0,1],
	[0,0,0,0,1,0,0,0,1,0,0,0,1,0,0,0,0],
	[0,1,1,1,1,1,1,0,1,0,1,1,1,1,1,1,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
];
function main(){
  if(keys[37]){
  	direction=3;
  } else if(keys[38]){
  	direction=0;
  } else if(keys[39]){
  	direction=1;
  } else if(keys[40]){
  	direction=2;
  }
	ctx.clearRect(0,0,170,170);
	ctx.fillStyle="#000000";
	ctx.fillRect(0,0,170,170);
	//Draw grid
	for(var i=0;i<grid.length;i++){
		for(var j=0;j<grid[i].length;j++){
			if(grid[i][j]==1){
				ctx.fillStyle="#0000FF";
				ctx.fillRect(j*10,i*10,10,10);
			} else if(grid[i][j]==0){
				ctx.beginPath();
				ctx.arc(j*10+5,i*10+5,1.5,0,2*Math.PI);
				ctx.fillStyle="#FFFFFF";
				ctx.fill();
			}
		}
	}
  drawPac();
	player.timer+=player.timerReverse?-0.02:0.02;
	if(player.timer>=0.99||player.timer<=0.01){
		player.timerReverse=!player.timerReverse;
	}
	player.roundedX=Math.floor((player.x+5)/10);
	player.roundedY=Math.floor((player.y+5)/10);
  /* Show a red target at the player's rounded coords, used for debugging...