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


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

O que você vai aprender nesse tutorial:

    • Como colocar obstáculos;
    • Como “perder o jogo” ao colidir com o obstáculo;

Então vamos lá.

Como colocar obstáculos no jogo

Vamos precisar desta imagem:

 

E vamos colocar duas divs a mais no código:

<div id="obstaculo"></div>
<div id="obstaculo2"></div>

E no css vamos adicionar:

#obstaculo
{
background: url('itens2.png');
background-position-x: -113px;
background-position-y: -108px;
position: absolute;
z-index:1009;
left: 440px;
top: 170px;
width:41px;
height:28px;
animation: play3 2s steps(10) infinite;
}

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

#obstaculo2
{
background: url('itens2.png');
background-position-x: -155px;
background-position-y: -75px;
position: absolute;
z-index:1009;
left: 440px;
top: 100px;
width:33px;
height:32px;
animation: play4 2s steps(10) infinite;
}

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

 

O resultado vai ser esse:

<!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;}
a{color: #0171BB; text-decoration: none; }
a:hover { color: #000; text-decoration: none; }

#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: 100px;
  height: 129px;
  margin: auto;
  position: absolute;
  top: 60px;
  left:40%;
  background: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/07/como-fazer-um-jogo-de-pular-obstaculos-e-pontuacao-com-html-css-e-javascript.png');
  background-position-x: 0px;
  background-position-y: 0px;
  animation: play1 .8s steps(6) infinite;
}

@keyframes play1 {
    0% { background-position-x: -5px; }
    100% { background-position-x: -548px; }
}

#chao {
  width: 100%;
  height: 112px;
  margin: auto;
  position: absolute;
  bottom: 0px;
  background: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/07/como-fazer-um-jogo-de-pular-obstaculos-e-pontuacao-com-html-css-e-javascript-2.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/como-fazer-um-jogo-de-pular-obstaculos-e-pontuacao-com-html-css-e-javascript-parte-2.jpg');
background-position-x: -113px;
background-position-y: -108px;
position: absolute;
z-index:1009;
left: 440px;
top: 170px;
width:41px;
height:28px;
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/como-fazer-um-jogo-de-pular-obstaculos-e-pontuacao-com-html-css-e-javascript-parte-2.jpg');
background-position-x: -155px;
background-position-y: -75px;
position: absolute;
z-index:1009;
left: 440px;
top: 100px;
width:33px;
height:32px;
animation: play4 2s steps(10) infinite;
}

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

</style> 

<script>
function pular() {
document.getElementById("personagem3").style.cssText = 'transition: all 0.3s  ease-out;'; 
document.getElementById("personagem3").style.top = "-30px";
setTimeout(function(){document.getElementById("personagem3").style.top = "60px";},200);
}

function rasteira() {
document.getElementById("personagem3").style.cssText = 'top:130px; transition: all 0.2s  ease-out; transform : rotate(-95deg);  animation: play1 3s steps(3) infinite;';
setTimeout(function(){document.getElementById("personagem3").style.cssText = 'transition: all 1s  ease-out;'; document.getElementById("personagem3").style.top = "60px";},500);
}
</script>
</head>
<body>
<br>
<div id="principal">
<center>
<div id="personagem3"></div>
<div id="obstaculo"></div>
<div id="obstaculo2"></div>
<div id="chao"></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>
</body>
</html>


 

Como “perder o jogo” ao colidir com o obstáculo

Agora vamos começar a criar funções para que o jogo rode, e se colidir em obstáculos, perde o jogo.

O que faremos e criar as funções.  Vamos mudar de lugar agora o <script> para o final da página, antes de fechar o </body> pois, carregar corretamente todas as funções, depois de chamar o CSS e o conteúdo das div’s.

Está tudo explicado, veja abaixo como criaremos o <script>

<script>
//funcoes do jogo

//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() {
document.getElementById("principal").innerHTML = '<div align=center style=font-size:40px><br><br><br><h1>Game Over</h1><a href=# onclick=history.go(0)>Play</a></div>';
}

// 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';
    }
}

//antes de comecar o jogo, já chamamos essa funcao
sortear();

// e depois ficamos chamando a cada 2s
setInterval(function(){sortear()},2000);

</script>

 

Vou colocar mais uma vez o código completo até agora, para testes, veja abaixo como fica:

*foi feito algumas alterações, no css para funcionar corretamente, mas não se preocupe, no final, vou disponibilizar o projeto completo para baixar. Coloquei uma borda nos elementos, para você entender as colisões.

<!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; }

#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:200px;
  background: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/07/como-fazer-um-jogo-de-pular-obstaculos-e-pontuacao-com-html-css-e-javascript.png');
  background-position-x: 7px;
  background-position-y: -30px;
  border:1px 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/como-fazer-um-jogo-de-pular-obstaculos-e-pontuacao-com-html-css-e-javascript-2.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/como-fazer-um-jogo-de-pular-obstaculos-e-pontuacao-com-html-css-e-javascript-parte-2.jpg');
background-position-x: -113px;
background-position-y: -108px;
position: absolute;
z-index:1009;
left: 440px;
top: 160px;
width:28px;
height:28px;
border:1px solid #000;
animation: play3 2s steps(10) infinite;
}

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

#obstaculo2
{
background: url('itens2.png');
background-position-x: -155px;
background-position-y: -75px;
position: absolute;
z-index:1009;
left: 440px;
top: 80px;
width:33px;
height:32px;
border:1px solid #000;
animation: play4 2s steps(10) infinite;
}

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

</style> 
</head>
<body>
<br>
<div id="principal">
<center>
<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>
<div id="pos"></div>

<script>
//funcoes do jogo

//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() {
document.getElementById("principal").innerHTML = '<div align=center style=font-size:40px><br><br><br><h1>Game Over</h1><a href=# onclick=history.go(0)>Play</a></div>';
}

// 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';
    }
}

//antes de comecar o jogo, já chamamos essa funcao
sortear();

// e depois ficamos chamando a cada 2s
setInterval(function(){sortear()},2000);

</script>

</body>
</html>


 

Bom vou dividir para terceira parte, para finalizar. E não ficar tão extenso.

 

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

<< Anterior

Próximo >>

Deixe um comentário

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