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


Hoje vamos aprender um jogo rápido que pode ser usado como base para qualquer outro jogo de obstáculos.

O que você vai aprender nesse tutorial:

  • Como montar o cenário;
  • Como animar o cenário com CSS;
  • Como interagir com o cenário usando javascript;
  • Como colocar obstáculos;
  • Como “perder o jogo” ao colidir com o obstáculo;
  • Como colocar pontuação;
  • Como salvar pontuação;
  • Como reiniciar o jogo;
  • Considerações finais;

O jogo vai ficar assim:

Mesmo sendo simples, você vai aprender muitas coisas para usar em seus outros projetos.

 

Como montar o cenário

Para montarmos o cenário, vamos precisar as seguintes imagens;

Para o chão, usaremos esta imagem;

 

Para a animação do coelho, vamos usar essa imagem:

 

Pode copiar com o botão direito:

 

Para começar, vamos montar o cenário da seguinte forma:

<!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">

</head>
<body>
<br>
<div id="principal">
<center>
<div id="personagem3"></div>
<div id="chao"></div>
</center>
</div>
</body>
</html>

Vamos criar a div principal , div personagem3, e div chão.

 

Como animar o cenário com CSS

Agora vamos colocar o style em head da seguinte forma

<style> 
/*configuraçoes gerais */
body {margin: auto;}
a{color: #0171BB; text-decoration: none; }
a:hover { color: #000; text-decoration: none; }

/*configuraçoes do cenário do jogo*/
#principal {
  background-color: #fff;
  margin: auto;
  position: relative;
  max-width: 500px;
  height: 300px;
  border: 3px solid #73AD21;
}

/*configuraçoes do personagem */
#personagem3 {
  z-index:1000;
  width: 100px;
  height: 129px;
  margin: auto;
  position: absolute;
  top: 60px;
  left:40%;
  background: url('coelho.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; }
}

/*configuraçoes do chão */

#chao {
  width: 100%;
  height: 112px;
  margin: auto;
  position: absolute;
  bottom: 0px;
  background: url('chao.png')0px 0px;
  animation: play2 2s steps(10) infinite;
}

@keyframes play2 {
    100% { background-position-x: -112px; }
}
</style>

Para entender esse modelo de animação, você pode acessar esse outro post que fiz

criando-uma-animacoes-em-css-sprite-sheet-com-steps que explica bem:

 

No modo completo vai ficar assim:

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


</style> 
</head>
<body>
<br>
<div id="principal">
<center>
<div id="personagem3"></div>
<div id="chao"></div>
</center>
</div>
</body>
</html>


Vamos para a próxima etapa agora

Como interagir com o cenário usando javascript

Vamos colocar o seguinte código em javascript

<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>

E abaixo das div o seguinte código

<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>

 

Completo vai ficar assim

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

/*configuraçoes gerais */
body {margin: auto;}
a{color: #0171BB; text-decoration: none; }
a:hover { color: #000; text-decoration: none; }

/*configuraçoes do cenário do jogo */
#principal {
  background-color: #fff;
  margin: auto;
  position: relative;
  max-width: 500px;
  max-width: 500px;
  height: 300px;
  border: 3px solid #73AD21;
}


/*configuraçoes do personagem do jogo*/
#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; }
}

/*configuraçoes do chão jogo*/

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


</style> 

<script>

//configurações de pular
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);
}

//configurações de abaixar
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="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>


 

Essa primeira etapa, terminamos, no próximo POST, vamos continuar com animação.

 

 

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

Próximo >>

Deixe um comentário

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