Scribd
Upload
16 views3 pages

Texto

texto

Uploaded by

matheusbarcelosq
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
16 views3 pages

Texto

texto

Uploaded by

matheusbarcelosq
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Jogo da Bola</title>
</head>
<body>
<div class="game-container">
<div class="ball"></div>
<div class="obstacle"></div>
<div class="score">Pontuação: <span id="score">0</span></div>
</div>

<script src="script.js"></script>
</body>
</html>

/* Estilos para o jogo */


body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}

.game-container {
position: relative;
width: 400px;
height: 400px;
background-color: #ddd;
}

.ball {
position: absolute;
width: 30px;
height: 30px;
background-color: #3498db;
border-radius: 50%;
bottom: 0;
left: 50%;
transform: translateX(-50%);
transition: 0.2s ease-in-out;
}

.obstacle {
position: absolute;
width: 20px;
height: 100px;
background-color: #e74c3c;
bottom: 0;
left: 70%;
transform: translateX(-50%);
animation: moveObstacle 5s linear infinite;
}
.score {
position: absolute;
top: 10px;
right: 10px;
font-size: 18px;
}

@keyframes moveObstacle {
0% {
left: 100%;
}
100% {
left: -20px;
}
}

const ball = document.querySelector(".ball");


const obstacle = document.querySelector(".obstacle");
const scoreElement = document.getElementById("score");

let score = 0;
let speed = 1;

function updateScore() {
score += 100;
scoreElement.textContent = score;

if (score % 100 === 0) {


speed *= 1.02; // Aumenta a velocidade em 2% a cada 100 pontos
}

if (score >= 10000) {


alert("Você ganhou! Pontuação: " + score);
location.reload();
}
}

function checkCollision() {
const ballRect = ball.getBoundingClientRect();
const obstacleRect = obstacle.getBoundingClientRect();

if (ballRect.left < obstacleRect.left + obstacleRect.width &&


ballRect.left + ballRect.width > obstacleRect.left &&
ballRect.top < obstacleRect.top + obstacleRect.height &&
ballRect.top + ballRect.height > obstacleRect.top) {
alert("Game Over! Pontuação: " + score);
location.reload();
}
}

function gameLoop() {
updateScore();
checkCollision();

const bottomPos = parseFloat(getComputedStyle(ball).bottom);


ball.style.bottom = (bottomPos + speed) + "px";

requestAnimationFrame(gameLoop);
}

document.addEventListener("keydown", (event) => {


if (event.key === "ArrowUp") {
const bottomPos = parseFloat(getComputedStyle(ball).bottom);
if (bottomPos < 370) { // Limita o salto para evitar saltos repetidos
ball.style.bottom = (bottomPos + 50) + "px";
}
}
});

gameLoop();

You might also like