Click here for free DL of the app version that can save data.

No:3191

712

Game where I am a frog
Developer User3674｜Date and time 23/6/24 4:40:45
Build time 66.487 sec｜Game capacity 4.904KB｜

que precisa atravessar a rua sem ser atropelado.

Eu sou um sapo

→ 　

0　

0　

　
　
　
　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

(C)2023 HisashiApp

que precisa atravessar a rua sem ser atropelado.

<!DOCTYPE html>
<html>
<head>
	<title>Eu sou um sapo</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #A8DADC;
			margin: 0;
			padding: 0;
			font-family: sans-serif;
		}
		
		h1 {
			text-align: center;
			margin-top: 1rem;
			font-size: 2rem;
			color: #1D3557;
		}
		
		#jogo {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			padding-top: 2rem;
			padding-bottom: 2rem;
		}
		
		.bloco {
			width: 4rem;
			height: 4rem;
			background-color: #F1FAEE;
			border: 1px solid #457B9D;
			margin: 0.2rem;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 2rem;
			color: #1D3557;
		}
		
		.sapo {
			background-color: #E63946;
			color: white;
		}
		
		.carro {
			background-color: #457B9D;
			color: white;
		}
		
		#pontos {
			text-align: center;
			margin-top: 1rem;
			font-size: 1rem;
			color: #1D3557;
		}
		
		.botao {
			display: block;
			margin: 0 auto;
			margin-top: 1rem;
			padding: 0.5rem 1rem;
			background-color: #1D3557;
			color: white;
			border: none;
			border-radius: 0.2rem;
			font-size: 1rem;
			cursor: pointer;
		}
		
	</style>
</head>
<body>
	<h1>Eu sou um sapo</h1>
	<div id="jogo">
	</div>
	<div id="pontos"></div>
	<button class="botao" onclick="iniciar()">Jogar novamente</button>

<script>
	var jogador = { posX: 6, posY: 9 };
	var carros = [
		{ posX: 0, posY: 8, direcao: 'direita' },
		{ posX: 8, posY: 7, direcao: 'esquerda' },
		{ posX: 0, posY: 6, direcao: 'direita' },
		{ posX: 8, posY: 5, direcao: 'esquerda' },
		{ posX: 0, posY: 4, direcao: 'direita' },
		{ posX: 8, posY: 3, direcao: 'esquerda' },
		{ posX: 0, posY: 2, direcao: 'direita' },
		{ posX: 8, posY: 1, direcao: 'esquerda' }
	];
	var pontos = 0;
	var intervaloMovimento;
	
	criarJogo();
	
	function criarJogo() {
		var jogo = document.getElementById("jogo");
		jogo.innerHTML = "";
		
		for (var i = 0; i < 10; i++) {
			for (var j = 0; j < 10; j++) {
				var bloco = document.createElement("div");
				bloco.classList.add("bloco");
				
				if (i === jogador.posX && j === jogador.posY) {
					bloco.classList.add("sapo");
				}
				
				for (var k = 0; k < carros.length; k++) {
					if (i === carros[k].posX && j === carros[k].posY) {
						bloco.classList.add("carro");
						break;
					}
				}
				
				jogo.appendChild(bloco);
			}
		}
		
		atualizarPontos();
	}
	
	function moverJogador(direcao) {
		switch (direcao) {
			case 'cima':
				if (jogador.posX > 0) {
					jogador.posX--;
				}
				break;
			case 'baixo':
				if (jogador.posX < 9) {
					jogador.posX++;
				}
				break;
			case 'esquerda':
				if (jogador.posY > 0) {
					jogador.posY--;
				}
				break;
			case 'direita':
				if (jogador.posY < 9) {
					jogador.posY++;
				}
				break;
			default:
				break;
		}
		
		verificarColisao();
		criarJogo();
	}
	
	function moverCarros() {
		for (var i = 0; i < carros.length; i++) {
			switch (carros[i].direcao) {
				case 'direita':
					if (carros[i].posY < 9) {
						carros[i].posY++;
					} else {
						carros[i].posY = 0;
					}
					break;
				case 'esquerda':
					if (carros[i].posY > 0) {
						carros[i].posY--;
					} else {
						carros[i].posY = 9;
					}
					break;
				default:
					break;
			}
		}
		
		verificarColisao();
		criarJogo();
	}
	
	function verificarColisao() {
		for (var i = 0; i < carros.length; i++) {
			if (jogador.posX === carros[i].posX && jogador.posY === carros[i].posY) {
				alert("Game over!");
				pontos = 0;
				clearInterval(intervaloMovimento);
				criarJogo();
				return;
			}
		}
		
		if (jogador.posX === 0) {
			pontos++;
			criarJogo();
		}
	}
	
	function atualizarPontos() {
		var pontosElement = document.getElementById("pontos");
		pontosElement.innerHTML = "Pontuação: " + pontos;
	}
	
	function iniciar() {
		jogador.posX = 6;
		jogador.posY = 9;
		carros = [
			{ posX: 0, posY: 8, direcao: 'direita' },
			{ posX: 8, posY: 7, direcao: 'esquerda' },
			{ posX: 0, posY: 6, direcao: 'direita' },
			{ posX: 8, posY: 5, direcao: 'esquerda' },
			{ posX: 0, posY: 4, direcao: 'direita' },
			{ posX: 8, posY: 3, direcao: 'esquerda' },
			{ posX: 0, posY: 2, direcao: 'direita' },
			{ posX: 8, posY: 1, direcao: 'esquerda' }
		];
		pontos = 0;
		clearInterval(intervaloMovimento);
		intervaloMovimento = setInterval(function() {
			moverCarros();
			atualizarPontos();
		}, 1000);
		criarJogo();
	}
	
	document.addEventListener('keydown', (event) => {
  		const keyName = event.key;
  
  		if (keyName === 'ArrowUp') {
  			moverJogador('cima');
  		}
  		
  		if (keyName === 'ArrowDown') {
  			moverJogador('baixo');
  		}
  		
  		if (keyName === 'ArrowLeft') {
  			moverJogador('esquerda');
  		}
  		
  		if (keyName === 'ArrowRight') {
  			moverJogador('direita');
  		}
	});
	</script>
</body>
</html>