Scribd
Upload
2 views3 pages

Zoomcar2.0

Uploaded by

ghearn1012

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.

Copyright:

© All Rights Reserved
Download as TXT, PDF, TXT or read online from Scribd
Download as txt, pdf, or txt

Zoomcar2.0

Uploaded by

ghearn1012
2 views3 pages
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.

Copyright

© © All Rights Reserved

Available Formats

TXT, PDF, TXT or read online from Scribd

Did you find this document useful?

Is this content inappropriate?

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.

Copyright:

© All Rights Reserved
Download as TXT, PDF, TXT or read online from Scribd
Download as txt, pdf, or txt
2 views3 pages

Zoomcar2.0

Uploaded by

ghearn1012
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.

Copyright:

© All Rights Reserved
Download as TXT, PDF, TXT or read online from Scribd
Download as txt, pdf, or txt
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