Put real-time punctuation in javascript

Navigation
1

I'm doing a school job, which is for tomorrow, and it's already done, it's the famous 'Snake' game in javascript and html, but hj I thought of putting the player's real-time score in the game. Already tried several things but only appears 'Score: 0' regardless of how many apples you have eaten. Is it possible to do this in javascript? If so, how do I do this? 

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>
    
asked by anonymous 09.09.2015 / 19:37

1 answer

3

You can add a new element in HTML: 

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

Then refresh via JavaScript with: 

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

entered here: 

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
}

The result would look like this: link

Suggestion:

Do not mix HTML and / or CSS in JavaScript, use the JavaScript API to create DOM elements, and CSS classes to manipulate colors.

Use something like: link . Another advantage of this version is that it saves the elements in memory, instead of using document.getElementById , multiple times every 300ms

    
09.09.2015 / 19:55
Foreach within the while in the output of Json Only the last item in the array is displayed