Jeu de football rétro : HTML5 Canvas, suivi de la caméra

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

29 October 2025

Exemple d'animation de bouton HTML CSS

5 June 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Retro Football Guaranteed Camera Start</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #333;
            color: white;
            font-family: 'Courier New', Courier, monospace;
            flex-direction: column;
        }
        canvas {
            background-color: #4CAF50;
            border: 2px solid white;
            cursor: default;
        }
        #ui-container {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            justify-content: space-between;
            width: 800px;
            padding: 10px;
            box-sizing: border-box;
            pointer-events: none;
        }
        .ui-item {
            background: rgba(0, 0, 0, 0.7);
            padding: 5px 10px;
            border-radius: 5px;
            pointer-events: auto;
        }
        button {
            padding: 10px;
            cursor: pointer;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div id="ui-container">
        <div id="scoreboard" class="ui-item">Score: 0</div>
        <div id="yardage-info" class="ui-item">Down: 1 | To Go: 10 yds</div>
        <div id="action-buttons" class="ui-item" style="display: none;">
            <button onclick="handlePunt()">Punt</button>
        </div>
    </div>
    <canvas id="gameCanvas" width="800" height="400"></canvas>

const CANVAS_WIDTH = canvas.width;
        const CANVAS_HEIGHT = canvas.height;
        const FIELD_LENGTH = 1500;
        const PLAYER_SIZE = 20;
        const SPEED = 4;
        const BALL_SIZE = 8;
        const PASS_SPEED = 15;

let score = 0;
        let down = 1;
        let yardsToGo = 10;
        let lineOfScrimmageY = FIELD_LENGTH - 50;
        let gameState = 'play';

let isPassing = false;
        let passStart = { x: 0, y: 0 };
        let passEnd = { x: 0, y: 0 };

const camera = {
            x: 0,
            y: 0,
            update: function(followedObject) {
                // Centers the camera on the object's vertical center
                this.y = followedObject.y - CANVAS_HEIGHT / 2 + followedObject.height / 2;
                if (this.y < 0) this.y = 0;
                if (this.y + CANVAS_HEIGHT > FIELD_LENGTH) this.y = FIELD_LENGTH - CANVAS_HEIGHT;
            }
        };

// Function to draw a simple 8-bit sprite (5x9 pixel data)
        function drawPlayerSprite(x, y, color) {
            const size = 5;
            // The actual sprite data has been restored here:
            const spriteData = [
                0,0,1,0,0, 0,1,1,1,0, 1,1,1,1,1, 0,1,1,1,0, 0,1,1,1,0, 0,1,1,1,0, 0,1,0,1,0, 0,1,0,1,0, 1,0,0,0,1
            ];
            const pixelSize = PLAYER_SIZE / size;

ctx.fillStyle = color;
            for (let i = 0; i < spriteData.length; i++) {
                if (spriteData[i] === 1) {
                    const row = Math.floor(i / size);
                    const col = i % size;
                    ctx.fillRect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize);
                }
            }
        }

class Player {
            constructor(x, y, color) {
                this.x = x;
                this.y = y;
                this.color = color;
                this.width = PLAYER_SIZE;
                this.height = PLAYER_SIZE * 1.8;
                this.isQB = false;
            }
            draw() {
                drawPlayerSprite(this.x, this.y, this.color);
            }
            update(dx, dy) {
                this.x += dx;
                this.y += dy;
                if (this.x < 0) this.x = 0;
                if (this.x + this.width > CANVAS_WIDTH) this.x = CANVAS_WIDTH - this.width;
                if (this.y < 0) this.y = 0;
                if (this.y + this.height > FIELD_LENGTH) this.y = FIELD_LENGTH - this.height;
            }
        }

class Ball {
            constructor() {
                this.x = 0;
                this.y = 0;
                this.vx = 0;
                this.vy = 0;
                this.size = BALL_SIZE;
                this.color = '#FF6347';
                this.visible = false;
            }
            draw() {
                if (this.visible) {
                    ctx.fillStyle = this.color;
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.size / 2, 0, Math.PI * 2);
                    ctx.fill();
                }
            }
            update() {
                if (this.visible) {
                    this.x += this.vx;
                    this.y += this.vy;
                }
            }
        }
        
        const qb = new Player(CANVAS_WIDTH / 2, lineOfScrimmageY, '#00BFFF');
        qb.isQB = true;
        const receiver = new Player(CANVAS_WIDTH / 4, lineOfScrimmageY - 200, '#00BFFF');
        const defender = new Player(CANVAS_WIDTH / 2 + 100, lineOfScrimmageY - 100, '#FF4500');
        const ball = new Ball();
        const players = [qb, receiver, defender];

canvas.addEventListener('mousedown', (e) => {
            const mouseX = e.offsetX;
            const mouseY = e.offsetY + camera.y;

if (mouseX >= qb.x && mouseX <= qb.x + qb.width &&
                mouseY >= qb.y && mouseY <= qb.y + qb.height &&
                gameState === 'play' && !ball.visible) {
                isPassing = true;
                passStart = { x: e.offsetX, y: e.offsetY };
                passEnd = { x: e.offsetX, y: e.offsetY };
            }
        });

canvas.addEventListener('mousemove', (e) => {
            if (isPassing) {
                passEnd = { x: e.offsetX, y: e.offsetY };
            }
        });

canvas.addEventListener('mouseup', (e) => {
            if (isPassing) {
                isPassing = false;
                const dx = passStart.x - passEnd.x;
                const dy = passStart.y - passEnd.y;
                const distance = Math.sqrt(dx * dx + dy * dy);
                
                if (distance > 10) {
                    ball.visible = true;
                    ball.x = qb.x + qb.width / 2;
                    ball.y = qb.y + qb.height / 2;
                    ball.vx = (dx / distance) * PASS_SPEED;
                    ball.vy = (dy / distance) * PASS_SPEED;
                }
            }
        });

function isColliding(obj1, obj2) {
            return obj1.x < obj2.x + obj2.width &&
                   obj1.x + obj1.width > obj2.x &&
                   obj1.y < obj2.y + obj2.height &&
                   obj1.y + obj1.height > obj2.y;
        }
        
        function handlePunt() {
            lineOfScrimmageY -= 400;
            if (lineOfScrimmageY < 50) lineOfScrimmageY = 50;
            
            qb.y = lineOfScrimmageY;
            qb.x = CANVAS_WIDTH / 2;
            defender.y = qb.y - 100;
            defender.x = CANVAS_WIDTH / 2 + 100;

down = 1;
            yardsToGo = 10;
            actionButtons.style.display = 'none';
            updateUI();
        }
        window.handlePunt = handlePunt;

function updateUI() {
            scoreboard.textContent = `Score: ${score}`;
            yardageInfo.textContent = `Down: ${down} | To Go: ${Math.floor(yardsToGo)} yds`;
        }

// Initialize the camera position before starting the loop
        camera.update(qb);

function gameLoop() {
            let dx = 0;
            let dy = 0;
            if (gameState === 'play' && !isPassing) {
                if (keys['ArrowRight']) dx = SPEED;
                if (keys['ArrowLeft']) dx = -SPEED;
                if (keys['ArrowUp']) dy = -SPEED;
                if (keys['ArrowDown']) dy = SPEED;
            }
            qb.update(dx, dy);
            
            ball.update();

if (!ball.visible) {
                 if (defender.x < qb.x) defender.x += 1;
                 if (defender.x > qb.x) defender.x -= 1;
                 if (defender.y < qb.y) defender.y += 1;
                 if (defender.y > qb.y) defender.y -= 1;
            }

if (isColliding(qb, defender)) {
                endPlay();
            }

if (ball.visible && isColliding(receiver, {x: ball.x, y: ball.y, width: ball.size, height: ball.size})) {
                ball.visible = false;
                qb.x = receiver.x;
                qb.y = receiver.y;
            }
            if (ball.visible && isColliding(defender, {x: ball.x, y: ball.y, width: ball.size, height: ball.size})) {
                ball.visible = false;
                endPlay();
            }
            if (ball.visible && (ball.x < 0 || ball.x > CANVAS_WIDTH || ball.y < 0 || ball.y > FIELD_LENGTH)) {
                ball.visible = false;
                endPlay();
            }

if (qb.y <= 0) {
                score += 6;
                alert("TOUCHDOWN!");
                lineOfScrimmageY = FIELD_LENGTH - 50;
                qb.y = lineOfScrimmageY;
                down = 1;
                yardsToGo = 10;
                updateUI();
            }

camera.update(qb);

ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
            ctx.save();
            ctx.translate(-camera.x, -camera.y);

ctx.fillStyle = '#459748';
            ctx.fillRect(0, 0, CANVAS_WIDTH, 10);
            ctx.fillStyle = '#FFF';
            ctx.font = '10px Courier New';
            ctx.fillText('OPPONENT END ZONE', CANVAS_WIDTH / 2 - 50, 8);

ctx.strokeStyle = '#FFFFFF';
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(0, lineOfScrimmageY);
            ctx.lineTo(CANVAS_WIDTH, lineOfScrimmageY);
            ctx.stroke();

const firstDownY = lineOfScrimmageY - (yardsToGo * 10);
            ctx.strokeStyle = '#F00';
            ctx.beginPath();
            ctx.setLineDash();
            ctx.moveTo(0, firstDownY);
            ctx.lineTo(CANVAS_WIDTH, firstDownY);
            ctx.stroke();
            ctx.setLineDash([]);

players.forEach(player => player.draw());
            ball.draw();

if (isPassing) {
                ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';
                ctx.lineWidth = 2;
                ctx.beginPath();
                ctx.setLineDash();
                ctx.moveTo(qb.x + qb.width / 2, qb.y + qb.height / 2);
                ctx.lineTo(passEnd.x + camera.x, passEnd.y + camera.y);
                ctx.stroke();
                ctx.setLineDash([]);
            }

ctx.restore();
            requestAnimationFrame(gameLoop);
        }

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

Jeu de football rétro : HTML5 Canvas, suivi de la caméra

Recommandé

Exemple d'animation de bouton HTML CSS

Un code par alejandrokundrah

Un code de Mete

HTML

CSS

JS

Recommandé

Exemple d'animation de bouton HTML CSS

Un code par alejandrokundrah

Un code de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS