Github Io — Games

To create a feature for a GitHub.io game hub, you can implement a Game Metadata Registry. This allows you to dynamically sort and filter games without hard-coding each entry into your main HTML file. 🛠️ The Feature: Dynamic Game Registry

Instead of manually updating your homepage for every new game, this feature uses a central games.json file. A script then fetches this file and builds your game gallery automatically. 1. Structure Your Repository

Organize your files to keep the root clean. You can host multiple games by placing each in its own sub-folder. index.html (Your main game portal) assets/js/main.js (The script to load games) data/games.json (The list of your games) games/my-first-game/index.html (The actual game file) 2. Create the Metadata File (games.json) Store information about each game in a simple JSON format. github io games

[ "title": "Neon Runner", "category": "Action", "path": "games/neon-runner/", "thumbnail": "assets/img/neon.png" , "title": "Space Puzzle", "category": "Puzzle", "path": "games/space-puzzle/", "thumbnail": "assets/img/puzzle.png" ] Use code with caution. Copied to clipboard 3. Implement the JavaScript Loader

Add this logic to your main.js to fetch and display the games. Fetch Data: Use fetch() to grab your JSON file. To create a feature for a GitHub

Generate HTML: Loop through the games and create a "card" for each.

Filter/Sort: You can easily add buttons to filter by category or sort by title. javascript Overview GitHub

async function loadGames() const response = await fetch('./data/games.json'); const games = await response.json(); const container = document.getElementById('game-container'); games.forEach(game => container.innerHTML += `