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. Crie uma janela de 800×600's game

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

No:52930

473

←

Prev Next

→

Crie um jogo aonde movemos um quadrado que deve co..ALL
Developer User19080｜Date and time 24/3/27 0:12:22
Build time 13.398 sec｜Game capacity 2.009KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>Jogo da Comida</title>
	<style>
		#gameArea {
			width: 800px;
			height: 600px;
			background-color: #f0f0f0;
			position: relative;
		}
		#player {
			width: 20px;
			height: 20px;
			background-color: #ff0000;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.food {
			width: 10px;
			height: 10px;
			background-color: #00ff00;
			position: absolute;
		}
	</style>
</head>
<body>
	<div id="gameArea">
		<div id="player"></div>
	</div>

function createFood() {
			let food = document.createElement("div");
			food.classList.add("food");
			food.style.left = Math.floor(Math.random() * 780) + "px";
			food.style.top = Math.floor(Math.random() * 580) + "px";
			gameArea.appendChild(food);
		}

function eatFood(food) {
			gameArea.removeChild(food);
			score++;
		}

window.addEventListener("keydown", function(event) {
			let x = player.offsetLeft;
			let y = player.offsetTop;

if(event.key === "ArrowLeft") {
				x -= 10;
			} else if(event.key === "ArrowRight") {
				x += 10;
			} else if(event.key === "ArrowUp") {
				y -= 10;
			} else if(event.key === "ArrowDown") {
				y += 10;
			}

player.style.left = x + "px";
			player.style.top = y + "px";

let foods = document.getElementsByClassName("food");

for(let food of foods) {
				if(isColliding(player, food)) {
					eatFood(food);
					createFood();
					player.style.width = parseInt(player.style.width) + 2 + "px";
					player.style.height = parseInt(player.style.height) + 2 + "px";
				}
			}
		});

function isColliding(a, b) {
			let aRect = a.getBoundingClientRect();
			let bRect = b.getBoundingClientRect();

return !(
				aRect.bottom < bRect.top ||
				aRect.top > bRect.bottom ||
				aRect.right < bRect.left ||
				aRect.left > bRect.right
			);
		}

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