Racing game 2.0

8 0 Games k2007531 Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>High-Speed JS Racer</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            background: #111;
            color: #fff;
            font-family: system-ui, -apple-system, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
        }
        h1 {
            font-size: 1.5rem;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #00ffcc;
        }
        canvas {
            background: #333;
            box-shadow: 0 0 20px rgba(0, 255, 204, 0.4);
            border-radius: 8px;
        }
        .controls {
            margin-top: 15px;
            font-size: 0.9rem;
            color: #aaa;
        }
    </style>
</head>
<body>

<h1>Turbo JS Racer</h1>
    <canvas id="gameCanvas" width="800" height="500"></canvas>
    <div class="controls">Use <strong>A / D</strong> or <strong>Left / Right Arrows</strong> to steer. Avoid the obstacles!</div>

let carX = canvas.width / 2 - 25;
        const carY = canvas.height - 100;
        const carWidth = 50;
        const carHeight = 90;

let roadOffset = 0;
        let speed = 5;
        let score = 0;
        let gameOver = false;

const keys = { ArrowLeft: false, ArrowRight: false, KeyA: false, KeyD: false };

window.addEventListener('keydown', e => { if (keys.hasOwnProperty(e.code)) keys[e.code] = true; });
        window.addEventListener('keyup', e => { if (keys.hasOwnProperty(e.code)) keys[e.code] = false; });

let obstacles = [];
        function spawnObstacle() {
            const laneWidth = 120;
            const minX = canvas.width / 2 - 240;
            const x = minX + Math.floor(Math.random() * 4) * laneWidth + 25;
            obstacles.push({ x: x, y: -100, width: 50, height: 90 });
        }

setInterval(spawnObstacle, 1500);

function update() {
            if (gameOver) return;

if ((keys.ArrowLeft || keys.KeyA) && carX > canvas.width / 2 - 250) {
                carX -= 6;
            }
            if ((keys.ArrowRight || keys.KeyD) && carX < canvas.width / 2 + 200) {
                carX += 6;
            }

roadOffset = (roadOffset + speed) % 40;

obstacles.forEach(obs => {
                obs.y += speed;

// Collision detection
                if (
                    carX < obs.x + obs.width &&
                    carX + carWidth > obs.x &&
                    carY < obs.y + obs.height &&
                    carY + carHeight > obs.y
                ) {
                    gameOver = true;
                }
            });

obstacles = obstacles.filter(obs => obs.y < canvas.height + 100);
            score++;
        }

function draw() {
            // Sky & Ground
            ctx.fillStyle = '#1e293b';
            ctx.fillRect(0, 0, canvas.width, canvas.height / 2);
            ctx.fillStyle = '#15803d';
            ctx.fillRect(0, canvas.height / 2, canvas.width, canvas.height / 2);

// Road
            const roadWidth = 500;
            const roadLeft = (canvas.width - roadWidth) / 2;
            ctx.fillStyle = '#475569';
            ctx.fillRect(roadLeft, 0, roadWidth, canvas.height);

// Dashed center lines
            ctx.strokeStyle = '#f8fafc';
            ctx.lineWidth = 4;
            ctx.setLineDash([30, 30]);
            ctx.lineDashOffset = -roadOffset;
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2, 0);
            ctx.lineTo(canvas.width / 2, canvas.height);
            ctx.stroke();
            ctx.setLineDash([]);

// Draw Player Car
            ctx.fillStyle = '#f97316';
            ctx.fillRect(carX, carY, carWidth, carHeight);
            // windshield
            ctx.fillStyle = '#0f172a';
            ctx.fillRect(carX + 10, carY + 15, carWidth - 20, 20);

// Draw Obstacles
            obstacles.forEach(obs => {
                ctx.fillStyle = '#ef4444';
                ctx.fillRect(obs.x, obs.y, obs.width, obs.height);
                ctx.fillStyle = '#0f172a';
                ctx.fillRect(obs.x + 10, obs.y + 55, obs.width - 20, 20);
            });

// Score
            ctx.fillStyle = '#fff';
            ctx.font = '18px monospace';
            ctx.fillText(`Score: ${score}`, 20, 30);

if (gameOver) {
                ctx.fillStyle = 'rgba(0,0,0,0.75)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.fillStyle = '#ef4444';
                ctx.font = 'bold 36px sans-serif';
                ctx.textAlign = 'center';
                ctx.fillText('CRASHED! GAME OVER', canvas.width / 2, canvas.height / 2);
                ctx.font = '18px sans-serif';
                ctx.fillStyle = '#fff';
                ctx.fillText('Refresh page to restart', canvas.width / 2, canvas.height / 2 + 40);
                ctx.textAlign = 'start';
            }
        }

function loop() {
            update();
            draw();
            requestAnimationFrame(loop);
        }

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

CSS

Comments 0

…

Racing game 2.0

Recommended

Comments 0