[go: up one dir, main page]
Scribd
Upload
47 views3 pages

!DOCTYPE HTML

This document contains the code for a simple racing game implemented in HTML, CSS, and JavaScript. The game features a car that the player can move left and right to avoid falling obstacles while scoring points. The game ends when the car collides with an obstacle, displaying a 'Game Over' message.

Uploaded by

Pramod Bathe
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
47 views3 pages

!DOCTYPE HTML

This document contains the code for a simple racing game implemented in HTML, CSS, and JavaScript. The game features a car that the player can move left and right to avoid falling obstacles while scoring points. The game ends when the car collides with an obstacle, displaying a 'Game Over' message.

Uploaded by

Pramod Bathe
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">
<title>Simple Racing Game</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #e0e0e0;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.game-container {
position: relative;
width: 300px;
height: 500px;
background-color: #2e2e2e;
border: 2px solid #333;
overflow: hidden;
}
.car {
position: absolute;
width: 40px;
height: 80px;
background-color: #ff5733;
bottom: 0;
left: 50%;
margin-left: -20px; /* Center the car */
}
.obstacle {
position: absolute;
width: 40px;
height: 40px;
background-color: #444;
top: -40px;
left: 50%;
margin-left: -20px; /* Center the obstacle */
}
#score {
position: absolute;
top: 10px;
left: 10px;
color: white;
font-size: 20px;
}
#gameOver {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
color: red;
display: none;
}
</style>
</head>
<body>

<div class="game-container" id="gameContainer">


<div id="score">Score: 0</div>
<div id="gameOver">Game Over!</div>
<div class="car" id="car"></div>
</div>

<script>
const gameContainer = document.getElementById("gameContainer");
const car = document.getElementById("car");
const scoreElement = document.getElementById("score");
const gameOverElement = document.getElementById("gameOver");

let carPositionX = 130; // Initial position of the car (centered)


let score = 0;
let gameOver = false;
let obstacles = [];
let obstacleSpeed = 3;

// Update the car's position


function updateCarPosition() {
car.style.left = carPositionX + 'px';
}

// Handle key events to move the car left and right


document.addEventListener("keydown", function(event) {
if (gameOver) return;

if (event.key === "ArrowLeft" && carPositionX > 0) {


carPositionX -= 20;
} else if (event.key === "ArrowRight" && carPositionX <
gameContainer.offsetWidth - car.offsetWidth) {
carPositionX += 20;
}
updateCarPosition();
});

// Generate new obstacle


function createObstacle() {
const obstacle = document.createElement("div");
obstacle.classList.add("obstacle");
obstacle.style.left = Math.random() * (gameContainer.offsetWidth - 40) +
"px";
gameContainer.appendChild(obstacle);
obstacles.push(obstacle);
}

// Move obstacles and check for collision


function moveObstacles() {
obstacles.forEach(obstacle => {
let obstacleTop = parseInt(obstacle.style.top) || 0;
obstacle.style.top = obstacleTop + obstacleSpeed + "px";

// Check for collision


if (obstacleTop + 40 >= gameContainer.offsetHeight - 80 &&
obstacle.style.left === car.style.left) {
gameOver = true;
gameOverElement.style.display = "block";
}

// Remove obstacle when it goes off screen


if (obstacleTop > gameContainer.offsetHeight) {
obstacle.remove();
}
});
}

// Update the score


function updateScore() {
score++;
scoreElement.textContent = `Score: ${score}`;
}

// Game loop
function gameLoop() {
if (gameOver) return;

moveObstacles();
updateScore();

if (Math.random() < 0.05) {


createObstacle();
}

requestAnimationFrame(gameLoop);
}

// Start the game


gameLoop();
</script>

</body>
</html>

You might also like