「JavaScript」Mata Mosquito 13.02.19 12:31
Em meu curso de Desenvolvimento Web Completo, cada seção possui um projeto ou mais e na seção de JavaScript, tínhamos uma aula sobre um jogo de mata-mosquito em HTML5, Bootstrap e JavaScript. Hoje, estarei ensinando passo a passo para você fazer a seu próprio joguinho xD
Antes de tudo baixe as imagens do jogo:
1° Etapa — Crie o arquivo app.html e sua estrutura.
2° Etapa — Crie o arquivo estilo.css e cole o código a seguir:
3° Etapa — Crie o arquivo vitoria.html e cole a codificação a seguir:
4° Etapa — Crie o arquivo fim_de_jogo.html e cole a codificação a seguir:
5° Etapa — Agora crie o arquivo jogo.js e use o seguinte código JavaScript:
6° Etapa — Agora adicione o seguinte script no arquivo app.html, coloque antes da tag </body>. Assim a criação de mosquitos e o cronometro irão funcionar perfeitamente.
7° Etapa — E por fim crie o arquivo index.html para poder aparecer a tela inicial do jogo com a seleção dos níveis, cole o seguinte código:
8° Etapa — Dessa forma seu jogo estará funcionando, só basta você matar os mosquitos que estão na sua tela xD. Obs: se você der um inspecionar e for em console irá perceber que a coordenada da imagem muda de local.
Antes de tudo baixe as imagens do jogo:
- Spoiler:
- https://mega.nz/#!tzJAFSiC!uGZLMxHx1hO57BSCVADs1LerAHcnl7TwPFfZ83lCz3k
1° Etapa — Crie o arquivo app.html e sua estrutura.
- Código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mata Mosquito</title>
<link rel="stylesheet" href="estilo.css" />
<script src="jogo.js"></script>
</head>
<body onresize="ajustaTamanhoPalcoJogo()">
<div class="painel">
<div class="vidas">
<img id="v1" src="imagens/coracao_cheio.png" />
<img id="v2" src="imagens/coracao_cheio.png" />
<img id="v3" src="imagens/coracao_cheio.png" />
</div>
<div class="cronometro">Tempo restante: <span id="cronometro"></span></div>
</div>
</body>
</html>
2° Etapa — Crie o arquivo estilo.css e cole o código a seguir:
- Código:
html {
cursor: url(imagens/mata_mosquito.png) 30 30, auto;
}
body {
background-image: url(imagens/bg.jpg);
background-repeat: no-repeat;
}
.mosquito1 {
width: 50px;
height: 50px;
}
.mosquito2 {
width: 70px;
height: 70px;
}
.mosquito3 {
width: 90px;
height: 90px;
}
.ladoA {
transform: scaleX(1);
}
.ladoB {
transform: scaleX(-1);
}
.painel {
position: absolute;
width: 190px;
padding: 10px;
left: 0px;
bottom: 0px;
border-top:solid 1px #fff;
background-color: #fff;
opacity: 0.7
}
.vidas {
float: left;
}
.cronometro {
float: left;
font-size: 20px;
font-weight: bold;
}
3° Etapa — Crie o arquivo vitoria.html e cole a codificação a seguir:
- Código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vitória - Mata Mosquito</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="d-flex justify-content-center">
<img src="imagens/vitoria.png">
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="d-flex justify-content-center">
<button type="button" class="btn btn-dark btn-lg" onclick="window.location.href = 'index.html' ">Reiniciar</button>
</div>
</div>
</div>
</div>
</body>
</html>
4° Etapa — Crie o arquivo fim_de_jogo.html e cole a codificação a seguir:
- Código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Game Over - Mata Mosquito</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="d-flex justify-content-center">
<img src="imagens/game_over.png">
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="d-flex justify-content-center">
<button type="button" class="btn btn-dark btn-lg" onclick="window.location.href = 'index.html' ">Reiniciar</button>
</div>
</div>
</div>
</div>
</body>
</html>
5° Etapa — Agora crie o arquivo jogo.js e use o seguinte código JavaScript:
- Código:
var altura = 0
var largura = 0
var vidas = 1
var tempo = 15
var criaMosquitoTempo = 1500
var nivel = window.location.search
nivel = nivel.replace('?', '')
if(nivel === 'normal') {
//1500
criaMosquitoTempo = 1500
} else if(nivel === 'dificil') {
//1000
criaMosquitoTempo = 1000
} else if (nivel === 'chucknorris') {
//750
criaMosquitoTempo = 750
}
function ajustaTamanhoPalcoJogo() {
altura = window.innerHeight
largura = window.innerWidth
console.log(largura, altura)
}
ajustaTamanhoPalcoJogo()
var cronometro = setInterval(function() {
tempo -= 1
if(tempo < 0) {
clearInterval(cronometro)
clearInterval(criaMosca)
window.location.href = 'vitoria.html'
} else {
document.getElementById('cronometro').innerHTML = tempo
}
}, 1000)
function posicaoRandomica() {
//remover o mosquito anterior (caso exista)
if(document.getElementById('mosquito')) {
document.getElementById('mosquito').remove()
//console.log('elemento selecionado foi: v' + vidas)
if(vidas > 3) {
window.location.href = 'fim_de_jogo.html'
} else {
document.getElementById('v' + vidas).src = "imagens/coracao_vazio.png"
vidas++
}
}
var posicaoX = Math.floor(Math.random() * largura) - 90
var posicaoY = Math.floor(Math.random() * altura) - 90
posicaoX = posicaoX < 0 ? 0 : posicaoX
posicaoY = posicaoY < 0 ? 0 : posicaoY
console.log(posicaoX, posicaoY)
//criar o elemento html
var mosquito = document.createElement('img')
mosquito.src = 'imagens/mosquito.png'
mosquito.className = tamanhoAleatorio() + ' ' + ladoAleatorio()
mosquito.style.left = posicaoX + 'px'
mosquito.style.top = posicaoY + 'px'
mosquito.style.position = 'absolute'
mosquito.id = 'mosquito'
mosquito.onclick = function() {
this.remove()
}
document.body.appendChild(mosquito)
}
function tamanhoAleatorio() {
var classe = Math.floor(Math.random() * 3)
switch(classe) {
case 0:
return 'mosquito1'
case 1:
return 'mosquito2'
case 2:
return 'mosquito3'
}
}
function ladoAleatorio() {
var classe = Math.floor(Math.random() * 2)
switch(classe) {
case 0:
return 'ladoA'
case 1:
return 'ladoB'
}
}
6° Etapa — Agora adicione o seguinte script no arquivo app.html, coloque antes da tag </body>. Assim a criação de mosquitos e o cronometro irão funcionar perfeitamente.
- Código:
<script>
document.getElementById('cronometro').innerHTML = tempo
var criaMosca = setInterval(function() {
posicaoRandomica()
}, criaMosquitoTempo)
</script>
7° Etapa — E por fim crie o arquivo index.html para poder aparecer a tela inicial do jogo com a seleção dos níveis, cole o seguinte código:
- Código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mata Mosquito</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="estilo.css">
<script>
function iniciarJogo() {
var nivel = document.getElementById('nivel').value
if(nivel === '') {
alert('Selecione um nível para iniciar o jogo')
return false
}
window.location.href = "app.html?" + nivel
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="d-flex justify-content-center">
<img src="imagens/game.png">
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="d-flex justify-content-center">
<div class="mb-2">
<select class="form-control" id="nivel">
<option value="">-- Selecione o nível --</option>
<option value="normal">Normal</option>
<option value="dificil">Difícil</option>
<option value="chucknorris">Chuck Norris</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="d-flex justify-content-center">
<button type="button" class="btn btn-danger btn-lg" onclick="iniciarJogo()" >Iniciar Jogo</button>
</div>
</div>
</div>
</div>
</body>
</html>
8° Etapa — Dessa forma seu jogo estará funcionando, só basta você matar os mosquitos que estão na sua tela xD. Obs: se você der um inspecionar e for em console irá perceber que a coordenada da imagem muda de local.
