Tutoriais

Programando um jogo com javascript

Esse tutorial é indicado a programadores com conhecimento prévio na área de desenvolvimento de software.

Alguns dos conceitos apresentados são complexos.

Cenário

Esse código é a base do jogo: 
<style>
@keyframes entrada0{from{transform:rotateX(90deg);}to{transform:rotateX(0deg);}}
@keyframes entrada1{from{transform:rotateY(90deg);}to{transform:rotateY(0deg);}}
</style>
<body style='background-color:#878787; margin:0px; height:100vh; display:flex; align-items:center; justify-content:center;'></body>
<script>
htm="<div style='animation:entrada"+(parseInt(Math.random()*2)%2)+" 1s;'>";
htm+="	<canvas id=canvas width=460 height=460 style='border-radius:10px; background-color:#ffffff;'></canvas>";
htm+="	<div id=carro style='position:relative; margin:0px auto; top:-85px; z-index:2; width:20px; height:40px; background-color:#000000; border-radius:4px;'>";
htm+="		<div style='width:10px; height:4px; background-color:#000000; border:5px solid #DEDEDE; border-top:none; border-bottom:none;'></div>";
htm+="		<div style='width:14px; height:20px; background-color:#777777; border:3px solid #000000;'></div></div>";
document.body.innerHTML=htm+"</div>";
</script>

Movimento

A função setTimeout é nativa do javascript. 
ctx = document.getElementById("canvas").getContext("2d");
x = 10;
function move() {
	ctx.fillStyle = "#9aba9a";
	ctx.fillRect(0, 0, 460, 460);
	ctx.fillStyle = "#385383";
	x = x + 10;
	if (x > 300) x = -400;
	ctx.fillRect(200, 200 + x, 200, 200);
	setTimeout('move()', 100);
}
move();

Rotação do Carrinho

A rotação do carrinho pode ser implementada com css 
transform:rotate(40deg);
<body onKeyDown="vira(event.keyCode);" bgcolor=#e1e1e1><br>
<center><div id=carro>
	<div style='position:relative; z-index:2; top:254px; width:20px; height:40px; background-color:#000000; border-radius:4px; transform:rotate(180deg);'>
		<div style='width:10px; height:4px; background-color:#000000; border:5px solid #ff4444; border-top:none; border-bottom:none;'></div>
		<div style='width:14px; height:20px; background-color:#999999; border:3px solid #000000;'></div>
	</div>
</div>
<canvas id=canvas width=460 height=460 style='background-color:#ffffff; border:4px solid #497894; border-radius:10px;'></canvas>
</center>
</body>
<script>
ctx = document.getElementById("canvas").getContext("2d");
x = 10;
function move() {
	ctx.fillStyle = "#9aba9a";
	ctx.fillRect(0, 0, 460, 460);
	ctx.fillStyle = "#385383";
	x = x + 10;
	if (x > 300) x = -400;
	ctx.fillRect(200, 200 + x, 200, 200);
	setTimeout('move()', 100);
}
move();
angulo = 18;
function vira(k) {
	//alert(k);
	if (k == 37) angulo = (angulo + 35) % 36;
	if (k == 39) angulo = (angulo + 1) % 36;
	document.getElementById('carro').innerHTML = "<div style='position:relative; z-index:2; top:254px; width:20px; height:40px; background-color:#000000; border-radius:4px; transform:rotate(" + angulo + "0deg);'><div style='width:10px; height:4px; background-color:#000000; border:5px solid #ff4444; border-top:none; border-bottom:none;'></div><div style='width:14px; height:20px; background-color:#999999; border:3px solid #000000;'></div></div>";
}
</script>

Dirigibilidade

Agora começa uma parte complicada.
Fazer o carro se mover em relação à pista.

Para isso vamos usar umas variáveis ‘fatorx’ e ‘fatory’.
Elas vão definir o deslocamento do carro em relação a pista. (no eixo x e no eixo y)
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];
Por exemplo: quando o carro estiver inclinado 30 graus ele irá se deslocar 6 pixels no eixo x e -3 pixels no eixo y 
fatorx[30 graus de inclinação]==6
O correto seria usar trigonometria. 
<body onKeyDown="vira(event.keyCode);" onKeyUp="para(event.keyCode);" bgcolor=#e1e1e1><br><center>
	<div id=carro></div>
	<canvas id=canvas width=460 height=460 style='background-color:#ffffff; border:4px solid #497894; border-radius:10px;'></canvas>
</center></body>
<script>
ctx = document.getElementById("canvas").getContext("2d");
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];
px = 10;
py = 10;
angulo = 18;
esq = false;
dir = false;
function vira(k) {
	if (k == 37) esq = true;
	if (k == 39) dir = true;
}
function para(k) {
	esq = false;
	dir = false;
}
function move() {
	if (esq) angulo = (angulo + 35) % 36;
	if (dir) angulo = (angulo + 1) % 36;
	document.getElementById('carro').innerHTML = "<div style='position:relative; z-index:2; top:254px; width:20px; height:40px; background-color:#000000; border-radius:4px; transform:rotate(" + angulo + "0deg);'><div style='width:10px; height:4px; background-color:#000000; border:5px solid #ff4444; border-top:none; border-bottom:none;'></div><div style='width:14px; height:20px; background-color:#999999; border:3px solid #000000;'></div></div>";
	ctx.fillStyle = "#9aba9a";
	ctx.fillRect(0, 0, 460, 460);
	px += fatorx[angulo] * 3.7;
	py += fatory[angulo] * 3.7;
	ctx.fillStyle = "#385383";
	ctx.fillRect((200) + py + 38, (200) + px + 28, 200, 200);
	setTimeout('move()', 75);
}
move();
</script>

Pista

1 representa asfalto
0 representa grama 
pista = [
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1],
    [1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1],
    [1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1],
    [1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1],
    [1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1],
    [1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1],
];
Dentro da função move() o código abaixo desenha o asfalto 
	for (x = 0; x < pista.length; x++)for (y = 0; y < pista[x].length; y++)if (pista[x][y] != 0) ctx.fillRect((200 * y) + py + 38, (200 * x) + px + 28, 200, 200);

Fora da pista

lx e ly são índices que representam onde o carro está na variável pista.
Se pista[lx][ly]==1 então o carro está no asfalto. 
	lx=Math.ceil((-px-20)/200);
	ly=Math.ceil((-py-20)/200);
	if(lx>=0&&ly>=0&&lx<pista.length&&ly<pista[0].length&&pista[lx][ly]!=0){
		px+=fatorx[angulo]*3.2;
		py+=fatory[angulo]*3.2;
		setTimeout('move();',60);
	}
	else alert('fim');

Fases

Depois de fazer funcionar em um percurso, é mais simples implementar outras fases.

Rotation

É possível implementar rotação do canvas. 
<!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>