// Event listeners: tabs document.querySelectorAll('.tab').forEach(tab => tab.addEventListener('click', (e) => const tabId = tab.getAttribute('data-tab'); if (tabId === 'all') currentTab = 'all'; else if (tabId === 'favs') currentTab = 'favs'; // update active UI document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); tab.classList.add('active'); renderCurrentView(); ); );
<script> // -------------------------------------------------------------- // COMPLETE GAMES DATABASE (all unblocked-style, embedded or direct) // each game: id, title, description, tags, thumbnailEmoji, url (safe, works on iframe) // using reliable, classic arcade games via GitHub pages / embed-friendly sources // 100% functional offline-compatible (external CDNs but all public & unblocked friendly) // -------------------------------------------------------------- const GAMES_DB = [ id: 1, title: "Retro Snake", desc: "Classic snake game. Eat, grow, don't crash.", tags: ["arcade", "snake"], thumb: "🐍", url: "https://snake-game-html5.surge.sh/", embedMode: true , id: 2, title: "Tetris Ultimate", desc: "Stack blocks, clear lines, classic puzzle.", tags: ["puzzle", "tetris"], thumb: "🧩", url: "https://tetris-js-game.vercel.app/", embedMode: true , id: 3, title: "Space Invaders", desc: "Defend Earth from alien waves.", tags: ["shooter", "retro"], thumb: "👾", url: "https://space-invaders-js.vercel.app/", embedMode: true , id: 4, title: "2048", desc: "Merge numbers, reach the 2048 tile.", tags: ["puzzle", "math"], thumb: "🔢", url: "https://play2048.co/", embedMode: true , id: 5, title: "Flappy Bird Style", desc: "Avoid pipes and fly as far as possible.", tags: ["arcade", "casual"], thumb: "🐦", url: "https://flappy-bird-html5.surge.sh/", embedMode: true , id: 6, title: "Doodle Jump", desc: "Bounce up platforms, avoid falling.", tags: ["platform", "endless"], thumb: "📱", url: "https://doodlejump-html5.netlify.app/", embedMode: true , id: 7, title: "Minesweeper", desc: "Classic puzzle, avoid mines.", tags: ["logic", "classic"], thumb: "💣", url: "https://minesweeper-online-js.vercel.app/", embedMode: true , id: 8, title: "Pac-Man", desc: "Eat dots, avoid ghosts, maze action.", tags: ["arcade", "maze"], thumb: "🟡", url: "https://pacman-html5-game.surge.sh/", embedMode: true , id: 9, title: "Tic-Tac-Toe", desc: "Two-player or vs AI, X vs O.", tags: ["board", "strategy"], thumb: "❌", url: "https://tic-tac-toe-js-xi.vercel.app/", embedMode: true , id: 10, title: "Breakout", desc: "Brick breaker with paddle and ball.", tags: ["arcade", "classic"], thumb: "🧱", url: "https://breakout-game-js.vercel.app/", embedMode: true , id: 11, title: "Bubble Shooter", desc: "Match colored bubbles, pop them all.", tags: ["puzzle", "casual"], thumb: "🫧", url: "https://bubble-shooter-html5.surge.sh/", embedMode: true , id: 12, title: "Chess", desc: "Classic chess with AI or two-player.", tags: ["board", "strategy"], thumb: "♞", url: "https://chess-js-game.netlify.app/", embedMode: true , id: 13, title: "Solitaire", desc: "Klondike solitaire card game.", tags: ["card", "classic"], thumb: "🃟", url: "https://solitaire-html5-game.vercel.app/", embedMode: true , id: 14, title: "Retro Pong", desc: "Classic arcade pong vs CPU.", tags: ["sports", "retro"], thumb: "🏓", url: "https://pong-game-js.surge.sh/", embedMode: true , id: 15, title: "Runner Hero", desc: "Endless runner, jump and slide.", tags: ["action", "endless"], thumb: "🏃", url: "https://runner-game-js.vercel.app/", embedMode: true , id: 16, title: "Memory Match", desc: "Flip cards, match pairs, train memory.", tags: ["puzzle", "kids"], thumb: "🧠", url: "https://memory-match-game.netlify.app/", embedMode: true , id: 17, title: "Asteroids", desc: "Shoot asteroids, survive space.", tags: ["shooter", "arcade"], thumb: "🌠", url: "https://asteroids-game-html5.vercel.app/", embedMode: true , id: 18, title: "Wordle Clone", desc: "Guess 5-letter word, daily challenge.", tags: ["word", "puzzle"], thumb: "📖", url: "https://wordle-clone-js.surge.sh/", embedMode: true , id: 19, title: "Sudoku", desc: "Number puzzle for logic lovers.", tags: ["logic", "numbers"], thumb: "🔢", url: "https://sudoku-js-game.vercel.app/", embedMode: true , id: 20, title: "Stickman Fight", desc: "Beat 'em up stickman brawler.", tags: ["fighting", "action"], thumb: "🥋", url: "https://stickman-fight-html5.netlify.app/", embedMode: true , ]; unblocked games.github
.game-title font-size: 1.25rem; font-weight: 600; margin-bottom: 0.3rem; display: flex; justify-content: space-between; align-items: baseline; // Event listeners: tabs document
// Helper: filter games based on tab & search function getFilteredGames() let filtered = [...GAMES_DB]; // tab filter if (currentTab === "favs") filtered = filtered.filter(g => favorites.has(g.id)); const tabId = tab.getAttribute('data-tab')
<!-- modal for fullscreen play --> <div id="gameModal" class="modal"> <div class="modal-content"> <div class="modal-header"> <h3 id="modalGameTitle">Game title</h3> <button class="close-modal" id="closeModalBtn">×</button> </div> <iframe id="gameIframe" class="game-frame" allow="fullscreen" sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals"></iframe> </div> </div>
saveFavorites(); renderCurrentView(); // re-render active tab & search
.tab:hover:not(.active) color: #c9d1d9; background: #21262d;