Variável Global - Criando um Jogo em JavaScript

Neste tutorial de JavaScript, vamos te explicar o conceito de variável global e vamos aprender como usá-las através da criação de um simples, porém interessante, jogo em JS.

Variável Global em JavaScript


Até o momento, usamos diversas variáveis em nossas funções do JS.
Mas, como explicamos, ela são de escopo local: ou seja, só existem dentro da função que ela foi declarada.

Por exemplo, seja a função fubá:

function fubá()
{
   var milho=0;
}

Declaramos nela uma variável, a milho, com valor 0.
Agora vamos declarar outra função, a tapioca:

function tapioca()
{
   document.write(milho);
}

Quando ela tenta dar um print (escrever no documento HTML), não vai acontecer nada, pois para ela não existe variável milho. Essa variável é local da função fubá.

Para resolvermos nosso problema, basta fazer:

var milho;

function fubá()
{
   milho=0;
}

function tapioca()
{
   document.write(milho);
}


Ou seja, declaramos a variável milho fora de todas as funções, no começo do arquivo .js.
Assim, ela é global, pois ela pode será vista e acessada por qualquer função ou trecho do JavaScript.

Note que declaramos var milho; no lado de fora das funções, e dentro dela acessamos diretamente a variável fazendo milho=0, sem precisar do var, pois ela já foi definida previamente.

Exemplo de uso de Variável Global

No próximo tópico, vamos aprender a criar um jogo em JavaScript.
É um game bem simples, onde o JS vai sortear um número e você tem que adivinhar qual foi, com as dicas que vai receber.

Vamos usar duas variáveis bem especiais:
  1. tentativas: ela vai armazenar o tanto de tentativa que o usuário fez até acertar
  2. numero: o JS vai sortear um número de 1 até 100 e armazenar nessa variável
Essas duas variáveis serão globais! O motivo é simples: iremos rodar a função main() várias e várias vezes, até adivinharmos o número e a variável tentativas vai incrementar cada vez que fizermos um teste, já a variável numero vai sempre se manter constante, só mudar se der refresh na página.

Nosso código HTML:


<!DOCTYPE html>
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
 	Um número foi sorteado! Tente adivinhar! <br />
 	Numero:<input id="num" type="number">
 	<button onclick="main()">Testar</button><br />
 	Tentativas: <div id="tentativas" style='display:inline'></div><br />
 	<button onclick="window.location.reload()">Reiniciar</button>
 </body>
</html>

Código JS:

var tentativa=0;
var numero = Math.floor( (1 + 100*Math.random()) );

function main()
{
	var tent = document.getElementById('tentativas');
	tentativa++;

	tent.innerHTML = tentativa;
}

Na página HTML pedimos um número ao usuário, usando um formulário input.
Depois um botão chamado Testar que invoca a função main.

Depois, uma div de id='tentativas', onde o JS vai escrever no documento HTML o tanto de tentativas que o usuário fez.

Inserimos também um botão Reiniciar que invoca a função window.location.reload() que simplesmente atualiza a página.

No código JavaScript, antes e fora de qualquer função, declaramos as duas variáveis globais: tentativa e a numero, esta última já gera de imediato um número aleatório de 1 até 100,

Agora vamos pra função.
A variável tent que vai escrever no documento HTML, via propriedade innerHTML.
Depois simplesmente incrementamos a variável tentativa, afinal você fez uma tentativa.

Por fim, escreve no HTML o número de tentativas atuais.
Veja como ficou o resultado:

Um número foi sorteado! Tente adivinhar!
Numero:
Tentativas:



A seguir, vamos implementar a lógica do nosso jogo.

Como Fazer um Jogo em JavaScript

Nosso jogo funciona assim: o JS sorteia um número de 0 até 100.
Depois, você tenta adivinhar. Ele vai dizendo se seu palpite foi maior, menor ou se acertou, enquanto vai contando quantas tentativas fez.

No HTML, vamos adicionar mais uma div a id='dicas'.
Dentro do arquivo de JavaScript, criarmos a variável dicas também, que vai escrever na div do HTML a dica ('é maior', 'menor', 'acertou').

De novidade, agora, é só a linha:
dica.innerHTML = teste(num1);

Isso quer dizer que iremos escrever no HTML (na div dica), o resutorno da função teste().

Essa função recebe um número e compara ele com o numero sorteado.
Se for maior, menor ou igual, retorna uma string explicando isso.

Código HTML do Jogo:
<!DOCTYPE html>
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
 	Um número foi sorteado! Tente adivinhar! <br />
 	Numero:<input id="num" type="number">
 	<button onclick="main()">Testar</button><br />
 	Tentativas: <div id="tentativas" style='display:inline'></div><br />
 	Dica: <div id="dica" style='display:inline'></div><br />
 	<button onclick="window.location.reload()">Reiniciar</button>
 </body>
</html>
script.js do Game:
var tentativa=0;
var numero = Math.floor( (1 + 100*Math.random()) );

function main()
{
	var tent = document.getElementById('tentativas');
	var num1 = parseInt(document.getElementById("num").value);
	var dica = document.getElementById('dica');
	
	tentativa++;
	dica.innerHTML = teste(num1);
	tent.innerHTML = tentativa;
}

function teste(x)
{	
	if(x<numero)
		return "Seu numero é menor que o sorteado";
	else
		if(x>numero)
			return "Seu numero é maior que o sorteado";
		else
			return ("Parabéns! Acertou, a resposta era " + numero);

}

Jogar o o game de adivinhar o número

Um número foi sorteado! Tente adivinhar!
Numero:
Tentativas:

Dica:

Nenhum comentário:

Postar um comentário