HTML CSS AND JAVASCRIPT CODE FOR FOOTBALL GAME ► CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>⚽ Football Penalty Shootout Game ⚽</title>
    <style>
        /* General styling for the game */
        body {
            font-family: Arial, sans-serif;
            background-color: #004d00;
            color: white;
            text-align: center;
            overflow: hidden;
            margin: 0;
        }

        #game-container {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: url('stadium.jpg') center/cover no-repeat;
            position: relative;
            overflow: hidden;
        }

        #goalkeeper {
            width: 80px;
            height: 80px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            top: 25%;
            left: 50%;
            transform: translate(-50%, 0);
            transition: left 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2em;
        }

        #ball {
            width: 50px;
            height: 50px;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            bottom: 15%;
            left: 50%;
            transform: translateX(-50%);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5em;
        }

        #scoreboard {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 1.2em;
        }

        .button {
            padding: 10px 20px;
            margin: 10px;
            border: none;
            border-radius: 5px;
            background-color: #28a745;
            color: white;
            cursor: pointer;
            font-size: 16px;
        }

        /* Trajectory line */
        #trajectory-line {
            position: absolute;
            width: 2px;
            background-color: yellow;
            display: none;
        }

        #goal-message {
            font-size: 2em;
            color: yellow;
            display: none;
        }

    </style>
</head>
<body>
    <div id="game-container">
        <div id="scoreboard">
            <p>Player: <span id="playerName">Player 1</span> ⚽</p>
            <p>Goals: <span id="goals">0</span> 🥅</p>
            <p>Attempts Left: <span id="attempts">5</span> 🔄</p>
        </div>
        <div id="goalkeeper">🧤</div>
        <div id="ball">⚽</div>
        <button id="startGame" class="button">Start Game 🎮</button>
        <div id="goal-message"></div>
        <div id="trajectory-line"></div>
    </div>

    <script>
        let goals = 0;
        let attempts = 5;
        let gameStarted = false;
        let dragging = false;

        const goalkeeper = document.getElementById('goalkeeper');
        const ball = document.getElementById('ball');
        const goalsDisplay = document.getElementById('goals');
        const attemptsDisplay = document.getElementById('attempts');
        const playerNameDisplay = document.getElementById('playerName');
        const goalMessage = document.getElementById('goal-message');
        const trajectoryLine = document.getElementById('trajectory-line');

        function moveGoalkeeper() {
            const randomPosition = Math.random() * 60 + 20; // Move within 20% to 80% width
            goalkeeper.style.left = `${randomPosition}%`;
            setTimeout(moveGoalkeeper, 2000);
        }

        function displayMessage(text, color) {
            goalMessage.style.color = color;
            goalMessage.textContent = text;
            goalMessage.style.display = 'block';
            setTimeout(() => {
                goalMessage.style.display = 'none';
            }, 1000);
        }

        function playSound(type) {
            const sound = new Audio(type === 'goal' ? 'goal.mp3' : 'miss.mp3');
            sound.play();
        }

        function shootBall(shotPower, shotAngle) {
            if (attempts > 0 && gameStarted) {
                attempts--;
                attemptsDisplay.textContent = attempts;

                const goalkeeperPosition = parseFloat(goalkeeper.style.left);
                if (shotPower > 30 && shotPower < 70 && Math.abs(shotAngle - goalkeeperPosition) > 10) {
                    goals++;
                    goalsDisplay.textContent = goals;
                    displayMessage("GOAL! 🎉", "yellow");
                    playSound('goal');
                } else {
                    displayMessage("Miss! ❌", "red");
                    playSound('miss');
                }

                if (attempts === 0) {
                    endGame();
                }
            }
        }

        function endGame() {
            alert(`Game over! You scored ${goals} goals. ⚽`);
            gameStarted = false;
            attempts = 5;
            goals = 0;
            attemptsDisplay.textContent = attempts;
            goalsDisplay.textContent = goals;
        }

        document.getElementById('startGame').onclick = function () {
            gameStarted = true;
            attempts = 5;
            goals = 0;
            attemptsDisplay.textContent = attempts;
            goalsDisplay.textContent = goals;
            moveGoalkeeper();
            alert("Game Started! Try to score as many goals as you can! ⚽");
        };

        let startX, startY;

        // Mouse events for dragging and shooting
        ball.onmousedown = function (e) {
            dragging = true;
            startX = e.clientX;
            startY = e.clientY;
            trajectoryLine.style.display = 'block';
            trajectoryLine.style.height = '0';
            trajectoryLine.style.left = `${startX}px`;
            trajectoryLine.style.top = `${startY}px`;
        };

        document.onmousemove = function (e) {
            if (dragging) {
                const currentX = e.clientX;
                const currentY = e.clientY;

                // Set trajectory line position and length
                const deltaX = currentX - startX;
                const deltaY = currentY - startY;
                const angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
                const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

                trajectoryLine.style.transform = `rotate(${angle}deg)`;
                trajectoryLine.style.height = `${distance}px`;
            }
        };

        document.onmouseup = function (e) {
            if (dragging) {
                dragging = false;
                trajectoryLine.style.display = 'none';

                const endX = e.clientX;
                const endY = e.clientY;

                // Calculate shot strength and angle
                const shotPower = Math.min(100, Math.sqrt((endX - startX) ** 2 + (endY - startY) ** 2) / 2);
                const shotAngle = (endX / window.innerWidth) * 100;

                shootBall(shotPower, shotAngle);
            }
        };
    </script>
</body>
</html>
JavaScript
Share this:

Leave a Reply Cancel reply
