Lienzo HTML del juego de carreras de karts con JavaScript

452 azerty

Abrir en el editor Publica tu código

Lienzo HTML del juego de carreras de karts con JavaScript

Recomendado

22 August 2025

Comentario de marcador de posición de código HTML

1 April 2025

Diseño y perfección de tarjetas.

29 June 2025

Fragmento de código del menú desplegable HTML

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Neighbor</title>
</head>
<body>
    <h1>hello neighbor</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Kart Racer</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #222;
            color: white;
            font-family: Arial, sans-serif;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        #game-container {
            position: relative;
            border: 4px solid #444;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
        }
        canvas {
            display: block;
            background: #2e7d32; /* Grass color */
        }
        #ui {
            position: absolute;
            top: 10px;
            left: 10px;
            pointer-events: none;
            text-shadow: 2px 2px 0 #000;
        }
        #msg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 48px;
            font-weight: bold;
            display: none;
            text-align: center;
        }
    </style>
</head>
<body>

<div id="game-container">
        <canvas id="gameCanvas"></canvas>
        <div id="ui">
            <div id="lap">Lap: 1/3</div>
            <div id="pos">Pos: 1/5</div>
        </div>
        <div id="msg">FINISH!</div>
    </div>

canvas.width = 800;
canvas.height = 600;

// Track settings
const trackWidth = 120;
const trackPoints = [
    {x: 200, y: 200}, {x: 1000, y: 200}, {x: 1400, y: 400}, 
    {x: 1400, y: 1000}, {x: 1000, y: 1400}, {x: 200, y: 1400}, 
    {x: -200, y: 1000}, {x: -200, y: 400}
];

const keys = {};
window.onkeydown = (e) => keys[e.key] = true;
window.onkeyup = (e) => keys[e.key] = false;

class Car {
    constructor(x, y, color, isPlayer = false) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.isPlayer = isPlayer;
        this.angle = 0;
        this.speed = 0;
        this.accel = 0.2;
        this.friction = 0.96;
        this.turnSpeed = 0.05;
        this.maxSpeed = isPlayer ? 8 : 7.2 + Math.random() * 0.5;
        this.lap = 1;
        this.checkpoint = 0;
        this.finished = false;
        this.rank = 0;
        this.targetPoint = 1;
    }

update() {
        if (this.finished) {
            this.speed *= 0.9;
            return;
        }

if (this.isPlayer) {
            if (keys['ArrowUp'] || keys['w']) this.speed += this.accel;
            if (keys['ArrowDown'] || keys['s']) this.speed -= this.accel;
            if (keys['ArrowLeft'] || keys['a']) this.angle -= this.turnSpeed * (this.speed / 5);
            if (keys['ArrowRight'] || keys['d']) this.angle += this.turnSpeed * (this.speed / 5);
        } else {
            // AI Logic
            const target = trackPoints[this.targetPoint];
            const dx = target.x - this.x;
            const dy = target.y - this.y;
            const angleToTarget = Math.atan2(dy, dx);
            
            let diff = angleToTarget - this.angle;
            while (diff < -Math.PI) diff += Math.PI * 2;
            while (diff > Math.PI) diff -= Math.PI * 2;
            
            this.angle += diff * 0.05;
            this.speed += this.accel * 0.8;

const dist = Math.hypot(dx, dy);
            if (dist < 150) {
                this.targetPoint = (this.targetPoint + 1) % trackPoints.length;
            }
        }

this.speed *= this.friction;
        this.x += Math.cos(this.angle) * this.speed;
        this.y += Math.sin(this.angle) * this.speed;

// Off-road penalty
        if (!this.isOnTrack()) {
            this.speed *= 0.9;
        }

this.checkLaps();
    }

isOnTrack() {
        for (let i = 0; i < trackPoints.length; i++) {
            const p1 = trackPoints[i];
            const p2 = trackPoints[(i + 1) % trackPoints.length];
            const dist = this.distToSegment({x: this.x, y: this.y}, p1, p2);
            if (dist < trackWidth / 1.5) return true;
        }
        return false;
    }

distToSegment(p, v, w) {
        const l2 = Math.pow(v.x - w.x, 2) + Math.pow(v.y - w.y, 2);
        if (l2 == 0) return Math.hypot(p.x - v.x, p.y - v.y);
        let t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2;
        t = Math.max(0, Math.min(1, t));
        return Math.hypot(p.x - (v.x + t * (w.x - v.x)), p.y - (v.y + t * (w.y - v.y)));
    }

checkLaps() {
        const finishLine = trackPoints[0];
        const distToStart = Math.hypot(this.x - finishLine.x, this.y - finishLine.y);
        
        if (this.checkpoint === 0 && distToStart > 500) this.checkpoint = 1;
        if (this.checkpoint === 1 && distToStart < 100) {
            this.lap++;
            this.checkpoint = 0;
            if (this.lap > 3) {
                this.finished = true;
                if(this.isPlayer) msgDisplay.style.display = 'block';
            }
        }
    }

draw(cameraX, cameraY) {
        ctx.save();
        ctx.translate(this.x - cameraX, this.y - cameraY);
        ctx.rotate(this.angle);
        
        // Car body
        ctx.fillStyle = this.color;
        ctx.fillRect(-20, -10, 40, 20);
        // Windshield
        ctx.fillStyle = 'rgba(255,255,255,0.5)';
        ctx.fillRect(5, -8, 10, 16);
        // Eyes/Headlights
        ctx.fillStyle = 'yellow';
        ctx.fillRect(15, -10, 5, 5);
        ctx.fillRect(15, 5, 5, 5);
        
        ctx.restore();
    }
}

const cars = [
    new Car(200, 160, '#ff0000', true),
    new Car(200, 200, '#00ff00'),
    new Car(200, 240, '#0000ff'),
    new Car(150, 180, '#ffff00'),
    new Car(150, 220, '#ff00ff')
];

function drawTrack(cameraX, cameraY) {
    ctx.strokeStyle = '#555';
    ctx.lineWidth = trackWidth;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    
    ctx.beginPath();
    ctx.moveTo(trackPoints[0].x - cameraX, trackPoints[0].y - cameraY);
    for (let i = 1; i < trackPoints.length; i++) {
        ctx.lineTo(trackPoints[i].x - cameraX, trackPoints[i].y - cameraY);
    }
    ctx.closePath();
    ctx.stroke();

// Center Line
    ctx.strokeStyle = '#fff';
    ctx.lineWidth = 2;
    ctx.setLineDash([20, 20]);
    ctx.stroke();
    ctx.setLineDash([]);

// Finish Line
    ctx.strokeStyle = '#fff';
    ctx.lineWidth = 10;
    ctx.beginPath();
    ctx.moveTo(trackPoints[0].x - cameraX, (trackPoints[0].y - trackWidth/2) - cameraY);
    ctx.lineTo(trackPoints[0].x - cameraX, (trackPoints[0].y + trackWidth/2) - cameraY);
    ctx.stroke();
}

function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

const player = cars[0];
    const cameraX = player.x - canvas.width / 2;
    const cameraY = player.y - canvas.height / 2;

drawTrack(cameraX, cameraY);

// Sort for ranking
    const sortedCars = [...cars].sort((a, b) => {
        if (a.lap !== b.lap) return b.lap - a.lap;
        return a.targetPoint - b.targetPoint; // Simplified ranking
    });
    
    const playerRank = sortedCars.indexOf(player) + 1;
    posDisplay.innerText = `Pos: ${playerRank}/5`;
    lapDisplay.innerText = `Lap: ${Math.min(player.lap, 3)}/3`;

cars.forEach(car => {
        car.update();
        car.draw(cameraX, cameraY);
    });

requestAnimationFrame(gameLoop);
}

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

Recomendado

Comentario de marcador de posición de código HTML

Diseño y perfección de tarjetas.

Fragmento de código del menú desplegable HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS