Spaces:

pysolver33
/

awesome-games

Running

App Files Files Community

pysolver33 commited on Apr 12, 2025

Commit

9d095b4

verified ·

1 Parent(s): 63b58c1

Add 1 files

Browse files

Files changed (1) hide show

index.html +658 -16

index.html CHANGED Viewed

@@ -53,6 +53,55 @@
             from, to { border-color: transparent }
             50% { border-color: #a777e3; }
         }
     </style>
 </head>
 <body class="gradient-bg min-h-screen text-white">
@@ -131,7 +180,7 @@
                         </div>
                     </div>
-                    <div id="gameContainer" class="game-canvas w-full h-[500px] flex items-center justify-center">
                         <div id="placeholderText" class="text-center p-8">
                             <i class="fas fa-gamepad text-5xl mb-4 opacity-30"></i>
                             <p class="text-xl opacity-50">Your AI-generated game will appear here</p>
@@ -209,6 +258,8 @@
         let currentGame = null;
         let selectedScaffold = null;
         let isSoundOn = true;
         // Initialize the app
         function init() {
@@ -377,22 +428,45 @@ const config = {
     },
     scene: {
         preload: function() {
-            // Load assets here
         },
         create: function() {
-            // Create player, platforms, enemies
-            this.player = this.physics.add.sprite(100, 450, 'player');
-            this.player.setCollideWorldBounds(true);
-            // Generated platforms
             const platforms = this.physics.add.staticGroup();
             platforms.create(400, 568, 'ground').setScale(2).refreshBody();
             // Physics
             this.physics.add.collider(this.player, platforms);
         },
         update: function() {
-            // Game loop
         }
     }
 };
@@ -401,7 +475,7 @@ const game = new Phaser.Game(config);`,
                 rhythm: `// Rhythm game based on: "${prompt}"
 const synth = new Tone.Synth().toDestination();
 const notes = ['C4', 'D4', 'E4', 'F4', 'G4'];
-let currentNote = 0;
 function setupGame() {
     // Create note targets
@@ -411,14 +485,18 @@ function setupGame() {
         noteEl.className = 'note-target';
         noteEl.style.left = \`\${(i + 1) * 15}%\`;
         noteEl.dataset.note = note;
         container.appendChild(noteEl);
     });
     // Start music
     Tone.Transport.bpm.value = 120;
     Tone.Transport.scheduleRepeat(time => {
-        synth.triggerAttackRelease(notes[currentNote], "8n", time);
-        currentNote = (currentNote + 1) % notes.length;
     }, "8n");
     Tone.Transport.start();
@@ -426,7 +504,7 @@ function setupGame() {
                 puzzle: `// Puzzle game based on: "${prompt}"
 class PuzzleGame {
     constructor() {
-        this.gridSize = 8;
         this.pieces = [];
         this.selectedPiece = null;
@@ -450,20 +528,211 @@ class PuzzleGame {
     }
     render() {
-        // Draw the puzzle board
         const container = document.getElementById('gameContainer');
         container.innerHTML = '';
         this.pieces.forEach(row => {
             row.forEach(piece => {
                 const pieceEl = document.createElement('div');
-                pieceEl.className = \`puzzle-piece type-\${piece.type}\`;
-                pieceEl.dataset.x = piece.x;
-                pieceEl.dataset.y = piece.y;
                 container.appendChild(pieceEl);
             });
         });
     }
 }`
             };
@@ -479,11 +748,16 @@ class PuzzleGame {
                 } else if (typeof currentGame.cleanup === 'function') {
                     currentGame.cleanup();
                 }
                 currentGame = null;
             }
             // Hide placeholder
             placeholderText.style.display = 'none';
             // Create game based on scaffold type
             switch (gameData.scaffold) {
@@ -496,8 +770,17 @@ class PuzzleGame {
                 case 'puzzle':
                     createPuzzleGame(gameData);
                     break;
                 default:
-                    // For other types, just show a placeholder
                     placeholderText.style.display = 'block';
                     placeholderText.innerHTML = `
                         <i class="fas fa-gamepad text-5xl mb-4 opacity-30"></i>
@@ -764,6 +1047,353 @@ class PuzzleGame {
             };
         }
         // Update game controls based on game type
         function updateGameControls(gameType) {
             gameControls.innerHTML = '';
@@ -779,6 +1409,18 @@ class PuzzleGame {
                 puzzle: [
                     { label: 'Select', keys: 'Click', desc: 'Select pieces' }
                 ],
                 default: [
                     { label: 'No controls', desc: 'This game type has no interactive controls' }
                 ]

             from, to { border-color: transparent }
             50% { border-color: #a777e3; }
         }
+        .car {
+            position: absolute;
+            width: 50px;
+            height: 90px;
+            background-color: #3498db;
+            border-radius: 10px;
+        }
+        .opponent-car {
+            position: absolute;
+            width: 50px;
+            height: 90px;
+            background-color: #e74c3c;
+            border-radius: 10px;
+        }
+        .road {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: #34495e;
+        }
+        .lane-marker {
+            position: absolute;
+            width: 10px;
+            height: 60px;
+            background-color: #f1c40f;
+        }
+        .adventure-tile {
+            position: absolute;
+            width: 60px;
+            height: 60px;
+            background-color: #2ecc71;
+            border-radius: 5px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: bold;
+            cursor: pointer;
+            transition: transform 0.2s;
+        }
+        .adventure-tile:hover {
+            transform: scale(1.05);
+        }
+        .npc {
+            background-color: #9b59b6;
+        }
+        .item {
+            background-color: #e67e22;
+        }
     </style>
 </head>
 <body class="gradient-bg min-h-screen text-white">
                         </div>
                     </div>
+                    <div id="gameContainer" class="game-canvas w-full h-[500px] flex items-center justify-center relative overflow-hidden">
                         <div id="placeholderText" class="text-center p-8">
                             <i class="fas fa-gamepad text-5xl mb-4 opacity-30"></i>
                             <p class="text-xl opacity-50">Your AI-generated game will appear here</p>
         let currentGame = null;
         let selectedScaffold = null;
         let isSoundOn = true;
+        let racingInterval = null;
+        let adventureState = null;
         // Initialize the app
         function init() {
     },
     scene: {
         preload: function() {
+            this.load.image('sky', 'assets/sky.png');
+            this.load.image('ground', 'assets/platform.png');
+            this.load.image('star', 'assets/star.png');
+            this.load.spritesheet('player', 'assets/player.png', {
+                frameWidth: 32, frameHeight: 48
+            });
         },
         create: function() {
+            // Create world
+            this.add.image(400, 300, 'sky');
+            // Platforms
             const platforms = this.physics.add.staticGroup();
             platforms.create(400, 568, 'ground').setScale(2).refreshBody();
+            // Player
+            this.player = this.physics.add.sprite(100, 450, 'player');
+            this.player.setBounce(0.2);
+            this.player.setCollideWorldBounds(true);
             // Physics
             this.physics.add.collider(this.player, platforms);
+            // Controls
+            this.cursors = this.input.keyboard.createCursorKeys();
         },
         update: function() {
+            // Movement logic
+            if (this.cursors.left.isDown) {
+                this.player.setVelocityX(-160);
+            } else if (this.cursors.right.isDown) {
+                this.player.setVelocityX(160);
+            } else {
+                this.player.setVelocityX(0);
+            }
+            if (this.cursors.up.isDown && this.player.body.touching.down) {
+                this.player.setVelocityY(-330);
+            }
         }
     }
 };
                 rhythm: `// Rhythm game based on: "${prompt}"
 const synth = new Tone.Synth().toDestination();
 const notes = ['C4', 'D4', 'E4', 'F4', 'G4'];
+let score = 0;
 function setupGame() {
     // Create note targets
         noteEl.className = 'note-target';
         noteEl.style.left = \`\${(i + 1) * 15}%\`;
         noteEl.dataset.note = note;
+        noteEl.addEventListener('click', () => {
+            synth.triggerAttackRelease(note, "8n");
+            score += 10;
+        });
         container.appendChild(noteEl);
     });
     // Start music
     Tone.Transport.bpm.value = 120;
     Tone.Transport.scheduleRepeat(time => {
+        const note = notes[Math.floor(Math.random() * notes.length)];
+        synth.triggerAttackRelease(note, "8n", time);
     }, "8n");
     Tone.Transport.start();
                 puzzle: `// Puzzle game based on: "${prompt}"
 class PuzzleGame {
     constructor() {
+        this.gridSize = 4;
         this.pieces = [];
         this.selectedPiece = null;
     }
     render() {
         const container = document.getElementById('gameContainer');
         container.innerHTML = '';
         this.pieces.forEach(row => {
             row.forEach(piece => {
                 const pieceEl = document.createElement('div');
+                pieceEl.className = 'puzzle-piece';
+                pieceEl.style.backgroundColor = \`hsl(\${Math.random() * 360}, 70%, 60%)\`;
+                pieceEl.addEventListener('click', () => this.handleClick(piece));
                 container.appendChild(pieceEl);
             });
         });
     }
+    handleClick(piece) {
+        // Handle puzzle piece click
+    }
+}`,
+                shooter: `// Shooter game based on: "${prompt}"
+const config = {
+    type: Phaser.AUTO,
+    width: 800,
+    height: 600,
+    physics: {
+        default: 'arcade',
+        arcade: { debug: false }
+    },
+    scene: {
+        preload: function() {
+            this.load.image('player', 'assets/ship.png');
+            this.load.image('bullet', 'assets/bullet.png');
+            this.load.image('enemy', 'assets/enemy.png');
+        },
+        create: function() {
+            // Player
+            this.player = this.physics.add.sprite(400, 500, 'player');
+            this.player.setCollideWorldBounds(true);
+            // Bullets
+            this.bullets = this.physics.add.group();
+            // Enemies
+            this.enemies = this.physics.add.group();
+            this.time.addEvent({
+                delay: 1000,
+                callback: this.spawnEnemy,
+                callbackScope: this,
+                loop: true
+            });
+            // Controls
+            this.cursors = this.input.keyboard.createCursorKeys();
+            this.input.on('pointerdown', this.shoot, this);
+        },
+        update: function() {
+            // Movement
+            if (this.cursors.left.isDown) {
+                this.player.setVelocityX(-200);
+            } else if (this.cursors.right.isDown) {
+                this.player.setVelocityX(200);
+            } else {
+                this.player.setVelocityX(0);
+            }
+        },
+        shoot: function() {
+            const bullet = this.bullets.create(this.player.x, this.player.y, 'bullet');
+            bullet.setVelocityY(-300);
+        },
+        spawnEnemy: function() {
+            const x = Phaser.Math.Between(50, 750);
+            const enemy = this.enemies.create(x, 0, 'enemy');
+            enemy.setVelocityY(100);
+        }
+    }
+};
+const game = new Phaser.Game(config);`,
+                adventure: `// Adventure game based on: "${prompt}"
+class AdventureGame {
+    constructor() {
+        this.worldSize = { width: 10, height: 10 };
+        this.playerPos = { x: 0, y: 0 };
+        this.npcs = [
+            { x: 3, y: 2, name: 'Wizard', dialog: 'Seek the magic orb!' },
+            { x: 7, y: 5, name: 'Merchant', dialog: 'I have potions for sale.' }
+        ];
+        this.items = [
+            { x: 5, y: 8, name: 'Magic Orb', description: 'Grants wishes' }
+        ];
+        this.renderWorld();
+    }
+    renderWorld() {
+        const container = document.getElementById('gameContainer');
+        container.innerHTML = '';
+        // Render tiles
+        for (let y = 0; y < this.worldSize.height; y++) {
+            for (let x = 0; x < this.worldSize.width; x++) {
+                const tile = document.createElement('div');
+                tile.className = 'adventure-tile';
+                tile.style.left = \`\${x * 7}%\`;
+                tile.style.top = \`\${y * 7}%\`;
+                container.appendChild(tile);
+            }
+        }
+        // Render NPCs
+        this.npcs.forEach(npc => {
+            const npcEl = document.createElement('div');
+            npcEl.className = 'adventure-tile npc';
+            npcEl.style.left = \`\${npc.x * 7}%\`;
+            npcEl.style.top = \`\${npc.y * 7}%\`;
+            npcEl.textContent = npc.name[0];
+            npcEl.title = npc.name;
+            container.appendChild(npcEl);
+        });
+        // Render items
+        this.items.forEach(item => {
+            const itemEl = document.createElement('div');
+            itemEl.className = 'adventure-tile item';
+            itemEl.style.left = \`\${item.x * 7}%\`;
+            itemEl.style.top = \`\${item.y * 7}%\`;
+            itemEl.textContent = item.name[0];
+            itemEl.title = item.name;
+            container.appendChild(itemEl);
+        });
+    }
+}`,
+                racing: `// Racing game based on: "${prompt}"
+class RacingGame {
+    constructor() {
+        this.playerCar = { x: 50, y: 400, speed: 0 };
+        this.opponents = [
+            { x: 150, y: 100, speed: 3 },
+            { x: 250, y: 0, speed: 4 },
+            { x: 350, y: -100, speed: 3.5 }
+        ];
+        this.road = [];
+        this.initGame();
+        this.startRace();
+    }
+    initGame() {
+        const container = document.getElementById('gameContainer');
+        container.innerHTML = '';
+        // Create road
+        for (let i = 0; i < 20; i++) {
+            const marker = document.createElement('div');
+            marker.className = 'lane-marker';
+            marker.style.left = '45%';
+            marker.style.top = \`\${i * 120}px\`;
+            container.appendChild(marker);
+        }
+        // Create player car
+        const car = document.createElement('div');
+        car.className = 'car';
+        car.style.left = \`\${this.playerCar.x}px\`;
+        car.style.top = \`\${this.playerCar.y}px\`;
+        container.appendChild(car);
+        // Create opponent cars
+        this.opponents.forEach(opp => {
+            const oppCar = document.createElement('div');
+            oppCar.className = 'opponent-car';
+            oppCar.style.left = \`\${opp.x}px\`;
+            oppCar.style.top = \`\${opp.y}px\`;
+            container.appendChild(oppCar);
+        });
+    }
+    startRace() {
+        // Handle keyboard controls
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowLeft') this.playerCar.x = Math.max(50, this.playerCar.x - 20);
+            if (e.key === 'ArrowRight') this.playerCar.x = Math.min(350, this.playerCar.x + 20);
+            if (e.key === 'ArrowUp') this.playerCar.speed = Math.min(10, this.playerCar.speed + 0.5);
+            if (e.key === 'ArrowDown') this.playerCar.speed = Math.max(0, this.playerCar.speed - 0.5);
+            // Update player car position
+            document.querySelector('.car').style.left = \`\${this.playerCar.x}px\`;
+        });
+        // Game loop
+        setInterval(() => {
+            // Move opponents
+            this.opponents.forEach(opp => {
+                opp.y += opp.speed;
+                if (opp.y > 600) opp.y = -100;
+                document.querySelectorAll('.opponent-car')[this.opponents.indexOf(opp)].style.top = \`\${opp.y}px\`;
+            });
+            // Move road markers
+            const markers = document.querySelectorAll('.lane-marker');
+            markers.forEach(marker => {
+                const currentTop = parseInt(marker.style.top);
+                marker.style.top = \`\${(currentTop + this.playerCar.speed) % 600}px\`;
+            });
+        }, 16);
+    }
 }`
             };
                 } else if (typeof currentGame.cleanup === 'function') {
                     currentGame.cleanup();
                 }
+                if (racingInterval) {
+                    clearInterval(racingInterval);
+                    racingInterval = null;
+                }
                 currentGame = null;
             }
             // Hide placeholder
             placeholderText.style.display = 'none';
+            gameContainer.innerHTML = '';
             // Create game based on scaffold type
             switch (gameData.scaffold) {
                 case 'puzzle':
                     createPuzzleGame(gameData);
                     break;
+                case 'shooter':
+                    createShooterGame(gameData);
+                    break;
+                case 'adventure':
+                    createAdventureGame(gameData);
+                    break;
+                case 'racing':
+                    createRacingGame(gameData);
+                    break;
                 default:
+                    // Fallback
                     placeholderText.style.display = 'block';
                     placeholderText.innerHTML = `
                         <i class="fas fa-gamepad text-5xl mb-4 opacity-30"></i>
             };
         }
+        // Create a shooter game
+        function createShooterGame(gameData) {
+            const config = {
+                type: Phaser.AUTO,
+                width: gameContainer.clientWidth,
+                height: gameContainer.clientHeight,
+                physics: {
+                    default: 'arcade',
+                    arcade: {
+                        debug: false
+                    }
+                },
+                parent: 'gameContainer',
+                scene: {
+                    preload: preload,
+                    create: create,
+                    update: update
+                }
+            };
+            currentGame = new Phaser.Game(config);
+            function preload() {
+                // Load assets
+                this.load.image('ship', 'https://labs.phaser.io/assets/sprites/thrust_ship2.png');
+                this.load.image('bullet', 'https://labs.phaser.io/assets/sprites/bullets/bullet6.png');
+                this.load.image('enemy', 'https://labs.phaser.io/assets/sprites/asteroid.png');
+            }
+            function create() {
+                // Add background
+                this.add.rectangle(0, 0, config.width, config.height, 0x1a1a2e).setOrigin(0);
+                // Player
+                this.player = this.physics.add.sprite(config.width / 2, config.height - 50, 'ship');
+                this.player.setCollideWorldBounds(true);
+                // Bullets
+                this.bullets = this.physics.add.group();
+                // Enemies
+                this.enemies = this.physics.add.group();
+                this.time.addEvent({
+                    delay: 1000,
+                    callback: spawnEnemy,
+                    callbackScope: this,
+                    loop: true
+                });
+                // Controls
+                this.cursors = this.input.keyboard.createCursorKeys();
+                this.input.on('pointerdown', shoot, this);
+                // Score
+                this.score = 0;
+                this.scoreText = this.add.text(16, 16, 'Score: 0', {
+                    fontSize: '24px',
+                    fill: '#fff',
+                    fontFamily: 'Arial'
+                });
+                function shoot() {
+                    const bullet = this.bullets.create(this.player.x, this.player.y - 20, 'bullet');
+                    bullet.setVelocityY(-300);
+                    if (isSoundOn) {
+                        const synth = new Tone.Synth().toDestination();
+                        synth.triggerAttackRelease("A2", "8n");
+                    }
+                }
+                function spawnEnemy() {
+                    const x = Phaser.Math.Between(50, config.width - 50);
+                    const enemy = this.enemies.create(x, 0, 'enemy');
+                    enemy.setScale(0.5);
+                    enemy.setVelocityY(Phaser.Math.Between(50, 150));
+                    // Collision
+                    this.physics.add.collider(this.bullets, this.enemies, hitEnemy, null, this);
+                    function hitEnemy(bullet, enemy) {
+                        bullet.destroy();
+                        enemy.destroy();
+                        this.score += 10;
+                        this.scoreText.setText('Score: ' + this.score);
+                        if (isSoundOn) {
+                            const synth = new Tone.Synth().toDestination();
+                            synth.triggerAttackRelease("C5", "8n");
+                        }
+                    }
+                }
+            }
+            function update() {
+                // Movement
+                if (this.cursors.left.isDown) {
+                    this.player.setVelocityX(-200);
+                } else if (this.cursors.right.isDown) {
+                    this.player.setVelocityX(200);
+                } else {
+                    this.player.setVelocityX(0);
+                }
+            }
+        }
+        // Create an adventure game
+        function createAdventureGame(gameData) {
+            // Clear container
+            gameContainer.innerHTML = '';
+            // Game state
+            adventureState = {
+                playerPos: { x: 0, y: 0 },
+                inventory: [],
+                npcs: [
+                    { x: 3, y: 2, name: 'Wizard', dialog: 'Seek the magic orb to win the game!' },
+                    { x: 7, y: 5, name: 'Merchant', dialog: 'I have potions for sale. (Coming soon!)' }
+                ],
+                items: [
+                    { x: 5, y: 8, name: 'Magic Orb', description: 'The legendary orb that grants wishes' }
+                ]
+            };
+            // Render world
+            renderAdventureWorld();
+            currentGame = {
+                cleanup: () => {
+                    adventureState = null;
+                }
+            };
+            function renderAdventureWorld() {
+                // Clear container
+                gameContainer.innerHTML = '';
+                // Create grid
+                const gridSize = 10;
+                const tileSize = Math.min(
+                    gameContainer.clientWidth / gridSize - 2,
+                    gameContainer.clientHeight / gridSize - 2
+                );
+                // Render tiles
+                for (let y = 0; y < gridSize; y++) {
+                    for (let x = 0; x < gridSize; x++) {
+                        const tile = document.createElement('div');
+                        tile.className = 'adventure-tile';
+                        tile.style.width = `${tileSize}px`;
+                        tile.style.height = `${tileSize}px`;
+                        tile.style.left = `${x * (tileSize + 2)}px`;
+                        tile.style.top = `${y * (tileSize + 2)}px`;
+                        // Mark player position
+                        if (x === adventureState.playerPos.x && y === adventureState.playerPos.y) {
+                            tile.innerHTML = '<i class="fas fa-user"></i>';
+                            tile.style.backgroundColor = '#3498db';
+                        }
+                        gameContainer.appendChild(tile);
+                    }
+                }
+                // Render NPCs
+                adventureState.npcs.forEach(npc => {
+                    const npcEl = document.createElement('div');
+                    npcEl.className = 'adventure-tile npc';
+                    npcEl.style.width = `${tileSize}px`;
+                    npcEl.style.height = `${tileSize}px`;
+                    npcEl.style.left = `${npc.x * (tileSize + 2)}px`;
+                    npcEl.style.top = `${npc.y * (tileSize + 2)}px`;
+                    npcEl.innerHTML = `<i class="fas fa-hat-wizard"></i>`;
+                    npcEl.title = npc.name;
+                    npcEl.addEventListener('click', () => {
+                        alert(`${npc.name}: ${npc.dialog}`);
+                    });
+                    gameContainer.appendChild(npcEl);
+                });
+                // Render items
+                adventureState.items.forEach(item => {
+                    const itemEl = document.createElement('div');
+                    itemEl.className = 'adventure-tile item';
+                    itemEl.style.width = `${tileSize}px`;
+                    itemEl.style.height = `${tileSize}px`;
+                    itemEl.style.left = `${item.x * (tileSize + 2)}px`;
+                    itemEl.style.top = `${item.y * (tileSize + 2)}px`;
+                    itemEl.innerHTML = `<i class="fas fa-gem"></i>`;
+                    itemEl.title = item.name;
+                    itemEl.addEventListener('click', () => {
+                        if (Math.abs(adventureState.playerPos.x - item.x) <= 1 &&
+                            Math.abs(adventureState.playerPos.y - item.y) <= 1) {
+                            alert(`You found the ${item.name}! ${item.description}`);
+                            adventureState.items = adventureState.items.filter(i => i !== item);
+                            renderAdventureWorld();
+                        } else {
+                            alert(`You need to get closer to the ${item.name}!`);
+                        }
+                    });
+                    gameContainer.appendChild(itemEl);
+                });
+                // Add controls
+                document.addEventListener('keydown', (e) => {
+                    const newPos = {...adventureState.playerPos};
+                    switch(e.key) {
+                        case 'ArrowUp':
+                            newPos.y = Math.max(0, adventureState.playerPos.y - 1);
+                            break;
+                        case 'ArrowDown':
+                            newPos.y = Math.min(gridSize - 1, adventureState.playerPos.y + 1);
+                            break;
+                        case 'ArrowLeft':
+                            newPos.x = Math.max(0, adventureState.playerPos.x - 1);
+                            break;
+                        case 'ArrowRight':
+                            newPos.x = Math.min(gridSize - 1, adventureState.playerPos.x + 1);
+                            break;
+                    }
+                    if (newPos.x !== adventureState.playerPos.x || newPos.y !== adventureState.playerPos.y) {
+                        adventureState.playerPos = newPos;
+                        renderAdventureWorld();
+                    }
+                });
+            }
+        }
+        // Create a racing game
+        function createRacingGame(gameData) {
+            // Clear container
+            gameContainer.innerHTML = '';
+            // Game state
+            const state = {
+                player: { x: 175, y: 400, speed: 0, maxSpeed: 10 },
+                opponents: [
+                    { x: 75, y: -100, speed: 3 },
+                    { x: 175, y: -300, speed: 4 },
+                    { x: 275, y: -500, speed: 3.5 }
+                ],
+                roadMarkers: Array.from({ length: 20 }, (_, i) => ({ y: i * 120 })),
+                score: 0
+            };
+            // Create road
+            const road = document.createElement('div');
+            road.className = 'road';
+            gameContainer.appendChild(road);
+            // Create road markers
+            state.roadMarkers.forEach(marker => {
+                const markerEl = document.createElement('div');
+                markerEl.className = 'lane-marker';
+                markerEl.style.left = '45%';
+                markerEl.style.top = `${marker.y}px`;
+                gameContainer.appendChild(markerEl);
+            });
+            // Create player car
+            const playerCar = document.createElement('div');
+            playerCar.className = 'car';
+            playerCar.style.left = `${state.player.x}px`;
+            playerCar.style.top = `${state.player.y}px`;
+            gameContainer.appendChild(playerCar);
+            // Create opponent cars
+            state.opponents.forEach(opp => {
+                const oppCar = document.createElement('div');
+                oppCar.className = 'opponent-car';
+                oppCar.style.left = `${opp.x}px`;
+                oppCar.style.top = `${opp.y}px`;
+                gameContainer.appendChild(oppCar);
+            });
+            // Score display
+            const scoreEl = document.createElement('div');
+            scoreEl.className = 'absolute top-4 left-4 text-white font-bold text-xl';
+            scoreEl.textContent = `Score: ${state.score}`;
+            gameContainer.appendChild(scoreEl);
+            // Controls
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'ArrowLeft') state.player.x = Math.max(75, state.player.x - 100);
+                if (e.key === 'ArrowRight') state.player.x = Math.min(275, state.player.x + 100);
+                if (e.key === 'ArrowUp') state.player.speed = Math.min(state.player.maxSpeed, state.player.speed + 0.5);
+                if (e.key === 'ArrowDown') state.player.speed = Math.max(0, state.player.speed - 0.5);
+                // Update player car position
+                playerCar.style.left = `${state.player.x}px`;
+            });
+            // Game loop
+            racingInterval = setInterval(() => {
+                // Move opponents
+                state.opponents.forEach(opp => {
+                    opp.y += opp.speed;
+                    if (opp.y > gameContainer.clientHeight) {
+                        opp.y = -100;
+                        state.score += 10;
+                        scoreEl.textContent = `Score: ${state.score}`;
+                    }
+                    // Check collision
+                    if (Math.abs(opp.x - state.player.x) < 50 &&
+                        Math.abs(opp.y - state.player.y) < 50) {
+                        state.player.speed = Math.max(0, state.player.speed - 1);
+                    }
+                    // Update opponent position
+                    document.querySelectorAll('.opponent-car')[state.opponents.indexOf(opp)].style.top = `${opp.y}px`;
+                });
+                // Move road markers
+                state.roadMarkers.forEach(marker => {
+                    marker.y += state.player.speed;
+                    if (marker.y > gameContainer.clientHeight) {
+                        marker.y = 0;
+                    }
+                    // Update marker position
+                    const markers = document.querySelectorAll('.lane-marker');
+                    markers[state.roadMarkers.indexOf(marker)].style.top = `${marker.y}px`;
+                });
+                // Update score based on speed
+                state.score += Math.floor(state.player.speed / 10);
+                scoreEl.textContent = `Score: ${state.score}`;
+            }, 16);
+            currentGame = {
+                cleanup: () => {
+                    if (racingInterval) {
+                        clearInterval(racingInterval);
+                        racingInterval = null;
+                    }
+                }
+            };
+        }
         // Update game controls based on game type
         function updateGameControls(gameType) {
             gameControls.innerHTML = '';
                 puzzle: [
                     { label: 'Select', keys: 'Click', desc: 'Select pieces' }
                 ],
+                shooter: [
+                    { label: 'Left/Right', keys: '← →', desc: 'Move ship' },
+                    { label: 'Shoot', keys: 'Click', desc: 'Fire bullets' }
+                ],
+                adventure: [
+                    { label: 'Move', keys: 'Arrow Keys', desc: 'Navigate the world' },
+                    { label: 'Interact', keys: 'Click', desc: 'Talk to NPCs or collect items' }
+                ],
+                racing: [
+                    { label: 'Left/Right', keys: '← →', desc: 'Change lanes' },
+                    { label: 'Accelerate/Brake', keys: '↑ ↓', desc: 'Control speed' }
+                ],
                 default: [
                     { label: 'No controls', desc: 'This game type has no interactive controls' }
                 ]