Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Chatbox

    Lembre-se de ler as nossas regras!
    Load More
    You don't have permission to chat.

Recommended Posts

WZgvloa.png.e6af021924977d6b8d58180d58699972.png

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.

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

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:

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

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

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.

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

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

  • Like 1
  • Haha 1
  • Angry 1

Share this post


Link to post
Share on other sites
12 horas atrás, Wiz-Khalifa disse:

cade print ?

https://d.rawer.com.br/matamosquito

12 horas atrás, DEUS DA WAR disse:

Amigo, O Link do mega para download das imagens está codificado.😑

Link do download atualizado, peço desculpas pelo ocorrido.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×