[download id=”285″]
Olá Pessoal do MundoJs !
Esse é um artigo/tutorial sobre mecanismos básicos de jogos em javascript
Será apresentada uma maneira bem básica de como fazer um jogo da cobrinha em javascript. É um jogo para ser jogado no browser/navegador (chrome/firefox/explorer) mas não funciona em tablets e celulares porque precisa do teclado…
Vamos começar criando um arquivo .html em branco. E logo em seguida escrever um pouco de html:
<html>
<body>
<div id=principal></div>
<script>
document.getElementById('principal').innerHTML='Daqui surge o jogo';
</script>
</body>
</html>
Até aqui sem maiores surpresas… um simples arquivo sem muita complicação.
Logo em seguida vamos criar o tabuleiro por onde a cobra irá se movimentar:
<html>
<body>
<div id=principal></div>
<script>
tabuleiro="<table align=center border=1>";
for(x=0;x<10;x++){
tabuleiro+="<tr>";
for(y=0;y<10;y++)
tabuleiro+="<td>"+x+"_"+y+"</td>";
tabuleiro+="</tr>";
}
document.getElementById('principal').innerHTML=tabuleiro+"</table>";
</script>
</body>
</html>
Vamos dar um id para cada celula do tabuleiro:
for(y=0;y<10;y++){
tabuleiro+="<td id=td"+x+"_"+y+" style='width:30px; height:30px;'> </td>";
}
Vamos ‘pintar’ uma celula do tabuleiro:
document.getElementById('td3_3').style.background="#333333";
Vamos criar uma variavel cobra[] que armazena a coordenada (x,y) da cobra:
cobra=[5,0];
document.getElementById('td'+cobra[0]+'_'+cobra[1]).style.background="#333333";
Vamos fazer a cobra ‘andar’ com a função ‘setTimeout’:
function anda(){
cobra[1]++;
document.getElementById('td'+cobra[0]+'_'+cobra[1]).style.background="#333333";
setTimeout('anda()',300);
}
anda();
Essa função setTimeout é a base do movimento em javascript. Existem alternativas mas essa é nativa e tem vantagens…
E vamos ‘apagar’ o rastro da cobrinha:
function anda(){
document.getElementById('td'+cobra[0]+'_'+cobra[1]).style.background="#ffffff";
cobra[1]++;
}
Vamos ‘interceptar/interpretar’ a tecla que o usuário aperta no teclado:
<body onKeyDown="pegadirecao(event.keyCode);">
function pegadirecao(tecla){
alert(tecla);
}
Vamos criar uma variavel direcao que armazena/determina pra onde a cobra deve se mover:
direcao=2;
function pegadirecao(tecla){
/*alert(tecla);*/
if(tecla==37)direcao=0;
if(tecla==38)direcao=1;
if(tecla==39)direcao=2;
if(tecla==40)direcao=3;
}
E dentro da função anda
if(direcao==0)cobra[1]--; if(direcao==1)cobra[0]--; if(direcao==2)cobra[1]++; if(direcao==3)cobra[0]++;
vamos criar a maçã:
mx=parseInt(Math.random()*10); my=parseInt(Math.random()*10);
E na função ‘anda()’
document.getElementById('td'+mx+'_'+my).style.background="#ff3333";
Vamos fazer a maçã ser gerada novamente:
if(mx==cobra[0]&&my==cobra[1]){
mx=parseInt(Math.random()*10);
my=parseInt(Math.random()*10);
cobra[cobra.length]=[10,10];
}
Agora vem a parte mais sofisticada do jogo. Vamos transformar a variável cobra de um array para um array de arrays. Até agora a variavel cobra armazenava um ponto. A partir daqui essa variavel armazenará um array de pontos…
cobra=[[5,0]];
function anda(){
document.getElementById('td'+cobra[cobra.length-1][0]+'_'+cobra[cobra.length-1][1]).style.background="#ffffff";
if(mx==cobra[cobra.length-1][0]&&my==cobra[cobra.length-1][1]){
mx=parseInt(Math.random()*10);
my=parseInt(Math.random()*10);
cobra[cobra.length]=[10,10];
}
if(direcao==0)cobra[0][1]--;
if(direcao==1)cobra[0][0]--;
if(direcao==2)cobra[0][1]++;
if(direcao==3)cobra[0][0]++;
document.getElementById('td'+cobra[0][0]+'_'+cobra[0][1]).style.background="#333333";
document.getElementById('td'+mx+'_'+my).style.background="#ff3333";
setTimeout('anda()',300);
}
Para fazer a cobra se movimentar devemos passar os valores de cada coordenada de cada ‘gomo’ da cobra para o ‘gomo de traz’:
for(x=cobra.length-1;x>0;x--){
cobra[x][0]=cobra[x-1][0];
cobra[x][1]=cobra[x-1][1];
}
Agora só falta fazer função que executará quando a cobra ‘morrer’:
vivo=true;
if(vivo)setTimeout('anda()',300);
else alert('Fim de jogo');
for(x=1;x<cobra.length;x++){
if(cobra[0][0]==cobra[x][0]&&cobra[0][1]==cobra[x][1])vivo=false;
if(cobra[0][0]<0||cobra[0][1]<0||cobra[0][0]>9||cobra[0][1]>9)vivo=false;
}
O código completo fica:
<html>
<body onKeyDown="pegadirecao(event.keyCode);">
<div id=principal></div>
<script>
tabuleiro="<table align=center border=1>";
for(x=0;x<10;x++){
tabuleiro+="<tr>";
for(y=0;y<10;y++)
tabuleiro+="<td id=td"+x+"_"+y+" style='width:30px; height:30px;'> </td>";
tabuleiro+="</tr>";
}
document.getElementById('principal').innerHTML=tabuleiro+"</table>";
cobra=[[5,0]];
direcao=2;
mx=parseInt(Math.random()*10);
my=parseInt(Math.random()*10);
vivo=true;
function anda(){
document.getElementById('td'+cobra[cobra.length-1][0]+'_'+cobra[cobra.length-1][1]).style.background="#ffffff";
if(mx==cobra[cobra.length-1][0]&&my==cobra[cobra.length-1][1]){
mx=parseInt(Math.random()*10);
my=parseInt(Math.random()*10);
cobra[cobra.length]=[10,10];
}
for(x=cobra.length-1;x>0;x--){
cobra[x][0]=cobra[x-1][0];
cobra[x][1]=cobra[x-1][1];
}
if(direcao==0)cobra[0][1]--;
if(direcao==1)cobra[0][0]--;
if(direcao==2)cobra[0][1]++;
if(direcao==3)cobra[0][0]++;
for(x=1;x<cobra.length;x++)if(cobra[0][0]==cobra[x][0]&&cobra[0][1]==cobra[x][1])vivo=false;
if(cobra[0][0]<0||cobra[0][1]<0||cobra[0][0]>9||cobra[0][1]>9)vivo=false;
document.getElementById('td'+cobra[0][0]+'_'+cobra[0][1]).style.background="#333333";
document.getElementById('td'+mx+'_'+my).style.background="#ff3333";
if(vivo)setTimeout('anda()',300);
else alert('Fim de jogo');
}
anda();
function pegadirecao(tecla){
/*alert(tecla);*/
if(tecla==37)direcao=0;
if(tecla==38)direcao=1;
if(tecla==39)direcao=2;
if(tecla==40)direcao=3;
}
</script>
</body>
</html>