Football Park Match - 5v5

by PlasmaPanther31
189 lines6.5 KB
<!DOCTYPE html>
<html>
<head>
    <title>Football Park Match - 5v5</title>
    <style>
        body { background: #222; display: flex; flex-direction: column; align-items: center; font-family: Arial, sans-serif; margin: 20px; }
        #scoreboard { display: flex; gap: 40px; color: white; font-size: 32px; font-weight: bold; margin-bottom: 15px; }
        .team-score { padding: 8px 20px; border-radius: 8px; }
        #red-score { background: #e74c3c; }
        #blue-score { background: #3498db; }
        #controls { color: white; margin-bottom: 10px; font-size: 16px; }
        #gameCanvas { border: 4px solid white; background: #4CAF50; }
    </style>
</head>
<body>
    <div id="scoreboard">
        <div class="team-score">RED: <span id="red-points">0</span></div>
        <div class="team-score">BLUE: <span id="blue-points">0</span></div>
    </div>
    <div id="controls">⬅️ ➡️ ⬆️ ⬇️ = MOVE | SPACE = KICK</div>
    <canvas id="gameCanvas" width="1000" height="600"></canvas>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        // Scores
        let redScore = 0;
        let blueScore = 0;

        // Player setup: 5 per team
        const redTeam = [];
        const blueTeam = [];
        const playerSize = 18;
        const ballSize = 12;

        // Create Red Team (left side)
        for (let i = 0; i < 5; i++) {
            redTeam.push({
                x: 120 + (i * 60),
                y: 150 + (i * 70),
                speedX: 0,
                speedY: 0,
                color: '#e74c3c'
            });
        }

        // Create Blue Team (right side)
        for (let i = 0; i < 5; i++) {
            blueTeam.push({
                x: 880 - (i * 60),
                y: 150 + (i * 70),
                speedX: 0,
                speedY: 0,
                color: '#3498db'
            });
        }

        // Ball
        const ball = { x: canvas.width/2, y: canvas.height/2, speedX: 0, speedY: 0 };

        // You control Red Team's first player
        let controlledPlayer = redTeam[0];
        const speed = 5;

        // ✅ FIXED ARROW KEY CONTROLS
        let keys = {};
        document.addEventListener('keydown', e => {
            keys[e.key] = true;
            if (e.key === ' ') kickBall(); // Space = kick
        });
        document.addEventListener('keyup', e => {
            keys[e.key] = false;
        });

        // Update movement every frame
        function handleMovement() {
            controlledPlayer.speedX = 0;
            controlledPlayer.speedY = 0;
            if (keys['ArrowUp']) controlledPlayer.speedY = -speed;
            if (keys['ArrowDown']) controlledPlayer.speedY = speed;
            if (keys['ArrowLeft']) controlledPlayer.speedX = -speed;
            if (keys['ArrowRight']) controlledPlayer.speedX = speed;
        }

        function kickBall() {
            const dx = ball.x - controlledPlayer.x;
            const dy = ball.y - controlledPlayer.y;
            const dist = Math.sqrt(dx*dx + dy*dy);
            if (dist < 30) { // Only kick if close
                ball.speedX = dx / dist * 8;
                ball.speedY = dy / dist * 8;
            }
        }

        // Update game state
        function update() {
            handleMovement(); // ✅ Now arrow keys work smoothly

            // Move controlled player
            controlledPlayer.x += controlledPlayer.speedX;
            controlledPlayer.y += controlledPlayer.speedY;
            // Keep in bounds
            controlledPlayer.x = Math.max(playerSize, Math.min(canvas.width - playerSize, controlledPlayer.x));
            controlledPlayer.y = Math.max(playerSize, Math.min(canvas.height - playerSize, controlledPlayer.y));

            // Move ball
            ball.x += ball.speedX;
            ball.y += ball.speedY;
            ball.speedX *= 0.98; // Friction
            ball.speedY *= 0.98;

            // Ball bounds
            if (ball.x < ballSize || ball.x > canvas.width - ballSize) ball.speedX *= -0.8;
            if (ball.y < ballSize || ball.y > canvas.height - ballSize) ball.speedY *= -0.8;

            // GOAL CHECK
            // Red scores in right goal
            if (ball.x > canvas.width - 30 && ball.y > 200 && ball.y < 400) {
                redScore++;
                document.getElementById('red-points').textContent = redScore;
                resetBall();
            }
            // Blue scores in left goal
            if (ball.x < 30 && ball.y > 200 && ball.y < 400) {
                blueScore++;
                document.getElementById('blue-points').textContent = blueScore;
                resetBall();
            }

            // Simple AI for other players
            [...redTeam.slice(1), ...blueTeam].forEach(player => {
                const dx = ball.x - player.x;
                const dy = ball.y - player.y;
                const dist = Math.sqrt(dx*dx + dy*dy);
                if (dist < 200) {
                    player.x += dx/dist * 2;
                    player.y += dy/dist * 2;
                }
                player.x = Math.max(playerSize, Math.min(canvas.width - playerSize, player.x));
                player.y = Math.max(playerSize, Math.min(canvas.height - playerSize, player.y));
            });
        }

        function resetBall() {
            ball.x = canvas.width/2;
            ball.y = canvas.height/2;
            ball.speedX = 0;
            ball.speedY = 0;
        }

        // Draw everything
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Pitch lines
            ctx.strokeStyle = 'white';
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(canvas.width/2, 0); ctx.lineTo(canvas.width/2, canvas.height); // Halfway line
            ctx.moveTo(30, 200); ctx.lineTo(30, 400); // Left goal
            ctx.moveTo(canvas.width-30, 200); ctx.lineTo(canvas.width-30, 400); // Right goal
            ctx.stroke();

            // Draw teams
            [...redTeam, ...blueTeam].forEach(p => {
                ctx.fillStyle = p.color;
                ctx.beginPath();
                ctx.arc(p.x, p.y, playerSize, 0, Math.PI*2);
                ctx.fill();
            });

            // Draw ball
            ctx.fillStyle = 'white';
            ctx.beginPath();
            ctx.arc(ball.x, ball.y, ballSize, 0, Math.PI*2);
            ctx.fill();
        }

        // Game loop
        function loop() {
            update();
            draw();
            requestAnimationFrame(loop);
        }
        loop();
    </script>
</body>
</html>
Game Source: Football Park Match - 5v5

Creator: PlasmaPanther31
Libraries: none
Complexity: moderate (189 lines, 6.5 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: football-park-match-5v5-plasmapanther31" to link back to the original. Then publish at arcadelab.ai/publish.