Comments
racer game
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Racer Game</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.game-container {
position: relative;
width: 100%;
max-width: 800px;
margin: 20px;
}
background: #2d3436;
border-radius: 12px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
display: block;
margin: 0 auto;
border: 3px solid #00b894;
}
.game-ui {
position: absolute;
top: 20px;
left: 20px;
color: white;
font-size: 18px;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
.controls {
margin-top: 20px;
text-align: center;
color: white;
font-size: 14px;
}
.controls p {
margin: 5px 0;
color: #dfe6e9;
}
.game-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 12px;
color: white;
text-align: center;
}
.title {
font-size: 3em;
font-weight: bold;
margin-bottom: 20px;
color: #00b894;
text-shadow: 0 0 20px rgba(0, 184, 148, 0.5);
}
.subtitle {
font-size: 1.2em;
margin-bottom: 30px;
color: #dfe6e9;
}
.btn {
background: linear-gradient(45deg, #00b894, #00cec9);
border: none;
padding: 15px 40px;
font-size: 1.2em;
border-radius: 50px;
color: white;
cursor: pointer;
margin: 10px;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 184, 148, 0.3);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 184, 148, 0.4);
}
.btn:active {
transform: translateY(0);
}
.score-display {
font-size: 1.5em;
margin-bottom: 20px;
color: #00b894;
}
.hidden {
display: none;
}
@media 
(max-width: 600px) {
.title {
font-size: 2em;
}
.subtitle {
font-size: 1em;
}
.btn {
padding: 12px 30px;
font-size: 1em;
}
}
</style>
</head>
<body>
<div class="game-container">
<canvas id="gameCanvas" width="800" height="600"></canvas>
<div class="game-ui">
<div id="score">Score: 0</div>
<div id="lives">Lives: 3</div>
</div>
<div class="controls">
<p>Use ← → arrows to move</p>
<p>Press SPACE to start/pause</p>
</div>
<div id="startScreen" class="game-overlay">
<h1 class="title">RACER GAME</h1>
<p class="subtitle">Avoid obstacles and race to the finish!</p>
<button class="btn" onclick="startGame()">START GAME</button>
</div>
<div id="gameOverScreen" class="game-overlay hidden">
<h1 class="title">GAME OVER</h1>
<div class="score-display">Final Score: <span id="finalScore">0</span></div>
<button class="btn" onclick="restartGame()">PLAY AGAIN</button>
</div>
<div id="pauseScreen" class="game-overlay hidden">
<h1 class="title">PAUSED</h1>
<p class="subtitle">Press SPACE to continue</p>
<button class="btn" onclick="resumeGame()">RESUME</button>
</div>
</div>
<script>
// Game variables
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
const livesElement = document.getElementById('lives');
const startScreen = document.getElementById('startScreen');
const gameOverScreen = document.getElementById('gameOverScreen');
const pauseScreen = document.getElementById('pauseScreen');
const finalScoreElement = document.getElementById('finalScore');
// Game state
let gameState = 'start'; // start, playing, paused, gameOver
let score = 0;
let lives = 3;
let gameSpeed = 5;
let roadOffset = 0;
let lastTime = 0;
let animationId = null;
// Player car
const playerCar = {
x: canvas.width / 2 - 25,
y: canvas.height - 120,
width: 50,
height: 80,
speed: 8,
color: '#e74c3c'
};
// Obstacles
let obstacles = [];
let obstacleTimer = 0;
const obstacleInterval = 1200; // milliseconds
// Road markings
const roadMarkings = [];
const markingWidth = 10;
const markingHeight = 40;
const markingGap = 40;
// Initialize road markings
for (let y = -markingHeight; y < canvas.height; y += markingHeight + markingGap) {
roadMarkings.push({
x: canvas.width / 2 - markingWidth / 2,
y: y,
width: markingWidth,
height: markingHeight
});
}
// Keyboard input
const keys = {
ArrowLeft: false,
ArrowRight: false,
' ': false
};
// Event listeners
window.addEventListener('keydown', (e) => {
if (keys.hasOwnProperty(e.key)) {
keys[e.key] = true;
e.preventDefault();
}
if (e.key === ' ' && gameState === 'playing') {
gameState = 'paused';
pauseScreen.classList.remove('hidden');
cancelAnimationFrame(animationId);
} else if (e.key === ' ' && gameState === 'paused') {
resumeGame();
}
});
window.addEventListener('keyup', (e) => {
if (keys.hasOwnProperty(e.key)) {
keys[e.key] = false;
}
});
// Game functions
function startGame() {
gameState = 'playing';
startScreen.classList.add('hidden');
gameOverScreen.classList.add('hidden');
pauseScreen.classList.add('hidden');
// Reset game state
score = 0;
lives = 3;
gameSpeed = 5;
obstacles = [];
playerCar.x = canvas.width / 2 - 25;
updateScore();
updateLives();
lastTime = performance.now();
gameLoop();
}
function resumeGame() {
gameState = 'playing';
pauseScreen.classList.add('hidden');
lastTime = performance.now();
gameLoop();
}
function restartGame() {
startGame();
}
function gameOver() {
gameState = 'gameOver';
finalScoreElement.textContent = score;
gameOverScreen.classList.remove('hidden');
cancelAnimationFrame(animationId);
}
function updateScore() {
scoreElement.textContent = `Score: ${score}`;
}
function updateLives() {
livesElement.textContent = `Lives: ${lives}`;
}
function updatePlayer(deltaTime) {
if (keys.ArrowLeft) {
playerCar.x -= playerCar.speed * (deltaTime / 16);
}
if (keys.ArrowRight) {
playerCar.x += playerCar.speed * (deltaTime / 16);
}
// Keep player within bounds
playerCar.x = Math.max(0, Math.min(canvas.width - playerCar.width, playerCar.x));
}
function updateObstacles(deltaTime) {
obstacleTimer += deltaTime;
// Create new obstacles
if (obstacleTimer >= obstacleInterval) {
obstacleTimer = 0;
const width = 60 + Math.random() * 40;
const obstacle = {
x: Math.random() * (canvas.width - width),
y: -100,
width: width,
height: 60,
color: '#f39c12',
speed: gameSpeed + Math.random() * 2
};
obstacles.push(obstacle);
}
// Update obstacles
for (let i = obstacles.length - 1; i >= 0; i--) {
const obstacle = obstacles[i];
obstacle.y += obstacle.speed * (deltaTime / 16);
// Check collision
if (checkCollision(playerCar, obstacle)) {
obstacles.splice(i, 1);
lives--;
updateLives();
if (lives <= 0) {
gameOver();
return;
}
}
// Remove obstacles that are off screen
if (obstacle.y > canvas.height) {
obstacles.splice(i, 1);
score += 10;
updateScore();
// Increase difficulty
if (score % 100 === 0) {
gameSpeed += 0.5;
}
}
}
}
function updateRoad(deltaTime) {
roadOffset += gameSpeed * (deltaTime / 16);
if (roadOffset > markingHeight + markingGap) {
roadOffset = 0;
}
}
function checkCollision(rect1, rect2) {
return rect1.x < rect2.x + rect2.width &&
rect1.x + rect1.width > rect2.x &&
rect1.y < rect2.y + rect2.height &&
rect1.y + rect1.height > rect2.y;
}
function drawRoad() {
// Road
ctx.fillStyle = '#2d3436';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Road surface
const roadWidth = canvas.width * 0.7;
const roadX = (canvas.width - roadWidth) / 2;
ctx.fillStyle = '#636e72';
ctx.fillRect(roadX, 0, roadWidth, canvas.height);
// Road markings
ctx.fillStyle = '#ffffff';
for (const marking of roadMarkings) {
ctx.fillRect(
marking.x,
marking.y + roadOffset,
marking.width,
marking.height
);
}
// Road edges
ctx.strokeStyle = '#ffffff';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(roadX, 0);
ctx.lineTo(roadX, canvas.height);
ctx.moveTo(roadX + roadWidth, 0);
ctx.lineTo(roadX + roadWidth, canvas.height);
ctx.stroke();
}
function drawPlayer() {
// Car body
ctx.fillStyle = playerCar.color;
ctx.fillRect(playerCar.x, playerCar.y, playerCar.width, playerCar.height);
// Car details
ctx.fillStyle = '#2d3436';
ctx.fillRect(playerCar.x + 5, playerCar.y + 5, playerCar.width - 10, 15);
ctx.fillRect(playerCar.x + 5, playerCar.y + playerCar.height - 20, playerCar.width - 10, 15);
// Windows
ctx.fillStyle = '#3498db';
ctx.fillRect(playerCar.x + 10, playerCar.y + 25, playerCar.width - 20, 30);
// Wheels
ctx.fillStyle = '#2d3436';
ctx.fillRect(playerCar.x - 5, playerCar.y + 10, 5, 20);
ctx.fillRect(playerCar.x + playerCar.width, playerCar.y + 10, 5, 20);
ctx.fillRect(playerCar.x - 5, playerCar.y + 50, 5, 20);
ctx.fillRect(playerCar.x + playerCar.width, playerCar.y + 50, 5, 20);
}
function drawObstacles() {
for (const obstacle of obstacles) {
// Obstacle body
ctx.fillStyle = obstacle.color;
ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
// Obstacle details
ctx.fillStyle = '#e74c3c';
ctx.fillRect(obstacle.x + 5, obstacle.y + 5, obstacle.width - 10, 10);
ctx.fillRect(obstacle.x + 5, obstacle.y + obstacle.height - 15, obstacle.width - 10, 10);
// Windows
ctx.fillStyle = '#3498db';
ctx.fillRect(obstacle.x + 10, obstacle.y + 20, obstacle.width - 20, 20);
}
}
function draw() {
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw game elements
drawRoad();
drawObstacles();
drawPlayer();
}
function update(deltaTime) {
updatePlayer(deltaTime);
updateObstacles(deltaTime);
updateRoad(deltaTime);
}
function gameLoop(timestamp) {
const deltaTime = timestamp - lastTime;
lastTime = timestamp;
update(deltaTime);
draw();
if (gameState === 'playing') {
animationId = requestAnimationFrame(gameLoop);
}
}
// Handle window resize
function resizeCanvas() {
const container = document.querySelector('.game-container');
const containerWidth = container.clientWidth;
canvas.width = Math.min(800, containerWidth - 40);
canvas.height = canvas.width * 0.75;
// Update player position
playerCar.x = canvas.width / 2 - playerCar.width / 2;
playerCar.y = canvas.height - 120;
// Clear obstacles on resize
obstacles = [];
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// Initial draw
draw();
</script>
</body>
</html> #sports
