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

Christmas Countdown HTML Template

STACK GAME by TONY

Basic HTML Three.js Template

HTML

CSS

JS

Recommended

Christmas Countdown HTML Template

STACK GAME by TONY

Basic HTML Three.js Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS