Canvas HTML del gioco di corse di kart in JavaScript

47 azerty

Apri nell'Editor Video Pubblica il Tuo Codice

Canvas HTML del gioco di corse di kart in JavaScript

Consigliato

30 December 2025

Errori 404 HTML CSS in francese

9 October 2025

Animazione di caricamento CSS: cerchio, linea, punto

28 October 2025

Pulsante di attivazione/disattivazione della modalità chiara HTML/CSS/JS

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>

Consigliato

Errori 404 HTML CSS in francese

Animazione di caricamento CSS: cerchio, linea, punto

Pulsante di attivazione/disattivazione della modalità chiara HTML/CSS/JS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS