JavaScript Kart Racing Game HTML Canvas

Open In Editor 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>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>

JavaScript Kart Racing Game HTML Canvas

Recommended

Menja game

HTML TV Screen with YouTube Embed & Effects

Pricing Interaction (HTML , CSS & JS)

HTML

CSS

JS

Recommended

Menja game

HTML TV Screen with YouTube Embed & Effects

Pricing Interaction (HTML , CSS & JS)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS