Crie um jogo aonde movemos um quadrado que deve comer "comidas" espalhadas aleatoriamente pelo mapa a cada uma comida que ele comer outra ira nascer em outro local do mapa deve ter várias comidas simultaneamente, ele terá um contador de score para cada comida que comer vai ganhar um ponto, toda partida a cor do quadrado será diferente, então o objetivo do jogo é comer comida para ganhar ponto e ficar maior, ele deve crescer um pouco a cada comida que comer.'s game

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

No:52929

1050

←

Prev Next

→

Crie um jogo aonde movemos um quadrado que deve co..ALL
Developer User19080｜Date and time 24/3/27 0:11:19
Build time 15.03 sec｜Game capacity 1.957KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Jogo do Quadrado</title>
	<style type="text/css">
		#quadrado {
			width: 50px;
			height: 50px;
			background-color: #ff0000;
			position: absolute;
		}

.comida {
			width: 10px;
			height: 10px;
			background-color: #00ff00;
			position: absolute;
		}
	</style>
</head>
<body>
	<div id="quadrado"></div>
	<script>
		let score = 0;
		let tamanhoQuadrado = 1;
		let vel = 10;
		let comidaArray = [];

function criarComida() {
			let comida = document.createElement('div');
			comida.className = 'comida';
			comida.style.left = Math.floor(Math.random() * window.innerWidth) + 'px';
			comida.style.top = Math.floor(Math.random() * window.innerHeight) + 'px';
			document.body.appendChild(comida);
			comidaArray.push(comida);
		}

document.addEventListener('keydown', function(event) {
			let quadrado = document.getElementById('quadrado');

if(event.key === 'ArrowUp') {
				let top = parseInt(quadrado.style.top) - vel;
				quadrado.style.top = top + 'px';
			} else if(event.key === 'ArrowDown') {
				let top = parseInt(quadrado.style.top) + vel;
				quadrado.style.top = top + 'px';
			} else if(event.key === 'ArrowLeft') {
				let left = parseInt(quadrado.style.left) - vel;
				quadrado.style.left = left + 'px';
			} else if(event.key === 'ArrowRight') {
				let left = parseInt(quadrado.style.left) + vel;
				quadrado.style.left = left + 'px';
			}

comidaArray.forEach(function(comida, index) {
				if(colisao(quadrado, comida)) {
					score++;
					tamanhoQuadrado++;
					document.body.removeChild(comida);
					comidaArray.splice(index, 1);
					criarComida();
				}
			});
		});

function colisao(elem1, elem2) {
			let ret1 = elem1.getBoundingClientRect();
			let ret2 = elem2.getBoundingClientRect();

return !(
				ret1.right < ret2.left ||
				ret1.left > ret2.right ||
				ret1.bottom < ret2.top ||
				ret1.top > ret2.bottom
			);
		}

criarComida();
	</script>
</body>
</html>