Executando verificação de segurança...
-3
RodrigoSchio
3 min de leitura ·

É possível corrigir o código ?

É possível corrigir o código que eu escrevi ?

<!doctype html>
<html>
<title>::..</title>
<meta name=viewport content='width=device-width'>
<style>
@keyframes entrada0{from{transform:rotateX(90deg);}to{transform:rotateX(0deg);}}
@keyframes entrada1{from{transform:rotateY(90deg);}to{transform:rotateY(0deg);}}
@keyframes entrada2{from{scale:.1;}to{scale:1;}}
@keyframes entrada3{0%{opacity:0;}40%{opacity:1;}70%{opacity:0;}100%{opacity:1;}}
@keyframes entrada4{from{margin-right:800px;transform:rotateZ(170deg);}to{margin-right:0px;transform:rotateZ(0deg);}}
@keyframes entrada5{from{margin-left:800px;transform:rotateZ(190deg);}to{margin-left:0px;transform:rotateZ(360deg);}}
@keyframes entrada6{from{scale:.3;transform:rotateZ(170deg);}to{scale:1;transform:rotateY(0deg);}}
@keyframes entrada7{from{scale:.3;transform:rotateZ(190deg);}to{scale:1;transform:rotateY(360deg);}}
</style>
<body style='overflow:hidden; background-color:#878787; margin:0px; height:100vh; display:flex; align-items:center; justify-content:center;' onKeyDown="vira(event.keyCode);" onKeyUp="para();" onhashchange="tempo=0;inicia();">
</body>
<script>
fatorx=[9,8,7,6,5,4,3,2,1,0,-1,-2,-3,-4,-5,-6,-7,-8,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8];
fatory=[0,-1,-2,-3,-4,-5,-6,-7,-8,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,8,7,6,5,4,3,2,1];
pistas=[
[[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,0,0,0,0],[0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0],[0,0,0,0,4,4,4,4,4,4,2,0,4,4,4,4,4,4,1,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,2,0,1,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,2,3,3,3,3,0,1,3,3,3,3,0,0,0,0,0,0],[0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0],[0,0,0,0,0,0,4,4,4,4,2,0,4,4,4,4,1,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,2,0,1,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,2,3,3,0,1,3,3,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,2,0,0,0,0,0,1,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,4,4,2,0,4,4,1,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,2,0,1,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,2,3,3,3,3,3,3,0,1,3,3,3,3,3,3,0,0,0,0],[0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0],[0,0,0,0,4,4,4,4,4,4,4,4,4,4,4,4,4,4,1,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],
[[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[4,4,4,4,4,4,4,4,4,4,4,4,2,0,0,0,4,4,4,4,4,2,0],[1,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,1,0,0,0,0,2,0],[1,0,2,3,3,3,3,3,3,3,3,0,2,0,0,0,1,0,2,3,3,3,0],[1,0,2,0,0,0,0,0,0,0,1,0,2,0,0,0,1,0,2,0,0,0,0],[1,0,2,0,4,4,2,0,0,0,1,0,2,0,0,0,1,0,4,4,4,4,2],[1,0,2,0,1,0,2,0,0,0,1,0,2,0,0,0,1,0,0,0,0,0,2],[1,0,2,0,1,0,2,0,0,0,1,3,3,0,0,0,1,3,3,3,3,0,2],[1,0,2,0,1,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,2],[1,0,2,0,1,0,4,4,4,4,4,4,4,4,4,4,4,4,4,4,1,0,2],[1,0,2,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2],[1,0,2,0,1,3,3,3,3,0,2,3,3,0,2,3,3,3,3,3,3,3,3],[1,0,2,0,0,0,0,0,1,0,2,0,1,0,2,0,0,0,0,0,0,0,0],[1,0,4,4,4,4,4,4,1,0,2,0,1,0,2,0,0,0,0,0,0,0,0],[1,0,0,0,0,0,0,0,0,0,2,0,1,0,2,0,0,0,0,0,0,0,0],[1,3,3,3,3,3,3,3,3,3,3,0,1,3,3,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],
[[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,0,0,0,0],[0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0],[0,0,0,0,1,3,3,3,3,3,3,0,2,3,3,3,3,3,3,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,1,0,2,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,4,4,4,4,4,4,1,0,4,4,4,4,4,4,2,0,0,0,0],[0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0],[0,0,0,0,1,0,2,3,3,3,3,3,3,3,3,3,3,0,2,0,0,0,0],[0,0,0,0,1,0,2,0,0,0,0,0,0,0,0,0,1,0,2,0,0,0,0],[0,0,0,0,1,0,2,0,4,4,4,4,4,4,2,0,1,0,2,0,0,0,0],[0,0,0,0,1,0,2,0,1,0,0,0,0,0,2,0,1,0,2,0,0,0,0],[0,0,0,0,1,0,2,0,1,0,2,3,3,0,2,0,1,0,2,0,0,0,0],[0,0,0,0,1,0,2,0,1,0,2,0,1,0,2,0,1,0,2,0,0,0,0],[0,0,0,0,1,3,3,0,1,3,3,0,1,0,4,4,1,0,2,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,2,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,1,3,3,3,3,3,3,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],
[[0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,4,2,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,2,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,4,4,1,0,4,4,2,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,2,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,4,4,1,0,2,3,3,0,4,4,2,0,0],[0,0,0,0,0,0,0,0,0,0,1,0,0,0,2,0,1,0,0,0,2,0,0],[0,0,0,0,0,0,0,0,4,4,1,0,2,3,3,0,1,3,3,0,4,4,2],[0,0,0,0,0,0,0,0,1,0,0,0,2,0,0,0,0,0,1,0,0,0,2],[0,0,0,0,0,0,4,4,1,0,2,3,3,0,0,0,4,4,1,0,2,3,3],[0,0,0,0,0,0,1,0,0,0,2,0,0,0,0,0,1,0,0,0,2,0,0],[0,0,0,0,4,4,1,0,2,3,3,0,0,0,4,4,1,0,2,3,3,0,0],[0,0,0,0,1,0,0,0,2,0,0,0,0,0,1,0,0,0,2,0,0,0,0],[0,0,4,4,1,0,2,3,3,0,0,0,4,4,1,0,2,3,3,0,0,0,0],[0,0,1,0,0,0,2,0,0,0,0,0,1,0,0,0,2,0,0,0,0,0,0],[4,4,1,0,2,3,3,0,0,0,0,0,1,0,2,3,3,0,0,0,0,0,0],[1,0,0,0,2,0,0,0,0,0,0,0,1,0,2,0,0,0,0,0,0,0,0],[1,3,3,3,3,0,0,0,0,0,0,0,1,3,3,0,0,0,0,0,0,0,0]],
[[0,4,4,4,2,0,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,0],[4,1,0,0,2,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,2],[1,0,0,0,2,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2],[1,0,0,0,2,0,1,3,3,3,3,3,3,3,3,3,3,3,3,3,0,0,2],[1,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,2],[1,0,0,0,2,0,0,0,4,4,4,4,4,4,4,4,4,2,0,1,0,0,2],[1,0,0,0,2,0,0,0,1,0,0,0,0,0,0,0,0,2,0,1,0,0,2],[1,0,0,0,2,0,0,0,1,0,2,3,3,0,0,0,0,4,4,1,0,0,2],[1,0,0,0,4,4,4,4,1,0,2,0,1,0,0,0,0,0,0,0,0,0,2],[1,0,0,0,0,0,0,0,0,0,2,0,1,0,0,0,2,3,3,3,3,0,2],[1,3,3,3,3,3,3,3,3,0,2,0,1,0,0,0,2,0,0,0,1,0,2],[0,0,0,0,0,0,0,0,1,0,2,0,1,3,3,0,2,0,0,0,1,3,3],[4,4,4,4,4,4,4,4,1,0,2,0,0,0,1,0,2,0,0,0,0,0,0],[1,0,0,0,0,0,0,0,0,0,4,4,2,0,1,0,2,0,4,4,4,4,2],[1,0,0,0,0,0,0,0,0,0,0,0,2,0,1,0,4,4,1,0,0,0,2],[1,3,0,0,0,0,0,0,0,0,0,0,2,0,1,0,0,0,0,0,0,2,3],[0,1,3,3,3,3,3,3,3,3,3,3,3,0,1,3,3,3,3,3,3,3,0]],
[[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,4,4,4,4,4,4,4,4,4,4,4,4,2,0,0,0,0,0],[0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0],[0,0,0,4,4,1,0,0,2,3,3,0,2,3,3,0,0,4,4,2,0,0,0],[0,0,0,1,0,0,0,0,2,0,1,0,2,0,1,0,0,0,0,2,0,0,0],[4,4,4,1,0,0,2,3,3,0,1,0,2,0,1,3,3,0,0,4,4,4,2],[1,0,0,0,0,0,2,0,0,0,1,0,2,0,0,0,1,0,0,0,0,0,2],[1,0,2,3,3,0,2,0,4,4,1,0,4,4,2,0,1,0,2,3,3,0,2],[1,0,2,0,1,0,2,0,1,0,0,0,0,0,2,0,1,0,2,0,1,0,2],[1,3,3,0,1,3,3,0,1,0,2,3,3,0,2,0,1,3,3,0,1,3,3],[0,0,0,0,0,0,0,0,1,0,2,0,1,0,2,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,1,0,2,0,1,0,2,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,1,0,2,0,1,0,2,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,1,0,2,0,1,0,2,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,1,0,2,0,1,0,2,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,1,3,3,0,1,3,3,0,0,0,0,0,0,0,0]],
[[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,2,3,3,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,2,0,1,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,2,3,3,0,1,3,3,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,2,0,0,0,0,0,1,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,2,3,3,0,4,4,2,0,1,3,3,0,0,0,0,0,0],[0,0,0,0,0,0,2,0,0,0,1,0,2,0,0,0,1,0,0,0,0,0,0],[0,0,0,0,2,3,3,0,4,4,1,0,4,4,4,4,1,0,0,0,0,0,0],[0,0,0,0,2,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,4,4,2,0,1,3,3,0,2,3,3,3,3,0,0,0,0,0,0],[0,0,0,0,0,0,2,0,0,0,1,0,2,0,0,0,1,0,0,0,0,0,0],[0,0,0,0,0,0,4,4,2,0,1,3,3,0,4,4,1,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,2,0,0,0,0,0,1,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,4,4,2,0,4,4,1,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,2,0,1,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,4,4,1,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],
[[0,0,0,0,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,0,0,0,0],[0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0],[0,0,0,0,1,3,3,3,3,3,3,0,2,3,3,3,3,3,3,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,1,0,2,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,4,4,2,0,0,0,1,0,2,0,0,0,4,4,2,0,0,0,0],[0,0,0,0,1,0,2,0,0,0,1,0,2,0,0,0,1,0,2,0,0,0,0],[0,0,0,0,1,0,2,0,0,0,1,0,2,0,0,0,1,0,2,0,0,0,0],[0,0,0,0,1,0,4,4,4,4,1,0,4,4,4,4,1,0,2,0,0,0,0],[0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0],[0,0,0,0,1,0,2,3,3,3,3,0,2,3,3,3,3,0,2,0,0,0,0],[0,0,0,0,1,0,2,0,0,0,1,0,2,0,0,0,1,0,2,0,0,0,0],[0,0,0,0,1,0,2,0,0,0,1,0,2,0,0,0,1,0,2,0,0,0,0],[0,0,0,0,1,0,2,0,0,0,1,0,2,0,0,0,1,0,2,0,0,0,0],[0,0,0,0,1,0,2,0,4,4,1,0,4,4,2,0,1,0,2,0,0,0,0],[0,0,0,0,1,0,2,0,1,0,0,0,0,0,2,0,1,0,2,0,0,0,0],[0,0,0,0,1,0,2,0,1,3,3,3,3,3,3,0,1,0,2,0,0,0,0],[0,0,0,0,1,3,3,0,0,0,0,0,0,0,0,0,1,3,3,0,0,0,0]]
];
inicios=[[15,18],[6,0],[3,4],[16,0],[10,0],[10,0],[3,12],[2,4]];
tempo=0;
function inicia(){
	fase=parseInt(location.hash[1])-1;
	if(!(fase>0&&fase<8))fase=0;
	text="<div style='animation:entrada"+fase+" 1s;'><progress id=progress value="+parseInt(Math.min(tempo,750)/7.5)+" max=100 style='margin-bottom:4px; accent-color:#3B3B3B;'></progress><br><canvas id=canvas width=460 height=460 style='border-radius:10px;'></canvas><div id=carro style='position:relative; margin:0px auto; top:-85px; z-index:2; width:20px; height:40px; background-color:#000000; border-radius:4px;'><div style='width:10px; height:4px; background-color:#000000; border:5px solid #DEDEDE; border-top:none; border-bottom:none;'></div><div style='width:14px; height:20px; background-color:#777777; border:3px solid #000000;'></div></div><div style='text-align:center; margin-top:-38px;'>";
	for(x=0;x<8;x++)text+="&nbsp; &nbsp;<input type=radio value="+x+(fase==x?" checked":"")+" onclick=\"location.hash="+(x+1)+";\" style='accent-color:#3B3B3B;'>&nbsp; &nbsp;";
	document.body.innerHTML=text+"</div></div>";
	tempo=0;
	angulo=0;
	esq=false;
	dir=false;
	px=(inicios[fase][0]*-200)+140;
	py=(inicios[fase][1]*-200)+130;
	ctx=document.getElementById("canvas").getContext("2d");
	ctx.fillStyle="#686868";
	ctx.fillRect(0,0,460,460);
	ctx.fillStyle="#DEDEDE";
	for(x=0;x<pistas[fase].length;x++)for(y=0;y<pistas[fase][x].length;y++)if(pistas[fase][x][y]!=0)ctx.fillRect(13+(19*y),25+(19*x),18,18);
	ctx.fillStyle="#3B3B3B";
	ctx.fillRect(12+(19*inicios[fase][1]),25+(19*inicios[fase][0]),19,18);
	ctx.fillStyle="#A7A7A7";
	ctx.beginPath();
	ctx.arc(230,400,40,0,2*Math.PI);
	ctx.fill();
	ctx.fillStyle="#686868";
	ctx.beginPath();
	ctx.arc(230,400,30,0,2*Math.PI);
	ctx.fill();
}
if(document.body.clientWidth>600)inicia();
else alert("Jogo de Computador");
function vira(k){
	if(k==37||k==65)esq=true;
	if(k==39||k==68)dir=true;
	if(tempo==0){
		move();
		document.getElementById('carro').style.top="-230px";
	}
}
function para(){
	esq=false;
	dir=false;
}
function move(){
	ctx.fillStyle="#686868";
	ctx.fillRect(-100,-100,660,660);
	if(esq)angulo=(angulo+35)%36;
	if(dir)angulo=(angulo+1)%36;
	ctx.translate(230,230);
	if(esq)ctx.rotate(Math.PI/18);
	if(dir)ctx.rotate(-Math.PI/18);
	ctx.translate(-230,-230);
	for(x=0;x<pistas[fase].length;x++)for(y=0;y<pistas[fase][x].length;y++)if(pistas[fase][x][y]!=0){
		ctx.fillStyle="#818181";
		ctx.fillRect((200*y)+py,(200*x)+px,200,200);
		ctx.fillStyle="#B7B7B7";
		ctx.beginPath();
		if(pistas[fase][x][y]==1){
			ctx.moveTo((200*y)+80+py,(200*x)+150+px);
			ctx.lineTo((200*y)+120+py,(200*x)+150+px);
			ctx.lineTo((200*y)+120+py,(200*x)+100+px);
			ctx.lineTo((200*y)+150+py,(200*x)+100+px);
			ctx.lineTo((200*y)+100+py,(200*x)+50+px);
			ctx.lineTo((200*y)+50+py,(200*x)+100+px);
			ctx.lineTo((200*y)+80+py,(200*x)+100+px);
		}
		if(pistas[fase][x][y]==2){
			ctx.moveTo((200*y)+80+py,(200*x)+50+px);
			ctx.lineTo((200*y)+120+py,(200*x)+50+px);
			ctx.lineTo((200*y)+120+py,(200*x)+100+px);
			ctx.lineTo((200*y)+150+py,(200*x)+100+px);
			ctx.lineTo((200*y)+100+py,(200*x)+150+px);
			ctx.lineTo((200*y)+50+py,(200*x)+100+px);
			ctx.lineTo((200*y)+80+py,(200*x)+100+px);
		}
		if(pistas[fase][x][y]==3){
			ctx.moveTo((200*y)+150+py,(200*x)+80+px);
			ctx.lineTo((200*y)+150+py,(200*x)+120+px);
			ctx.lineTo((200*y)+100+py,(200*x)+120+px);
			ctx.lineTo((200*y)+100+py,(200*x)+150+px);
			ctx.lineTo((200*y)+50+py,(200*x)+100+px);
			ctx.lineTo((200*y)+100+py,(200*x)+50+px);
			ctx.lineTo((200*y)+100+py,(200*x)+80+px);
		}
		if(pistas[fase][x][y]==4){
			ctx.moveTo((200*y)+50+py,(200*x)+80+px);
			ctx.lineTo((200*y)+50+py,(200*x)+120+px);
			ctx.lineTo((200*y)+100+py,(200*x)+120+px);
			ctx.lineTo((200*y)+100+py,(200*x)+150+px);
			ctx.lineTo((200*y)+150+py,(200*x)+100+px);
			ctx.lineTo((200*y)+100+py,(200*x)+50+px);
			ctx.lineTo((200*y)+100+py,(200*x)+80+px);
		}
		ctx.fill();
	}
	document.getElementById('progress').value=parseInt(Math.min(tempo,750)/7.5);
	lx=Math.ceil((-px+30)/200);
	ly=Math.ceil((-py+30)/200);
	if(lx>=0&&ly>=0&&lx<pistas[fase].length&&ly<pistas[fase][0].length&&pistas[fase][lx][ly]!=0){
		px+=fatorx[angulo]*3.2;
		py+=fatory[angulo]*3.2;
		setTimeout('move();',30+(parseInt((680-(tempo++))/40)));
	}
	else if(tempo>750)location.hash=fase+2;
	else inicia();
}
</script>
</html>

É uma página html sem arquivos externos.

O código não chama nenhum script .js nem estilo .css nem imagem nenhuma.

É para funcionar com uma request só.
O server simplismente entrega o conteúdo.

Fonte: https://pt.anotepad.com/notes/nq3frrn4

Carregando publicação patrocinada...
4
Oletros

Meus 2 cents:

Aqui todou de boa.

Baixei o codigo, coloquei em um 'teste.html' e mandei abrir com o chrome;

De qualquer forma, da uma olhada na linha:

if(document.body.clientWidth>600)inicia();
else alert("Jogo de Computador")

e deixe apenas

inicia();

Pode ser que ele esteja falhando por conta do tamanho da tua janela.

Se isso nao resolver, faca o debug com o a propria ferramenta do google: More Tools, Developer tools e poe um breakpoint ou veja se na console da algum erro.

3
DaniloNmtl

O meu também rodou perfeitamente, até achei que nao tinha nenhum erro.
@RodrigoSchio se for o caso de ter algum erro de execução deixa um comentário ai pra gente explicando o que acontece para você.

4
DaniloNmtl

Não sei se entendi exatamente, imagino que com "corrigir o codigo" você queira dizer se é possivel dar manutenção. E isso mesmo?

Se for isso: Sempre é possível, agora se é fácil ja é outra coisa haha. Tem varias coisas ai que você pode melhorar para facilitar a manutenção do seu codigo como:

  1. Criar funções: Ler códigos de pintura é complicado por que temos que interprestar sempre o que esta sendo desenhado, separe melhor suas funções. Como por exemplo a parte que desenha a seta em uma função "DesenhaSeta", "PreencheFundo", "DesenhaPista" etc. Além das partes de desenhos, a função inicia faz 3 coisas: Cria o Layout com a div e o canvas, inicia as variaveis, desenha o preview da pista. Cada coisa poderia estar em uma função.

  2. Generalizar seus calculos: A parte que desenha a seta esta repetido 4 vezes para as 4 direções, mas o desenho é o mesmo, poderia ser apenas um trecho de codigo. Voce pode generalizar isso calculando de acordo com a direção ou apenas dando um rotate antes de desenhar e um rotate para voltar a posição após desenhar.

  3. Melhorar estruturas de dados: Eu levei algum tempo para entender que as pistas eram matrizes com as direções, não é uma abordagem ruim mas uma forma diferente que gastaria menos dados para serem guardados seria armazenar apenas as coordenadas dos quadradinhos de pista ou, ainda mais simples, guardar apenas onde tem curvas, ja que entre uma curva e outra é sempre reto. Claro que essas abordagens podem alterar consideravelmente as funções de deseno, se não quiser isso considere apenas as outras dicas.

  4. Comentários: Execeço de comentarios para mim atrapalha a leitura do codigo, mas algumas variaveis ou calculos que não são intuitivos podem ser comentados para ajudar quem vai dar manutenção.