Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Game Creator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/tone@14.7.77/build/Tone.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .game-canvas { | |
| border-radius: 12px; | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| background-color: #1a1a2e; | |
| } | |
| .prompt-input { | |
| transition: all 0.3s ease; | |
| } | |
| .prompt-input:focus { | |
| box-shadow: 0 0 0 3px rgba(167, 119, 227, 0.3); | |
| } | |
| .scaffold-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); | |
| } | |
| .loading-dots::after { | |
| content: '.'; | |
| animation: dots 1.5s steps(5, end) infinite; | |
| } | |
| @keyframes dots { | |
| 0%, 20% { content: '.'; } | |
| 40% { content: '..'; } | |
| 60% { content: '...'; } | |
| 80%, 100% { content: ''; } | |
| } | |
| .typewriter { | |
| overflow: hidden; | |
| border-right: 3px solid #a777e3; | |
| white-space: nowrap; | |
| margin: 0 auto; | |
| letter-spacing: 2px; | |
| animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: #a777e3; } | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen text-white"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-5xl font-bold mb-4 flex items-center justify-center"> | |
| <i class="fas fa-gamepad mr-4"></i> | |
| <span class="typewriter">AI Game Creator</span> | |
| </h1> | |
| <p class="text-xl opacity-90 max-w-2xl mx-auto"> | |
| Describe your dream game and watch it come to life with AI magic! | |
| </p> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Left Panel - Input & Scaffolds --> | |
| <div class="w-full lg:w-1/3 space-y-6"> | |
| <!-- Prompt Input --> | |
| <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 shadow-lg"> | |
| <h2 class="text-2xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-lightbulb mr-2"></i> Game Concept | |
| </h2> | |
| <textarea | |
| id="gamePrompt" | |
| class="w-full h-32 px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/50 prompt-input focus:outline-none" | |
| placeholder="Describe your game idea... (e.g. 'A platformer where you play as a cat collecting fish while avoiding dogs')"></textarea> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <button id="generateBtn" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg transition flex items-center"> | |
| <i class="fas fa-magic mr-2"></i> Generate Game | |
| </button> | |
| <div id="loadingIndicator" class="hidden items-center text-sm"> | |
| <span class="loading-dots">Generating</span> | |
| <i class="fas fa-spinner fa-spin ml-2"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scaffold Selection --> | |
| <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 shadow-lg"> | |
| <h2 class="text-2xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-layer-group mr-2"></i> Game Templates | |
| </h2> | |
| <div class="grid grid-cols-1 gap-4" id="scaffoldContainer"> | |
| <!-- Scaffold cards will be inserted here by JavaScript --> | |
| </div> | |
| </div> | |
| <!-- Generated Code Preview --> | |
| <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 shadow-lg"> | |
| <h2 class="text-2xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-code mr-2"></i> Generated Code | |
| </h2> | |
| <div class="bg-gray-900 rounded-lg p-4 h-64 overflow-auto"> | |
| <pre id="generatedCode" class="text-sm text-green-400 font-mono">// Your generated game code will appear here...</pre> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Panel - Game Display --> | |
| <div class="w-full lg:w-2/3"> | |
| <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 shadow-lg h-full"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-2xl font-semibold flex items-center"> | |
| <i class="fas fa-play-circle mr-2"></i> Game Preview | |
| </h2> | |
| <div class="flex space-x-2"> | |
| <button id="fullscreenBtn" class="bg-white/10 hover:bg-white/20 p-2 rounded-lg transition"> | |
| <i class="fas fa-expand"></i> | |
| </button> | |
| <button id="soundToggle" class="bg-white/10 hover:bg-white/20 p-2 rounded-lg transition"> | |
| <i class="fas fa-volume-up"></i> | |
| </button> | |
| </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> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex flex-wrap gap-2" id="gameControls"> | |
| <!-- Dynamic game controls will appear here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Game Scaffolds Data | |
| const scaffolds = [ | |
| { | |
| id: 'platformer', | |
| title: 'Platformer', | |
| icon: 'fas fa-running', | |
| description: 'Jump and run through levels with obstacles and enemies', | |
| keywords: ['platform', 'jump', 'run', 'side-scroller', 'mario'] | |
| }, | |
| { | |
| id: 'rhythm', | |
| title: 'Rhythm Game', | |
| icon: 'fas fa-music', | |
| description: 'Hit notes to the beat of the music', | |
| keywords: ['music', 'beat', 'dance', 'rhythm', 'sound'] | |
| }, | |
| { | |
| id: 'puzzle', | |
| title: 'Puzzle Game', | |
| icon: 'fas fa-puzzle-piece', | |
| description: 'Solve challenging puzzles to progress', | |
| keywords: ['puzzle', 'solve', 'brain', 'logic', 'challenge'] | |
| }, | |
| { | |
| id: 'shooter', | |
| title: 'Shooter', | |
| icon: 'fas fa-space-shuttle', | |
| description: 'Shoot enemies and avoid projectiles', | |
| keywords: ['shoot', 'space', 'bullet', 'enemy', 'arcade'] | |
| }, | |
| { | |
| id: 'adventure', | |
| title: 'Adventure', | |
| icon: 'fas fa-map', | |
| description: 'Explore a world and complete quests', | |
| keywords: ['explore', 'quest', 'story', 'rpg', 'world'] | |
| }, | |
| { | |
| id: 'racing', | |
| title: 'Racing', | |
| icon: 'fas fa-car', | |
| description: 'Race against time or opponents', | |
| keywords: ['race', 'speed', 'car', 'track', 'drive'] | |
| } | |
| ]; | |
| // DOM Elements | |
| const gamePrompt = document.getElementById('gamePrompt'); | |
| const generateBtn = document.getElementById('generateBtn'); | |
| const loadingIndicator = document.getElementById('loadingIndicator'); | |
| const scaffoldContainer = document.getElementById('scaffoldContainer'); | |
| const gameContainer = document.getElementById('gameContainer'); | |
| const placeholderText = document.getElementById('placeholderText'); | |
| const gameControls = document.getElementById('gameControls'); | |
| const generatedCode = document.getElementById('generatedCode'); | |
| const fullscreenBtn = document.getElementById('fullscreenBtn'); | |
| const soundToggle = document.getElementById('soundToggle'); | |
| // Current game state | |
| let currentGame = null; | |
| let selectedScaffold = null; | |
| let isSoundOn = true; | |
| // Initialize the app | |
| function init() { | |
| renderScaffoldCards(); | |
| setupEventListeners(); | |
| } | |
| // Render scaffold selection cards | |
| function renderScaffoldCards() { | |
| scaffoldContainer.innerHTML = ''; | |
| scaffolds.forEach(scaffold => { | |
| const card = document.createElement('div'); | |
| card.className = `bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg p-4 cursor-pointer transition scaffold-card ${selectedScaffold?.id === scaffold.id ? 'border-purple-500 bg-purple-500/10' : ''}`; | |
| card.innerHTML = ` | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-purple-600/30 flex items-center justify-center mr-3"> | |
| <i class="${scaffold.icon} text-purple-300"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold">${scaffold.title}</h3> | |
| <p class="text-sm opacity-80">${scaffold.description}</p> | |
| </div> | |
| </div> | |
| `; | |
| card.addEventListener('click', () => { | |
| selectedScaffold = scaffold; | |
| renderScaffoldCards(); | |
| updateUI(); | |
| }); | |
| scaffoldContainer.appendChild(card); | |
| }); | |
| } | |
| // Set up event listeners | |
| function setupEventListeners() { | |
| generateBtn.addEventListener('click', generateGame); | |
| fullscreenBtn.addEventListener('click', toggleFullscreen); | |
| soundToggle.addEventListener('click', toggleSound); | |
| // Allow Enter key to trigger generation | |
| gamePrompt.addEventListener('keydown', (e) => { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| generateGame(); | |
| } | |
| }); | |
| } | |
| // Generate game based on prompt and selected scaffold | |
| async function generateGame() { | |
| const prompt = gamePrompt.value.trim(); | |
| if (!prompt) { | |
| showAlert('Please enter a game description', 'error'); | |
| return; | |
| } | |
| if (!selectedScaffold) { | |
| showAlert('Please select a game template', 'error'); | |
| return; | |
| } | |
| // Show loading state | |
| generateBtn.disabled = true; | |
| loadingIndicator.classList.remove('hidden'); | |
| try { | |
| // In a real app, this would call your backend API | |
| // For this demo, we'll simulate the API call | |
| const gameData = await simulateLLMGeneration(prompt, selectedScaffold); | |
| // Create the game | |
| createGame(gameData); | |
| // Update the code preview | |
| generatedCode.textContent = gameData.code || '// No code generated'; | |
| showAlert('Game generated successfully!', 'success'); | |
| } catch (error) { | |
| console.error('Error generating game:', error); | |
| showAlert('Failed to generate game. Please try again.', 'error'); | |
| } finally { | |
| // Hide loading state | |
| generateBtn.disabled = false; | |
| loadingIndicator.classList.add('hidden'); | |
| } | |
| } | |
| // Simulate LLM generation (in a real app, this would be an API call) | |
| async function simulateLLMGeneration(prompt, scaffold) { | |
| // Simulate network delay | |
| await new Promise(resolve => setTimeout(resolve, 2000)); | |
| // Generate mock game data based on scaffold type | |
| let gameData = { | |
| scaffold: scaffold.id, | |
| prompt: prompt, | |
| code: generateMockCode(scaffold.id, prompt), | |
| config: {} | |
| }; | |
| // Add scaffold-specific config | |
| switch (scaffold.id) { | |
| case 'platformer': | |
| gameData.config = { | |
| player: { speed: 300, jumpForce: 600 }, | |
| platforms: generatePlatforms(10), | |
| enemies: generateEnemies(3), | |
| collectibles: generateCollectibles(5) | |
| }; | |
| break; | |
| case 'rhythm': | |
| gameData.config = { | |
| bpm: 120, | |
| notes: generateNotes(16), | |
| difficulty: 'medium' | |
| }; | |
| break; | |
| case 'puzzle': | |
| gameData.config = { | |
| gridSize: 8, | |
| pieces: generatePuzzlePieces(6), | |
| movesAllowed: 20 | |
| }; | |
| break; | |
| case 'shooter': | |
| gameData.config = { | |
| player: { speed: 400, fireRate: 500 }, | |
| enemies: generateSpaceEnemies(5), | |
| powerups: generatePowerups(2) | |
| }; | |
| break; | |
| case 'adventure': | |
| gameData.config = { | |
| worldSize: { width: 10, height: 10 }, | |
| npcs: generateNPCs(3), | |
| items: generateAdventureItems(4) | |
| }; | |
| break; | |
| case 'racing': | |
| gameData.config = { | |
| track: generateTrack(), | |
| opponents: 3, | |
| laps: 3 | |
| }; | |
| break; | |
| } | |
| return gameData; | |
| } | |
| // Generate mock code for preview | |
| function generateMockCode(scaffoldId, prompt) { | |
| const codeSnippets = { | |
| platformer: `// Platformer game based on: "${prompt}" | |
| const config = { | |
| type: Phaser.AUTO, | |
| width: 800, | |
| height: 600, | |
| physics: { | |
| default: 'arcade', | |
| arcade: { gravity: { y: 300 }, debug: false } | |
| }, | |
| 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 | |
| } | |
| } | |
| }; | |
| 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 | |
| const container = document.getElementById('gameContainer'); | |
| notes.forEach((note, i) => { | |
| const noteEl = document.createElement('div'); | |
| 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(); | |
| }`, | |
| puzzle: `// Puzzle game based on: "${prompt}" | |
| class PuzzleGame { | |
| constructor() { | |
| this.gridSize = 8; | |
| this.pieces = []; | |
| this.selectedPiece = null; | |
| this.initBoard(); | |
| } | |
| initBoard() { | |
| // Generate random puzzle pieces | |
| for (let i = 0; i < this.gridSize; i++) { | |
| this.pieces[i] = []; | |
| for (let j = 0; j < this.gridSize; j++) { | |
| this.pieces[i][j] = { | |
| type: Math.floor(Math.random() * 6), | |
| x: i, | |
| y: j | |
| }; | |
| } | |
| } | |
| this.render(); | |
| } | |
| 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); | |
| }); | |
| }); | |
| } | |
| }` | |
| }; | |
| return codeSnippets[scaffoldId] || '// No template found for this game type'; | |
| } | |
| // Create the actual game | |
| function createGame(gameData) { | |
| // Clear previous game if exists | |
| if (currentGame) { | |
| if (currentGame instanceof Phaser.Game) { | |
| currentGame.destroy(true); | |
| } 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) { | |
| case 'platformer': | |
| createPlatformerGame(gameData); | |
| break; | |
| case 'rhythm': | |
| createRhythmGame(gameData); | |
| break; | |
| 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> | |
| <p class="text-xl opacity-50">Preview not available for ${selectedScaffold.title} template</p> | |
| <p class="text-sm opacity-30 mt-2">Check the code tab to see the generated code</p> | |
| `; | |
| } | |
| // Update game controls | |
| updateGameControls(gameData.scaffold); | |
| } | |
| // Create a platformer game | |
| function createPlatformerGame(gameData) { | |
| const config = { | |
| type: Phaser.AUTO, | |
| width: gameContainer.clientWidth, | |
| height: gameContainer.clientHeight, | |
| physics: { | |
| default: 'arcade', | |
| arcade: { | |
| gravity: { y: 300 }, | |
| debug: false | |
| } | |
| }, | |
| parent: 'gameContainer', | |
| scene: { | |
| preload: preload, | |
| create: create, | |
| update: update | |
| } | |
| }; | |
| currentGame = new Phaser.Game(config); | |
| function preload() { | |
| // Load assets (in a real app, these would be generated or selected based on prompt) | |
| this.load.image('sky', 'https://labs.phaser.io/assets/skies/space3.png'); | |
| this.load.image('ground', 'https://labs.phaser.io/assets/platform.png'); | |
| this.load.image('star', 'https://labs.phaser.io/assets/sprites/star.png'); | |
| this.load.spritesheet('dude', 'https://labs.phaser.io/assets/sprites/dude.png', { | |
| frameWidth: 32, frameHeight: 48 | |
| }); | |
| } | |
| function create() { | |
| // Add background | |
| this.add.image(400, 300, 'sky').setDisplaySize(config.width, config.height); | |
| // Platforms | |
| const platforms = this.physics.add.staticGroup(); | |
| // Ground | |
| platforms.create(400, 568, 'ground').setScale(2).refreshBody(); | |
| // Additional platforms | |
| platforms.create(600, 400, 'ground'); | |
| platforms.create(50, 250, 'ground'); | |
| platforms.create(750, 220, 'ground'); | |
| // Player | |
| const player = this.physics.add.sprite(100, 450, 'dude'); | |
| player.setBounce(0.2); | |
| player.setCollideWorldBounds(true); | |
| // Animation | |
| this.anims.create({ | |
| key: 'left', | |
| frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }), | |
| frameRate: 10, | |
| repeat: -1 | |
| }); | |
| this.anims.create({ | |
| key: 'turn', | |
| frames: [ { key: 'dude', frame: 4 } ], | |
| frameRate: 20 | |
| }); | |
| this.anims.create({ | |
| key: 'right', | |
| frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }), | |
| frameRate: 10, | |
| repeat: -1 | |
| }); | |
| // Stars | |
| const stars = this.physics.add.group({ | |
| key: 'star', | |
| repeat: 11, | |
| setXY: { x: 12, y: 0, stepX: 70 } | |
| }); | |
| stars.children.iterate(function (child) { | |
| child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8)); | |
| }); | |
| // Physics | |
| this.physics.add.collider(player, platforms); | |
| this.physics.add.collider(stars, platforms); | |
| this.physics.add.overlap(player, stars, collectStar, null, this); | |
| // Input | |
| this.cursors = this.input.keyboard.createCursorKeys(); | |
| // Score | |
| this.score = 0; | |
| this.scoreText = this.add.text(16, 16, 'Score: 0', { | |
| fontSize: '32px', | |
| fill: '#fff', | |
| fontFamily: 'Arial' | |
| }); | |
| function collectStar(player, star) { | |
| star.disableBody(true, true); | |
| this.score += 10; | |
| this.scoreText.setText('Score: ' + this.score); | |
| // Play sound if enabled | |
| if (isSoundOn) { | |
| const synth = new Tone.Synth().toDestination(); | |
| synth.triggerAttackRelease("C5", "8n"); | |
| } | |
| } | |
| } | |
| function update() { | |
| const cursors = this.cursors; | |
| const player = this.physics.world.bodies.entries[0].gameObject; | |
| if (cursors.left.isDown) { | |
| player.setVelocityX(-160); | |
| player.anims.play('left', true); | |
| } else if (cursors.right.isDown) { | |
| player.setVelocityX(160); | |
| player.anims.play('right', true); | |
| } else { | |
| player.setVelocityX(0); | |
| player.anims.play('turn'); | |
| } | |
| if (cursors.up.isDown && player.body.touching.down) { | |
| player.setVelocityY(-330); | |
| } | |
| } | |
| } | |
| // Create a rhythm game | |
| function createRhythmGame(gameData) { | |
| // Clear container | |
| gameContainer.innerHTML = ''; | |
| // Create note targets | |
| const notes = ['C', 'D', 'E', 'F', 'G']; | |
| const colors = ['#FF5252', '#FFD740', '#69F0AE', '#40C4FF', '#E040FB']; | |
| notes.forEach((note, i) => { | |
| const noteEl = document.createElement('div'); | |
| noteEl.className = 'w-16 h-16 rounded-full flex items-center justify-center text-white font-bold cursor-pointer transition-transform hover:scale-110'; | |
| noteEl.style.backgroundColor = colors[i]; | |
| noteEl.style.position = 'absolute'; | |
| noteEl.style.left = `${(i + 1) * 15}%`; | |
| noteEl.style.top = '50%'; | |
| noteEl.style.transform = 'translate(-50%, -50%)'; | |
| noteEl.textContent = note; | |
| noteEl.dataset.note = `${note}4`; | |
| noteEl.addEventListener('click', () => { | |
| if (isSoundOn) { | |
| const synth = new Tone.Synth().toDestination(); | |
| synth.triggerAttackRelease(noteEl.dataset.note, "8n"); | |
| } | |
| noteEl.style.transform = 'translate(-50%, -50%) scale(1.2)'; | |
| setTimeout(() => { | |
| noteEl.style.transform = 'translate(-50%, -50%) scale(1)'; | |
| }, 200); | |
| }); | |
| gameContainer.appendChild(noteEl); | |
| }); | |
| // Add visualizer | |
| const visualizer = document.createElement('div'); | |
| visualizer.className = 'w-full h-2 bg-white/20 rounded-full absolute bottom-8 left-0'; | |
| visualizer.style.overflow = 'hidden'; | |
| const progress = document.createElement('div'); | |
| progress.className = 'h-full bg-purple-500 rounded-full'; | |
| progress.style.width = '0%'; | |
| progress.style.transition = 'width 0.1s linear'; | |
| visualizer.appendChild(progress); | |
| gameContainer.appendChild(visualizer); | |
| // Start music if sound is on | |
| if (isSoundOn) { | |
| const synth = new Tone.Synth().toDestination(); | |
| const notes = ['C4', 'D4', 'E4', 'F4', 'G4']; | |
| let currentNote = 0; | |
| Tone.Transport.bpm.value = 120; | |
| Tone.Transport.scheduleRepeat(time => { | |
| synth.triggerAttackRelease(notes[currentNote], "8n", time); | |
| currentNote = (currentNote + 1) % notes.length; | |
| // Update visualizer | |
| progress.style.width = `${(currentNote / notes.length) * 100}%`; | |
| }, "8n"); | |
| Tone.Transport.start(); | |
| } | |
| currentGame = { | |
| cleanup: () => { | |
| Tone.Transport.cancel(); | |
| Tone.Transport.stop(); | |
| } | |
| }; | |
| } | |
| // Create a puzzle game | |
| function createPuzzleGame(gameData) { | |
| // Clear container | |
| gameContainer.innerHTML = ''; | |
| // Create puzzle board | |
| const boardSize = 4; | |
| const pieceSize = gameContainer.clientWidth / boardSize - 10; | |
| // Create pieces | |
| for (let i = 0; i < boardSize * boardSize; i++) { | |
| const piece = document.createElement('div'); | |
| piece.className = 'absolute bg-white/20 border border-white/30 rounded-lg cursor-pointer transition-all hover:bg-white/30'; | |
| piece.style.width = `${pieceSize}px`; | |
| piece.style.height = `${pieceSize}px`; | |
| piece.style.left = `${(i % boardSize) * (pieceSize + 10)}px`; | |
| piece.style.top = `${Math.floor(i / boardSize) * (pieceSize + 10)}px`; | |
| // Random color | |
| const hue = Math.floor(Math.random() * 360); | |
| piece.style.backgroundColor = `hsla(${hue}, 80%, 60%, 0.7)`; | |
| piece.addEventListener('click', () => { | |
| piece.style.transform = 'scale(0.95) rotate(5deg)'; | |
| setTimeout(() => { | |
| piece.style.transform = ''; | |
| }, 200); | |
| if (isSoundOn) { | |
| const note = ['C4', 'E4', 'G4', 'C5'][Math.floor(Math.random() * 4)]; | |
| const synth = new Tone.Synth().toDestination(); | |
| synth.triggerAttackRelease(note, "8n"); | |
| } | |
| }); | |
| gameContainer.appendChild(piece); | |
| } | |
| currentGame = { | |
| cleanup: () => { | |
| // No special cleanup needed | |
| } | |
| }; | |
| } | |
| // Update game controls based on game type | |
| function updateGameControls(gameType) { | |
| gameControls.innerHTML = ''; | |
| const controls = { | |
| platformer: [ | |
| { label: 'Left/Right', keys: '← →', desc: 'Move player' }, | |
| { label: 'Jump', keys: '↑', desc: 'Jump' } | |
| ], | |
| rhythm: [ | |
| { label: 'Tap', keys: 'Click', desc: 'Hit notes' } | |
| ], | |
| puzzle: [ | |
| { label: 'Select', keys: 'Click', desc: 'Select pieces' } | |
| ], | |
| default: [ | |
| { label: 'No controls', desc: 'This game type has no interactive controls' } | |
| ] | |
| }; | |
| const currentControls = controls[gameType] || controls.default; | |
| currentControls.forEach(control => { | |
| const controlEl = document.createElement('div'); | |
| controlEl.className = 'bg-white/10 rounded-lg px-4 py-2 flex items-center'; | |
| const keysEl = document.createElement('div'); | |
| keysEl.className = 'bg-purple-600 rounded px-2 py-1 mr-3 font-mono text-sm'; | |
| keysEl.textContent = control.keys || ''; | |
| const textEl = document.createElement('div'); | |
| textEl.className = 'text-sm'; | |
| textEl.innerHTML = `<span class="font-semibold">${control.label}</span>: ${control.desc}`; | |
| if (control.keys) { | |
| controlEl.appendChild(keysEl); | |
| } | |
| controlEl.appendChild(textEl); | |
| gameControls.appendChild(controlEl); | |
| }); | |
| } | |
| // Toggle fullscreen mode | |
| function toggleFullscreen() { | |
| if (!document.fullscreenElement) { | |
| gameContainer.requestFullscreen().catch(err => { | |
| console.error('Error attempting to enable fullscreen:', err); | |
| }); | |
| } else { | |
| document.exitFullscreen(); | |
| } | |
| } | |
| // Toggle sound on/off | |
| function toggleSound() { | |
| isSoundOn = !isSoundOn; | |
| soundToggle.innerHTML = isSoundOn ? '<i class="fas fa-volume-up"></i>' : '<i class="fas fa-volume-mute"></i>'; | |
| if (isSoundOn && currentGame && selectedScaffold?.id === 'rhythm') { | |
| // Restart music if it's a rhythm game | |
| createGame({ scaffold: 'rhythm' }); | |
| } | |
| } | |
| // Show alert message | |
| function showAlert(message, type) { | |
| const alert = document.createElement('div'); | |
| alert.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 transition-all ${ | |
| type === 'error' ? 'bg-red-500' : 'bg-green-500' | |
| }`; | |
| alert.textContent = message; | |
| document.body.appendChild(alert); | |
| setTimeout(() => { | |
| alert.style.opacity = '0'; | |
| setTimeout(() => { | |
| alert.remove(); | |
| }, 300); | |
| }, 3000); | |
| } | |
| // Helper functions for mock data generation | |
| function generatePlatforms(count) { | |
| return Array.from({ length: count }, (_, i) => ({ | |
| x: Math.floor(Math.random() * 700) + 50, | |
| y: Math.floor(Math.random() * 400) + 100, | |
| width: Math.floor(Math.random() * 200) + 50 | |
| })); | |
| } | |
| function generateEnemies(count) { | |
| return Array.from({ length: count }, (_, i) => ({ | |
| type: ['dog', 'ghost', 'spider'][Math.floor(Math.random() * 3)], | |
| x: Math.floor(Math.random() * 700) + 50, | |
| speed: Math.floor(Math.random() * 100) + 50, | |
| patrol: Math.random() > 0.5 ? 'left-right' : 'up-down' | |
| })); | |
| } | |
| function generateCollectibles(count) { | |
| return Array.from({ length: count }, (_, i) => ({ | |
| type: ['coin', 'gem', 'star'][Math.floor(Math.random() * 3)], | |
| x: Math.floor(Math.random() * 700) + 50, | |
| y: Math.floor(Math.random() * 500) + 50, | |
| value: Math.floor(Math.random() * 5) + 1 | |
| })); | |
| } | |
| function generateNotes(count) { | |
| return Array.from({ length: count }, (_, i) => ({ | |
| time: i * 0.5, | |
| note: ['C', 'D', 'E', 'F', 'G'][Math.floor(Math.random() * 5)], | |
| duration: 0.25 | |
| })); | |
| } | |
| function generatePuzzlePieces(count) { | |
| return Array.from({ length: count }, (_, i) => ({ | |
| type: i, | |
| color: `hsl(${Math.floor(Math.random() * 360)}, 80%, 60%)`, | |
| shape: ['circle', 'square', 'triangle'][Math.floor(Math.random() * 3)] | |
| })); | |
| } | |
| function generateSpaceEnemies(count) { | |
| return Array.from({ length: count }, (_, i) => ({ | |
| type: ['alien', 'asteroid', 'ufo'][Math.floor(Math.random() * 3)], | |
| health: Math.floor(Math.random() * 3) + 1, | |
| speed: Math.floor(Math.random() * 150) + 50, | |
| pattern: ['straight', 'zigzag', 'circle'][Math.floor(Math.random() * 3)] | |
| })); | |
| } | |
| function generatePowerups(count) { | |
| return Array.from({ length: count }, (_, i) => ({ | |
| type: ['shield', 'speed', 'multishot'][Math.floor(Math.random() * 3)], | |
| duration: Math.floor(Math.random() * 5) + 3 | |
| })); | |
| } | |
| function generateNPCs(count) { | |
| return Array.from({ length: count }, (_, i) => ({ | |
| name: ['Wizard', 'Merchant', 'Guard'][Math.floor(Math.random() * 3)], | |
| dialogue: [ | |
| 'Hello adventurer!', | |
| 'Have you seen my lost treasure?', | |
| 'Beware of the dragon!' | |
| ][Math.floor(Math.random() * 3)], | |
| quest: Math.random() > 0.5 | |
| })); | |
| } | |
| function generateAdventureItems(count) { | |
| return Array.from({ length: count }, (_, i) => ({ | |
| name: ['Sword', 'Potion', 'Key', 'Map'][Math.floor(Math.random() * 4)], | |
| description: [ | |
| 'A sharp blade for combat', | |
| 'Restores health when consumed', | |
| 'Opens locked doors', | |
| 'Shows hidden locations' | |
| ][Math.floor(Math.random() * 4)] | |
| })); | |
| } | |
| function generateTrack() { | |
| return { | |
| length: Math.floor(Math.random() * 5) + 3, | |
| turns: ['sharp', 'wide', 's-curve'][Math.floor(Math.random() * 3)], | |
| obstacles: Math.floor(Math.random() * 10) | |
| }; | |
| } | |
| // Update UI based on current state | |
| function updateUI() { | |
| // Update generate button state | |
| generateBtn.disabled = !gamePrompt.value.trim() || !selectedScaffold; | |
| } | |
| // Initialize the app when DOM is loaded | |
| document.addEventListener('DOMContentLoaded', init); | |
| // Update UI when prompt changes | |
| gamePrompt.addEventListener('input', updateUI); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=pysolver33/awesome-games" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |