0% found this document useful (0 votes)
52 views3 pages

Zoomcar2 0

This document is an HTML file for a simple racing game that utilizes a canvas for graphics. Players control a car using the left and right arrow keys to avoid falling obstacles while scoring points. The game features increasing difficulty as the player progresses, with speed and obstacle frequency adjustments based on the score.

Uploaded by

ghearn1012
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
0% found this document useful (0 votes)
52 views3 pages

Zoomcar2 0

This document is an HTML file for a simple racing game that utilizes a canvas for graphics. Players control a car using the left and right arrow keys to avoid falling obstacles while scoring points. The game features increasing difficulty as the player progresses, with speed and obstacle frequency adjustments based on the score.

Uploaded by

ghearn1012
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>Racing Game</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
}
canvas {
border: 2px solid black;
}
#game-over {
position: absolute;
font-size: 48px;
color: red;
display: none;
}
#score {
position: absolute;
font-size: 24px;
color: black;
top: 10px;
left: 10px;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<div id="game-over">Game Over!</div>
<div id="score">Score: 0</div>

<script>
// Setup game canvas
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

const carWidth = 50;


const carHeight = 100;
let carX = canvas.width / 2 - carWidth / 2;
let carY = canvas.height - carHeight - 10;
let carSpeed = 5; // Initial speed of the car
let obstacles = [];
let obstacleSpeed = 3;
let score = 0;
let gameOver = false;

// Handle key press events for car movement


let leftPressed = false;
let rightPressed = false;

document.addEventListener('keydown', (e) => {


if (e.key === 'ArrowLeft') leftPressed = true;
if (e.key === 'ArrowRight') rightPressed = true;
});

document.addEventListener('keyup', (e) => {


if (e.key === 'ArrowLeft') leftPressed = false;
if (e.key === 'ArrowRight') rightPressed = false;
});

// Create an obstacle
function createObstacle() {
const x = Math.random() * (canvas.width - 50);
const y = -100;
obstacles.push({ x, y });
}

// Draw the car


function drawCar() {
ctx.fillStyle = 'red';
ctx.fillRect(carX, carY, carWidth, carHeight);
}

// Draw obstacles
function drawObstacles() {
ctx.fillStyle = 'green';
obstacles.forEach((obstacle) => {
ctx.fillRect(obstacle.x, obstacle.y, 50, 100);
});
}

// Move obstacles
function moveObstacles() {
obstacles.forEach((obstacle, index) => {
obstacle.y += obstacleSpeed;
if (obstacle.y > canvas.height) {
obstacles.splice(index, 1);
score++;
if (score % 5 === 0) { // Increase speed every 5 obstacles
avoided
obstacleSpeed += 0.5;
}
if (score % 3 === 0) { // Add a new obstacle every 3 score
points
createObstacle();
}
}
});
}

// Check for collisions


function checkCollisions() {
obstacles.forEach((obstacle) => {
if (carX < obstacle.x + 50 && carX + carWidth > obstacle.x &&
carY < obstacle.y + 100 && carY + carHeight > obstacle.y) {
gameOver = true;
}
});
}
// Draw score
function drawScore() {
const scoreElement = document.getElementById('score');
scoreElement.innerText = `Score: ${score}`;
}

// Update game state


function update() {
if (gameOver) {
document.getElementById('game-over').style.display = 'block';
return;
}

// Clear the canvas


ctx.clearRect(0, 0, canvas.width, canvas.height);

// Increase car speed over time (based on score)


if (score >= 5 && score < 10) {
carSpeed = 10; // Triple the initial speed
} else if (score >= 10 && score < 15) {
carSpeed = 15; // Further increase speed
} else if (score >= 15) {
carSpeed = 20; // Further increase speed
}

// Move car based on user input


if (leftPressed && carX > 0) {
carX -= carSpeed;
} else if (rightPressed && carX < canvas.width - carWidth) {
carX += carSpeed;
}

// Move obstacles
moveObstacles();

// Check for collisions


checkCollisions();

// Draw car, obstacles, and score


drawCar();
drawObstacles();
drawScore();

requestAnimationFrame(update);
}

// Start the game


function startGame() {
createObstacle(); // Create the first obstacle
update(); // Start the game loop
}

// Initialize the game


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

You might also like