Continuando o jogo, agora vamos continuar os seguintes itens. Se você não viu a primeira etapa, clique aqui, senão continue abaixo.
Então vamos lá.
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;">🔽</a> <a href="javascript:;;" onClick="pular();" style="right:0px;top:40%;position: absolute;font-size:20px;">🔼</a> </center> </div> </body> </html>
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;">🔽</a> <a href="javascript:;;" onClick="pular();" style="right:0px;top:40%;position: absolute;font-size:20px;">🔼</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.
<< Anterior Como fazer um jogo de pular, obstáculos e pontuação com HTML CSS e Javascript
Deixe um comentário