रेट्रो फुटबॉल गेम: HTML5 कैनवास, कैमरा फॉलो

579 frank909

संपादक में खोलें अपना कोड प्रकाशित करें

रेट्रो फुटबॉल गेम: HTML5 कैनवास, कैमरा फॉलो

अनुशंसित

18 December 2025

ब्लडमनी गेम का HTML5 स्रोत कोड

18 December 2025

एस्केप रोड गेम HTML5 लोडर और फायरबेस कॉन्फ़िगरेशन

24 November 2025

बास्केट रैंडम गेम HTML5 स्रोत कोड

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>

रेट्रो फुटबॉल गेम: HTML5 कैनवास, कैमरा फॉलो

अनुशंसित

ब्लडमनी गेम का HTML5 स्रोत कोड

एस्केप रोड गेम HTML5 लोडर और फायरबेस कॉन्फ़िगरेशन

बास्केट रैंडम गेम HTML5 स्रोत कोड

HTML

CSS

JS

अनुशंसित

ब्लडमनी गेम का HTML5 स्रोत कोड

एस्केप रोड गेम HTML5 लोडर और फायरबेस कॉन्फ़िगरेशन

बास्केट रैंडम गेम HTML5 स्रोत कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS