Gioco di calcio retrò: HTML5 Canvas, segui la telecamera

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

12 September 2025

Effetto di animazione bagliore circolare CSS

19 May 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>

Gioco di calcio retrò: HTML5 Canvas, segui la telecamera

Consigliato

Effetto di animazione bagliore circolare CSS

SITO WEB DI APPLE

Un codice di yuhhxn

HTML

CSS

JS

Consigliato

Effetto di animazione bagliore circolare CSS

SITO WEB DI APPLE

Un codice di yuhhxn

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS