Como fazer um jogo de pular, obstáculos e pontuação com HTML CSS e Javascript – parte 3 – final


Continuando o jogo, agora vamos terminar.  Se você não viu a primeira etapa, clique aqui, senão continue abaixo.

Estamos fazendo esse jogo

O que você vai aprender nesse tutorial:

      • Como colocar pontuação;
      • Como salvar pontuação;
      • Como reiniciar o jogo;
      • Considerações finais;

Então vamos lá.

Como colocar pontuação

Vamos procurar no código, o a função:

function sortear()

E vamos fazer o seguinte,  a cada vez, que o personagem, passa pelo obstáculo ganha um ponto. E já vamos definir, qual foi a pontuação maior.

//
//adicionamos 1 ponto se passar pelo obstaculo	
pontuacao++;
//se o maximo da pontuacao for menor que a pontuacao, deixamos ambas iguais
if(maximopontuacao < pontuacao) { maximopontuacao = pontuacao;}
document.getElementById("pontos").innerHTML = pontuacao;
//

 

Como iniciar/reiniciar o jogo

Antes vamos definir as variáveis no começo do script

//variaveis do jogo
var jogar = false;
var pontuacao = -1;
var maximopontuacao = 0;

Percebam que coloquei a função jogar = false;

Se esta função estiver false, o jogo não roda, abaixo só roda, se jogar = true;

setInterval(function(){if(jogar){sortear();}},2000);

mas em uma das funções ela ativa, e setInterval  começa a funcionar.  Na função fim() ela desativa a variável jogar.

Na função fim, vai ficar dessa forma:

function fim() {
jogar = false;
document.getElementById("obstaculo").style.display = 'none';
document.getElementById("obstaculo2").style.display = 'none';
if(pontuacao < 0){pontuacao = 0; document.getElementById("pontos").innerHTML = '<center><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a href="javascript:;;"  class="botao"  onclick="javascript:jogue();">Play</a></center>';}
else{ document.getElementById("pontos").innerHTML = '<div align=center style=font-size:25px><br><br>Pontos: '+pontuacao+' &nbsp;&nbsp;&nbsp;&nbsp; Máximo: '+maximopontuacao+'<h1>Game Over</h1></div><center><br><br><br><br><br><br><br><a href="javascript:;;"  class="botao"  onclick="javascript:jogue();">Play</a></center>';}
}

Essa função desativa a opção de jogar, deixa os obstáculos escondidos, e mostra um play pra começar o jogo, ou a pontuação máxima, se alguma vez já foi jogada.

Vejam o código abaixo comentado e já pronto.

<!DOCTYPE html>
<html>
  <head>
    <title>Jogo do coelho</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style> 
body {
margin: auto;
font: 0.8em/120% Comic Sans MS,Verdana, Helvetica, sans-serif;
text-shadow: 0.5px -0.5px #ffffaa;
}

a{color: #0171BB; text-decoration: none; }
a:hover { color: #000; text-decoration: none; }
.botao{position: relative;z-index:1200; border-radius:15px;padding:5px 25px 5px 25px;border: 1px solid #73AD21;background-color:yellow;font-size:35px; }

#principal {
  background-color: #fff;
  margin: auto;
  position: relative;
  max-width: 500px;
  max-width: 500px;
  height: 300px;
  border: 3px solid #73AD21;
}

#personagem3 {
  z-index:1000;
  width: 60px;
  height: 100px;
  margin: auto;
  position: absolute;
  top: 90px;
  left:170px;
  background: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/07/coelho.png');
  background-position-x: 7px;
  background-position-y: -30px;
  border:0px solid #000;
  animation: play1 .8s steps(6) infinite;
}

@keyframes play1 {
    0% { background-position-x: -35px; }
    100% { background-position-x: -578px; }
}

#chao {
  width: 100%;
  height: 112px;
  margin: auto;
  position: absolute;
  bottom: 0px;
  background: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/07/img_5f07afc0b4aa0.png')0px 0px;
  animation: play2 2s steps(10) infinite;
}

@keyframes play2 {
    100% { background-position-x: -112px; }
}

#obstaculo
{
background: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/07/itens2.png');
background-position-x: -113px;
background-position-y: -108px;
position: absolute;
z-index:1009;
left: 440px;
top: 160px;
width:40px;
height:28px;
border:0px solid #000;
animation: play3 2s steps(10) infinite;
}

@keyframes play3 {
    100% { left: 0px; }
}

#obstaculo2
{
background: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/07/itens2.png');
background-position-x: -155px;
background-position-y: -75px;
position: absolute;
z-index:1009;
left: 440px;
top: 80px;
width:33px;
height:32px;
border:0px solid #000;
animation: play4 2s steps(10) infinite;
}

@keyframes play4 {
    100% { left: 0px; }
}

</style> 
</head>
<body>
<br>
<div id="principal"> 
  <center>
    <div id="pontos" align="right" style="padding:3px;font-size:20px;"></div>
    <div id="personagem3" onClick="pular();"></div>
    <div id="obstaculo"></div>
    <div id="obstaculo2"></div>
    <div id="chao"  onClick="rasteira();"></div>
    <a href="javascript:;;" onClick="rasteira();" style="left:0px;top:40%;position: absolute;font-size:20px;">&#128317;</a> 
    <a href="javascript:;;" onClick="pular();" style="right:0px;top:40%;position: absolute;font-size:20px;">&#128316;</a> 
  </center>
</div>


<script>
//variaveis do jogo
var jogar = false;
var pontuacao = -1;
var maximopontuacao = 0;

//funcao que comeca o jogo
function jogue(){jogar = true;}

//essa funcão faz com que o personagem  pule rotacione um pouco e volte sua posicao normal depois de 500m
function pular() {
//aqui diz, mande o personagem para topo 0, de uma girada, e diminua o andar do personagem
document.getElementById("personagem3").style.cssText = 'top:0px; transition: all 0.3s  ease-out; transform : rotate(-15deg);  animation: play1 1s steps(1) infinite;';
//aqui diz, retorne personagem para o chao, desvire a  girada, e aumente o andar do personagem
setTimeout(function(){document.getElementById("personagem3").style.cssText = 'transition: all 1s  ease-out;'; document.getElementById("personagem3").style.top = "90px";},500);
}

//essa funcão faz com que o personagem  escorregue rotacione um pouco e volte sua posicao normal depois de 500m
function rasteira() {
//aqui diz, mande o personagem para traz, de uma girada, e diminua o andar do personagem
document.getElementById("personagem3").style.cssText = 'top:130px; transition: all 0.2s  ease-out; transform : rotate(-95deg);  animation: play1 3s steps(3) infinite;';
//aqui diz, retorne personagem para o chao, desvire a  girada, e aumente o andar do personagem
setTimeout(function(){document.getElementById("personagem3").style.cssText = 'transition: all 1s  ease-out;'; document.getElementById("personagem3").style.top = "90px";},500);
}

//essa função é se o alvo personagem, que apos uma comparacao, as div não podem ficar uma sobreposta a outra, se isso ocorre, quer dizer que teve uma colisao e acaba o jogo
function alvo() {
//aqui temos que difinir todas as variareis para fazer comparacao, tipo qual tamanho e eixos. (veja mais sobre offsetWidth, offsetHeight etc...)
    var aw= document.getElementById("personagem3").offsetWidth;
    var ah= document.getElementById("personagem3").offsetHeight;
    var bw= document.getElementById("obstaculo").offsetWidth;
    var bh= document.getElementById("obstaculo").offsetHeight;
    var cw= document.getElementById("obstaculo2").offsetWidth;
    var ch= document.getElementById("obstaculo2").offsetHeight;
    var at= document.getElementById("personagem3").offsetTop;
    var al= document.getElementById("personagem3").offsetLeft;
    var bt= document.getElementById("obstaculo").offsetTop;
    var bl= document.getElementById("obstaculo").offsetLeft;
    var ct= document.getElementById("obstaculo2").offsetTop;
    var cl= document.getElementById("obstaculo2").offsetLeft;
    
//essa e a programcao que compara os obstaculos, se uma div estiver sobreposta a outra, acaba o jogo chamando a funcão fim,
    if(al < bl+bw && bl < al + aw && at < bt+bh && bt < at + ah) { fim();}
    if(al < cl+cw && cl < al + aw && at < ct+ch && ct < at + ah) { fim();}

}
// essa e a funcao fim que se tiver a colisao das div, acaba o jogo
function fim() {
jogar = false;
document.getElementById("obstaculo").style.display = 'none';
document.getElementById("obstaculo2").style.display = 'none';
if(pontuacao < 0){pontuacao = 0; document.getElementById("pontos").innerHTML = '<center><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a href="javascript:;;"  class="botao"  onclick="javascript:jogue();">Play</a></center>';}
else{ document.getElementById("pontos").innerHTML = '<div align=center style=font-size:25px><br><br>Pontos: '+pontuacao+' &nbsp;&nbsp;&nbsp;&nbsp; Máximo: '+maximopontuacao+'<h1>Game Over</h1></div><center><br><br><br><br><br><br><br><a href="javascript:;;"  class="botao"  onclick="javascript:jogue();">Play</a></center>';}
}

// agora e parte que fica acontecendo o jogo, ficamos chamando  varias vezes a funcao alvo() a cada 100m para fazer as comparacoes da colisao, se tiver a colisao acaba o jogo
setInterval(function(){alvo()},100);

//para ficar mais dificil o jogo, vamos sortear o obstaculo qual obstaculo vai aparecer a cada 2segundos
function sortear()
{

//fazemos um sorteio entre 1 e 2, qual for sorteado, executa um dos if/else
var nn = Math.floor(Math.random() * (2 - 1 + 1) + 1);
    if(nn == 1){ 
    document.getElementById("obstaculo").style.display = 'block';
    document.getElementById("obstaculo2").style.display = 'none';
    }
    else
    {
    document.getElementById("obstaculo").style.display = 'none';
    document.getElementById("obstaculo2").style.display = 'block';
    }
    
//adicionamos 1 ponto se passar pelo obstaculo	
pontuacao++;
//se o maximo da pontuacao for menor que a pontuacao, deixamos ambas iguais
if(maximopontuacao < pontuacao) { maximopontuacao = pontuacao;}
document.getElementById("pontos").innerHTML = pontuacao;
}

// e depois ficamos chamando funcao sorter o obstaculo a cada 2s se a variavel jogar for verdadeira
setInterval(function(){if(jogar){sortear();}},2000);

//começamos o jogo, ja chamando a variavel fim pra zerar tudo.
fim();
</script>

</body>
</html>


 

Considerações finais

 

Como ficou no resultado final

Abra esse jogo em uma nova janela

 

Fiz muitas modificações a mais, depois desse tutorial, mas estou disponibilizando abaixo o código final, para estudos. Coloquei som, coloquei fundo aleatório, botões, criei versão para computador e celular. Bom está tudo no código.

 

Existe muitas formas de fazer um jogo, deixando ele bem mais funcional. Mas espero que sirva de aprendizado, pois tem muitas funções javascript, e CSS avançado para ser estudado.

 

Arquivos

 

Baixe os arquivos zipados aqui para estudo.

 

Até mais…

 

 

 

Categoria: jogos | Tags: , , , , , , , | Postado por joemaster em 11/jul/2020

<< Anterior

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *