Jogo de Futebol Retrô: HTML5 Canvas, Seguir Câmera

842 frank909

Abrir no Editor Video Publique Seu Código

Jogo de Futebol Retrô: HTML5 Canvas, Seguir Câmera

Recomendado

14 January 2026

Snippet de carregador animado em CSS

14 September 2024

Interação com Pôster de Filme

16 January 2026

Modelo HTML para reprodutor de jogos Flash Ruffle

HTML

<!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>

Recomendado

Snippet de carregador animado em CSS

Interação com Pôster de Filme

Modelo HTML para reprodutor de jogos Flash Ruffle

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS