Jeu de course de karting JavaScript HTML Canvas

1,111 0 Jeux azerty Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Jeu de course de karting JavaScript HTML Canvas

Recommandé

22 August 2025

Extrait de code d'animation CSS Heart

12 July 2025

animation de voiture

22 September 2025

Jeu de cube 3D HTML avec statistiques et personnalisation

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>

CSS

Comments 0

…