Hoje vamos aprender um jogo rápido que pode ser usado como base para qualquer outro jogo de obstáculos.
O jogo vai ficar assim:
Mesmo sendo simples, você vai aprender muitas coisas para usar em seus outros projetos.
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.
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
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;">🔽</a> <a href="javascript:;;" onClick="pular();" style="right:0px;top:40%;position: absolute;font-size:20px;">🔼</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;">🔽</a> <a href="javascript:;;" onClick="pular();" style="right:0px;top:40%;position: absolute;font-size:20px;">🔼</a> </center> </div> </body> </html>
Essa primeira etapa, terminamos, no próximo POST, vamos continuar com animação.
Deixe um comentário