8-Bit Alien Fighter

8-BIT ALIEN FIGHTER

Loading game assets...

8-BIT ALIEN FIGHTER

body { margin: 0; padding: 0; background: #000; overflow: hidden; font-family: 'Press Start 2P', cursive; color: #fff; } canvas { display: block; margin: 0 auto; background: #000; } #gameContainer { position: relative; width: 800px; height: 600px; margin: 0 auto; } #loadingScreen { position: absolute; width: 100%; height: 100%; background: #000; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; } #menuScreen { position: absolute; width: 100%; height: 100%; background: #000; display: none; flex-direction: column; justify-content: center; align-items: center; z-index: 5; } .menuButton { margin: 10px; padding: 15px 30px; background: #4CAF50; color: white; border: none; border-radius: 5px; font-family: 'Press Start 2P', cursive; cursor: pointer; transition: all 0.3s; } .menuButton:hover { background: #45a049; transform: scale(1.1); } .progressBar { width: 300px; height: 20px; background: #333; margin-top: 20px; border-radius: 10px; overflow: hidden; } .progressFill { height: 100%; background: #4CAF50; width: 0%; transition: width 0.3s; } // Main game module import { Game } from './core/game.js'; import { AssetLoader } from './core/assetLoader.js'; import { MenuSystem } from './ui/menuSystem.js'; // Initialize game systems const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const loadingScreen = document.getElementById('loadingScreen'); const menuScreen = document.getElementById('menuScreen'); const progressBar = document.getElementById('progressBar'); // Create game instance const game = new Game(canvas, ctx); const assetLoader = new AssetLoader(); const menuSystem = new MenuSystem(); // Load assets assetLoader.loadAssets((progress) => { progressBar.style.width = `${progress * 100}%`; if (progress === 1) { loadingScreen.style.display = 'none'; menuScreen.style.display = 'flex'; } }); // Setup menu buttons document.getElementById('startGame').addEventListener('click', () => { menuScreen.style.display = 'none'; game.start(); }); document.getElementById('customizePlayer').addEventListener('click', () => { menuSystem.showCustomizationMenu(); }); document.getElementById('aiMode').addEventListener('click', () => { menuSystem.showAIModeMenu(); }); document.getElementById('settings').addEventListener('click', () => { menuSystem.showSettingsMenu(); }); export class Game { constructor(canvas, ctx) { this.canvas = canvas; this.ctx = ctx; this.isRunning = false; this.lastTime = 0; this.accumulator = 0; this.timestep = 1000/60; // 60 FPS } start() { this.isRunning = true; requestAnimationFrame(this.gameLoop.bind(this)); } gameLoop(timestamp) { if (!this.isRunning) return; let deltaTime = timestamp - this.lastTime; this.lastTime = timestamp; // Prevent spiral of death if (deltaTime > 1000) deltaTime = this.timestep; this.accumulator += deltaTime; while (this.accumulator >= this.timestep) { this.update(this.timestep); this.accumulator -= this.timestep; } this.render(); requestAnimationFrame(this.gameLoop.bind(this)); } update(deltaTime) { // Game update logic } render() { // Clear canvas this.ctx.fillStyle = '#000'; this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); // Game rendering } } export class AssetLoader { constructor() { this.assets = { images: {}, sounds: {}, fonts: {} }; } loadAssets(onProgress) { const totalAssets = 10; // Example count let loadedAssets = 0; const updateProgress = () => { loadedAssets++; onProgress(loadedAssets / totalAssets); }; // Example asset loading setTimeout(updateProgress, 300); setTimeout(updateProgress, 600); setTimeout(updateProgress, 900); setTimeout(updateProgress, 1200); setTimeout(updateProgress, 1500); setTimeout(updateProgress, 1800); setTimeout(updateProgress, 2100); setTimeout(updateProgress, 2400); setTimeout(updateProgress, 2700); setTimeout(updateProgress, 3000); } } export class MenuSystem { showCustomizationMenu() { console.log('Showing customization menu'); // Implementation for player customization } showAIModeMenu() { console.log('Showing AI mode menu'); // Implementation for AI mode selection } showSettingsMenu() { console.log('Showing settings menu'); // Implementation for game settings } }