Juego de carreras 2.0

13 0 k2007531 Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

21 April 2025

Un código de Metehan

22 October 2026

Juego de lucha con física de muñeco de trapo en WebGL y JavaScript

16 April 2026

Juegos desbloqueados HTML: Directorio y visor de GN-Math Zone

HTML

<!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

…