ArcadeSoftware.github.io/index.html at main · Fmaster114/ArcadeSoftware.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arcade Menu</title>
    <style>
        body {
            background-color: black;
            color: white;
            font-family: Arial, sans-serif;
            text-align: center;
        }
        .game-menu, .maintenance-menu, .game-screen {
            display: none;
        }
        .active {
            display: block;
        }
        .game-list {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 20px;
        }
        .game {
            width: 150px;
            height: 150px;
            border: 2px solid white;
            padding: 10px;
            cursor: pointer;
        }
        .game.selected {
            border-color: yellow;
        }
        .maintenance-menu, .game-screen {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.9);
            padding: 20px;
            border: 2px solid white;
        }
        iframe {
            width: 800px;
            height: 600px;
            border: none;
        }
    </style>
</head>
<body>
    <h1>Arcade Game Menu</h1>
    <div class="game-menu active">
        <div class="game-list" id="gameList"></div>
        <p>Use arrow keys to navigate, Enter to play, M for Maintenance</p>
    </div>
    <div class="maintenance-menu" id="maintenanceMenu">
        <h2>Maintenance Menu</h2>
        <p>Settings & Configurations</p>
        <button onclick="closeMaintenance()">Close</button>
    </div>
    <div class="game-screen" id="gameScreen">
        <h2 id="gameTitle"></h2>
        <iframe id="gameFrame"></iframe>
        <br>
        <button onclick="closeGame()">Back to Menu</button>
    </div>

    <script>
        const games = [
            { name: 'Pac-Man', url: 'https://www.retrogames.cc/embed/21212-pac-man.html' },
            { name: 'Donkey Kong', url: 'https://www.retrogames.cc/embed/21533-donkey-kong.html' },
            { name: 'Street Fighter', url: 'https://www.retrogames.cc/embed/21667-street-fighter.html' },
            { name: 'Space Invaders', url: 'https://www.retrogames.cc/embed/21343-space-invaders.html' },
            { name: 'Tetris', url: 'https://www.retrogames.cc/embed/21492-tetris.html' }
        ];
        const gameList = document.getElementById('gameList');
        let selectedGameIndex = 0;

        function renderGames() {
            gameList.innerHTML = '';
            games.forEach((game, index) => {
                let gameDiv = document.createElement('div');
                gameDiv.classList.add('game');
                if (index === selectedGameIndex) {
                    gameDiv.classList.add('selected');
                }
                gameDiv.innerText = game.name;
                gameList.appendChild(gameDiv);
            });
        }

        function openGame() {
            document.querySelector('.game-menu').classList.remove('active');
            document.getElementById('gameScreen').classList.add('active');
            document.getElementById('gameTitle').innerText = games[selectedGameIndex].name;
            document.getElementById('gameFrame').src = games[selectedGameIndex].url;
        }

        function closeGame() {
            document.getElementById('gameScreen').classList.remove('active');
            document.querySelector('.game-menu').classList.add('active');
            document.getElementById('gameFrame').src = '';
        }

        function openMaintenance() {
            document.querySelector('.game-menu').classList.remove('active');
            document.getElementById('maintenanceMenu').classList.add('active');
        }

        function closeMaintenance() {
            document.querySelector('.game-menu').classList.add('active');
            document.getElementById('maintenanceMenu').classList.remove('active');
        }

        document.addEventListener('keydown', (event) => {
            if (event.key === 'ArrowRight') {
                selectedGameIndex = (selectedGameIndex + 1) % games.length;
            } else if (event.key === 'ArrowLeft') {
                selectedGameIndex = (selectedGameIndex - 1 + games.length) % games.length;
            } else if (event.key === 'Enter') {
                openGame();
            } else if (event.key === 'm') {
                openMaintenance();
            }
            renderGames();
        });

        renderGames();
    </script>
</body>
</html>