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

Abrir no Editor Publique Seu Código

Recomendado

10 May 2025

Página de destino do Chef Pessoal

25 November 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>

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

Recomendado

Um código de jrj332790

Página de destino do Chef Pessoal

Fusão de Varetas

HTML

CSS

JS

Recomendado

Um código de jrj332790

Página de destino do Chef Pessoal

Fusão de Varetas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS