CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Car Dash</title>
<style>
.cardash7845-body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.cardash7845-game-container {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 20px;
}
.cardash7845-canvas {
border: 2px solid #333;
background-color: #ccc;
}
.cardash7845-info {
max-width: 300px;
}
.cardash7845-button {
margin: 5px 0;
padding: 10px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
}
.cardash7845-button:hover {
background-color: #45a049;
}
@media (max-width: 768px) {
.cardash7845-game-container {
flex-direction: column;
align-items: center;
}
}
</style>
</head>
<body class="cardash7845-body">
<div class="cardash7845-game-container">
<canvas id="gameCanvas" class="cardash7845-canvas" width="400" height="600"></canvas>
<div class="cardash7845-info">
<h1>Car Dash</h1>
<p>Dodge obstacles and survive as long as you can!</p>
<h3>Instructions:</h3>
<ul>
<li>Use left and right arrow keys to move the car</li>
<li>Avoid hitting obstacles</li>
<li>The game gets faster over time</li>
</ul>
<button id="startButton" class="cardash7845-button">Start Game</button>
<button id="newGameButton" class="cardash7845-button">New Game</button>
<p>Score: <span id="score">0</span></p>
</div>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const startButton = document.getElementById('startButton');
const newGameButton = document.getElementById('newGameButton');
const scoreElement = document.getElementById('score');
let car, obstacles, score, gameLoop, isGameRunning;
class Car {
constructor() {
this.width = 40;
this.height = 70;
this.x = canvas.width / 2 - this.width / 2;
this.y = canvas.height - this.height - 10;
this.speed = 5;
}
draw() {
ctx.fillStyle = 'blue';
ctx.fillRect(this.x, this.y, this.width, this.height);
}
moveLeft() {
if (this.x > 0) this.x -= this.speed;
}
moveRight() {
if (this.x < canvas.width - this.width) this.x += this.speed;
}
}
class Obstacle {
constructor(y = -20) {
this.width = 60;
this.height = 20;
this.x = Math.random() * (canvas.width - this.width);
this.y = y;
this.speed = 2;
}
draw() {
ctx.fillStyle = 'red';
ctx.fillRect(this.x, this.y, this.width, this.height);
}
update() {
this.y += this.speed;
if (this.y > canvas.height) {
this.y = -this.height;
this.x = Math.random() * (canvas.width - this.width);
}
}
}
function init() {
car = new Car();
obstacles = [new Obstacle(-20), new Obstacle(-220), new Obstacle(-420)];
score = 0;
isGameRunning = false;
scoreElement.textContent = score;
}
function drawGame() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
car.draw();
obstacles.forEach(obstacle => obstacle.draw());
}
function updateGame() {
obstacles.forEach(obstacle => {
obstacle.update();
if (checkCollision(car, obstacle)) {
gameOver();
}
});
score++;
scoreElement.textContent = score;
if (score % 500 === 0) increaseSpeed();
}
function checkCollision(car, obstacle) {
return car.x < obstacle.x + obstacle.width &&
car.x + car.width > obstacle.x &&
car.y < obstacle.y + obstacle.height &&
car.y + car.height > obstacle.y;
}
function gameOver() {
isGameRunning = false;
cancelAnimationFrame(gameLoop);
alert(`Game Over! Your score: ${score}`);
}
function increaseSpeed() {
obstacles.forEach(obstacle => obstacle.speed += 0.5);
}
function gameLoop() {
if (isGameRunning) {
updateGame();
drawGame();
requestAnimationFrame(gameLoop);
}
}
startButton.addEventListener('click', () => {
if (!isGameRunning) {
isGameRunning = true;
gameLoop();
}
});
newGameButton.addEventListener('click', () => {
cancelAnimationFrame(gameLoop);
init();
drawGame();
});
document.addEventListener('keydown', (e) => {
if (isGameRunning) {
if (e.key === 'ArrowLeft') car.moveLeft();
if (e.key === 'ArrowRight') car.moveRight();
}
});
init();
drawGame();
</script>
</body>
</html>