1

Estou fazendo um trabalho da escola, que é para amanhã, e ele já está pronto, é o famoso jogo 'Snake' em javascript e html, porém hj eu pensei em colocar a pontuação do jogador em tempo real no jogo. Já tentei várias coisas mas só aparece 'Pontuação: 0' independente de quantas maçãs vc tenha comido. É possível fazer isso em javascript? Se sim, como faço isso?

document.onkeydown = function(event){
  pegadirecao(event.keyCode);
}

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>";
}
tabuleiro+="</table>";
document.getElementById('principal').innerHTML=tabuleiro;

cobra=[[5,0]];
direcao=2;
vivo=true;
function desenhapedaco(x,y)
{
	document.getElementById('td'+x+'_'+y).style.background="#333333";
}
function apagapedaco(x,y)
{
	document.getElementById('td'+x+'_'+y).style.background="#ffffff";
}
function geramaca()
{	mx=parseInt(Math.random()*10)
	my=parseInt(Math.random()*10)
	document.getElementById('td'+mx+'_'+my).style.background="#ff3333";
}

function anda()
{	apagapedaco(cobra[cobra.length-1][0], cobra[cobra.length-1][1]);
	if(mx==cobra[0][0]&&my==cobra[0][1])
	{
	geramaca();
	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]++;
	if(cobra[0][0]<0||cobra[0][1]<0||cobra[0][0]>9||cobra[0][1]>9)
	{vivo=false;
	}
	for(x=1;x<cobra.length;x++)
	{if(cobra[x][0]==cobra[0][0]&&cobra[x][1]==cobra[0][1])vivo=false;
	}
	if(vivo)
	{
	desenhapedaco(cobra[0][0],cobra[0][1]);
	setTimeout('anda();', 300);
	}
	else
	{alert('Você perdeu, seu otario.\nVocê pegou '+(cobra.length-1)+' maçãs');
	}
}
geramaca();
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;
}
document.write('Pontuação: \n'+(cobra.length-1)+' Maçãs!');
<div id=principal></div>
<h1>

4
  • É possível sim, apenas criando um contador no evento que ele "pega" a maça. 9/09/2015 às 17:40
  • 1
    Poste o código. 9/09/2015 às 17:41
  • 1
    Sem o código fica difícil ajudar, mas claro que é possível. 9/09/2015 às 17:41
  • Já coloquei o código no post. Se puderem me ajudar, eu agradeceria muito. 9/09/2015 às 17:46

1 Resposta 1

3

Podes juntar um novo elemento no HTML:

<div id="pontuacao"></div>

e depois atualizar via JavaScript com:

var infoPontos = document.getElementById('pontuacao');
function pontuou() {
    infoPontos.innerHTML = 'Pontuação: \n' + (cobra.length - 1) + ' Maçãs!';
}

inserido aqui:

if (mx == cobra[0][0] && my == cobra[0][1]) {
    geramaca();
    cobra[cobra.length] = [10, 10];
    pontuou(); // <---------------------- aqui e se quiseres uma vez no inicio do script tb
}

O resultado seria assim: http://jsfiddle.net/31az4hxo/

Sugestão:

Não mistures HTML e/ou CSS no JavaScript, usa a API do JavaScript para criar elementos do DOM, e classes de CSS para manipular cores.

Usa antes algo parecido com: http://jsfiddle.net/31az4hxo/1/. Uma outra vantagem desta versão que coloco é que guarda os elementos na memória, em vez de usar document.getElementById, multiplas vezes a cada 300ms

2
  • Sergio, muito obrigado! Já havia aprendido várias coisas em javascript com esse trabalho, e agora aprendi mais uma que com certeza eu vou usar bastante. 9/09/2015 às 18:17
  • @J.Gaidzinski dá uma olhada aqui: jsfiddle.net/31az4hxo/1 eu faria assim para não misturar HTML ou CSS no JavaScript
    – Sergio
    9/09/2015 às 18:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .