Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Retro Bowl Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            text-align: center;
        }
        #gameArea {
            width: 800px;
            height: 400px;
            background-color: green;
            position: relative;
            margin: 0 auto;
            border: 2px solid #000;
        }
        .player {
            width: 20px;
            height: 20px;
            background-color: blue;
            position: absolute;
        }
        #info {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Retro Bowl Game</h1>
    <div id="gameArea">
        <div class="player" id="player"></div>
    </div>
    <div id="info">
        <p id="downInfo">1st Down</p>
        <p id="teamInfo">Team: <span id="teamName"></span></p>
        <p id="playerInfo">Player: <span id="playerName"></span>, Jersey Number: <span id="jerseyNumber"></span></p>
    </div>
    <script>
        let player = document.getElementById('player');
        let downInfo = document.getElementById('downInfo');
        let teamName = document.getElementById('teamName');
        let playerName = document.getElementById('playerName');
        let jerseyNumber = document.getElementById('jerseyNumber');
        let currentDown = 1;
        let yards = 0;
        let team = prompt("Choose your team:");
        teamName.innerText = team;
        let name = prompt("Enter your name:");
        playerName.innerText = name;
        let number = prompt("Enter your jersey number:");
        jerseyNumber.innerText = number;

        document.addEventListener('keydown', function(event) {
            const step = 10;
            switch(event.key) {
                case 'w':
                case 'ArrowUp':
                    player.style.top = (player.offsetTop - step) + 'px';
                    break;
                case 's':
                case 'ArrowDown':
                    player.style.top = (player.offsetTop + step) + 'px';
                    break;
                case 'a':
                case 'ArrowLeft':
                    player.style.left = (player.offsetLeft - step) + 'px';
                    break;
                case 'd':
                case 'ArrowRight':
                    player.style.left = (player.offsetLeft + step) + 'px';
                    break;
            }
            yards += step;
            if (yards >= 10) {
                currentDown++;
                yards = 0;
                if (currentDown > 4) {
                    currentDown = 1;
                    alert("Turnover on downs!");
                }
            }
            downInfo.innerText = currentDown + " Down";
            if (currentDown === 4 && Math.random() < 0.5) {
                let choice = confirm("Choose between 4th down or a punt?");
                if (choice) {
                    alert("You chose to go for it on 4th down!");
                } else {
                    alert("You chose to punt!");
                    currentDown = 1;
                }
            }
        });
    </script>
</body>
</html>
Editor is loading...