Okay, let's create a Space Invaders game with an Atari 8-bit feel, including a menu and game modes. We'll start with the HTML structure, CSS for basic styling, and JavaScript for the game logic, menu, and entities. Space Invaders - Atari Style

SPACE INVADERS

body { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; background-color: #111; color: #fff; font-family: 'Courier New', Courier, monospace; margin: 0; } h1 { color: #0f0; /* Green text like old monitors */ text-shadow: 0 0 5px #0f0; margin-bottom: 10px; } canvas { border: 2px solid #0f0; /* Green border */ background-color: #000; box-shadow: 0 0 10px #0f0; } // Game Dimensions export const CANVAS_WIDTH = 600; export const CANVAS_HEIGHT = 400; // Player Settings export const PLAYER_WIDTH = 30; export const PLAYER_HEIGHT = 15; export const PLAYER_SPEED = 5; export const PLAYER_COLOR = '#0f0'; // Green // Bullet Settings export const BULLET_WIDTH = 3; export const BULLET_HEIGHT = 10; export const PLAYER_BULLET_SPEED = 7; export const ALIEN_BULLET_SPEED = 4; export const PLAYER_BULLET_COLOR = '#fff'; // White export const ALIEN_BULLET_COLOR = '#f0f'; // Magenta // Alien Settings export const ALIEN_WIDTH = 25; export const ALIEN_HEIGHT = 20; export const ALIEN_ROWS = 5; export const ALIEN_COLS = 10; export const ALIEN_PADDING = 10; export const ALIEN_OFFSET_TOP = 30; export const ALIEN_OFFSET_LEFT = 30; export const ALIEN_COLORS = ['#ff0', '#f0f', '#0ff']; // Yellow, Magenta, Cyan export const ALIEN_MOVE_INTERVAL_START = 1000; // ms between moves export const ALIEN_MOVE_STEP_X = 10; export const ALIEN_MOVE_STEP_Y = 20; export const ALIEN_SHOOT_CHANCE = 0.002; // Chance per alien per frame // Game Settings export const LIVES_START = 3; export const GAME_FONT = '20px "Courier New", Courier, monospace'; export const MENU_FONT = '30px "Courier New", Courier, monospace'; export const TEXT_COLOR = '#fff'; export const SCORE_INCREMENT = 10; // Game States export const GAME_STATE = { MENU: 'MENU', PLAYING: 'PLAYING', GAME_OVER: 'GAME_OVER', LEVEL_TRANSITION: 'LEVEL_TRANSITION', }; // Game Modes (Difficulty) export const GAME_MODE = { EASY: { speedMultiplier: 0.8, shootChanceMultiplier: 0.8, name: 'EASY' }, NORMAL: { speedMultiplier: 1.0, shootChanceMultiplier: 1.0, name: 'NORMAL' }, HARD: { speedMultiplier: 1.3, shootChanceMultiplier: 1.2, name: 'HARD' }, }; // Utility function for drawing rectangles (basic shapes for 8-bit feel) export function drawRect(ctx, x, y, width, height, color) { ctx.fillStyle = color; ctx.fillRect(x, y, width, height); } // Utility function for drawing text export function drawText(ctx, text, x, y, color, font = '16px "Courier New"') { ctx.fillStyle = color; ctx.font = font; ctx.fillText(text, x, y); } // Collision detection between two rectangles export function checkCollision(rect1, rect2) { return ( rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y ); } export class InputHandler { constructor() { this.keys = new Set(); this.shootPressed = false; // Track if shoot key was just pressed window.addEventListener('keydown', (e) => { if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); // Prevent default browser behavior (scrolling) } this.keys.add(e.key); if (e.key === ' ') { this.shootPressed = true; } }); window.addEventListener('keyup', (e) => { this.keys.delete(e.key); if (e.key === ' ') { this.shootPressed = false; } }); } isKeyDown(key) { return this.keys.has(key); } // Check if shoot was pressed and consume the event consumeShoot() { if (this.shootPressed) { this.shootPressed = false; // Reset after consuming return true; } return false; } // Check for menu selection keys isKeyPressed(key) { const pressed = this.keys.has(key); if (pressed) { this.keys.delete(key); // Consume the key press for menu actions } return pressed; } } import { drawRect } from './utils.js'; import * as C from './constants.js'; import { Bullet } from './bullet.js'; export class Player { constructor(game) { this.game = game; this.width = C.PLAYER_WIDTH; this.height = C.PLAYER_HEIGHT; this.x = (C.CANVAS_WIDTH - this.width) / 2; this.y = C.CANVAS_HEIGHT - this.height - 10; this.speed = C.PLAYER_SPEED; this.color = C.PLAYER_COLOR; this.canShoot = true; this.shootCooldown = 500; // milliseconds this.shootTimer = 0; } update(input, deltaTime) { // Movement if (input.isKeyDown('ArrowLeft') && this.x > 0) { this.x -= this.speed; } if (input.isKeyDown('ArrowRight') && this.x < C.CANVAS_WIDTH - this.width) { this.x += this.speed; } // Shooting Cooldown if (!this.canShoot) { this.shootTimer += deltaTime; if (this.shootTimer >= this.shootCooldown) { this.canShoot = true; this.shootTimer = 0; } } // Shooting if (input.consumeShoot() && this.canShoot) { this.shoot(); this.canShoot = false; } } draw(ctx) { drawRect(ctx, this.x, this.y, this.width, this.height, this.color); // Add maybe a small rectangle on top for a "cannon" drawRect(ctx, this.x + this.width / 2 - 2, this.y - 5, 4, 5, this.color); } shoot() { const bulletX = this.x + this.width / 2 - C.BULLET_WIDTH / 2; const bulletY = this.y - C.BULLET_HEIGHT; this.game.addBullet(new Bullet(bulletX, bulletY, -C.PLAYER_BULLET_SPEED, C.PLAYER_BULLET_COLOR)); // Add sound effect here if implemented } reset() { this.x = (C.CANVAS_WIDTH - this.width) / 2; this.y = C.CANVAS_HEIGHT - this.height - 10; this.canShoot = true; this.shootTimer = 0; } getCollisionRect() { return { x: this.x, y: this.y, width: this.width, height: this.height }; } } import { drawRect } from './utils.js'; import * as C from './constants.js'; export class Bullet { constructor(x, y, speed, color) { this.x = x; this.y = y; this.width = C.BULLET_WIDTH; this.height = C.BULLET_HEIGHT; this.speed = speed; // Negative for player (up), positive for alien (down) this.color = color; this.markedForDeletion = false; } update() { this.y += this.speed; if (this.y < 0 || this.y > C.CANVAS_HEIGHT) { this.markedForDeletion = true; } } draw(ctx) { drawRect(ctx, this.x, this.y, this.width, this.height, this.color); } getCollisionRect() { return { x: this.x, y: this.y, width: this.width, height: this.height }; } } import { drawRect, checkCollision } from './utils.js'; import * as C from './constants.js'; import { Bullet } from './bullet.js'; class Alien { constructor(x, y, color) { this.x = x; this.y = y; this.width = C.ALIEN_WIDTH; this.height = C.ALIEN_HEIGHT; this.color = color; this.markedForDeletion = false; } draw(ctx) { // Simple rectangle alien drawRect(ctx, this.x, this.y, this.width, this.height, this.color); // Add some "pixel" details drawRect(ctx, this.x + 5, this.y + 5, 5, 5, '#000'); drawRect(ctx, this.x + this.width - 10, this.y + 5, 5, 5, '#000'); drawRect(ctx, this.x + this.width / 2 - 2.5, this.y + this.height - 5, 5, 5, '#000'); } getCollisionRect() { return { x: this.x, y: this.y, width: this.width, height: this.height }; } } export class AlienFleet { constructor(game) { this.game = game; this.aliens = []; this.direction = 1; // 1 for right, -1 for left this.moveTimer = 0; this.moveInterval = C.ALIEN_MOVE_INTERVAL_START / this.game.gameMode.speedMultiplier; this.speedMultiplier = this.game.gameMode.speedMultiplier; this.shootChanceMultiplier = this.game.gameMode.shootChanceMultiplier; this.createFleet(); } createFleet() { this.aliens = []; for (let r = 0; r < C.ALIEN_ROWS; r++) { for (let c = 0; c < C.ALIEN_COLS; c++) { const x = C.ALIEN_OFFSET_LEFT + c * (C.ALIEN_WIDTH + C.ALIEN_PADDING); const y = C.ALIEN_OFFSET_TOP + r * (C.ALIEN_HEIGHT + C.ALIEN_PADDING); const color = C.ALIEN_COLORS[r % C.ALIEN_COLORS.length]; this.aliens.push(new Alien(x, y, color)); } } } update(deltaTime) { this.moveTimer += deltaTime; if (this.moveTimer >= this.moveInterval) { this.moveTimer = 0; let moveDown = false; let fleetReachedEdge = false; // Check if any alien hit the edge for (const alien of this.aliens) { if ( (this.direction === 1 && alien.x + alien.width >= C.CANVAS_WIDTH) || (this.direction === -1 && alien.x <= 0) ) { fleetReachedEdge = true; break; } } // If edge reached, change direction and move down if (fleetReachedEdge) { this.direction *= -1; moveDown = true; // Increase speed slightly each time they drop this.moveInterval = Math.max(100, this.moveInterval * 0.95); } // Move all aliens for (const alien of this.aliens) { if (moveDown) { alien.y += C.ALIEN_MOVE_STEP_Y; // Check if aliens reached player level if (alien.y + alien.height >= this.game.player.y) { this.game.setGameOver(); return; // Stop further updates if game over } } else { alien.x += C.ALIEN_MOVE_STEP_X * this.direction; } } } // Alien Shooting this.aliens.forEach(alien => { if (Math.random() < C.ALIEN_SHOOT_CHANCE * this.shootChanceMultiplier) { // Find aliens in the same column below this one const aliensBelow = this.aliens.filter(a => !a.markedForDeletion && a !== alien && Math.abs(a.x - alien.x) < a.width / 2 && // Check if roughly in the same column a.y > alien.y ); // Only shoot if this alien is the lowest in its column (or one of the lowest) if (aliensBelow.length === 0) { this.shoot(alien); } } }); // Remove destroyed aliens this.aliens = this.aliens.filter(alien => !alien.markedForDeletion); // Check if all aliens are destroyed if (this.aliens.length === 0) { this.game.levelComplete(); } } draw(ctx) { this.aliens.forEach(alien => alien.draw(ctx)); } shoot(alien) { const bulletX = alien.x + alien.width / 2 - C.BULLET_WIDTH / 2; const bulletY = alien.y + alien.height; this.game.addBullet(new Bullet(bulletX, bulletY, C.ALIEN_BULLET_SPEED * this.speedMultiplier, C.ALIEN_BULLET_COLOR)); // Add sound effect here } checkCollisions(bullets) { let scoreToAdd = 0; bullets.forEach(bullet => { // Only check player bullets against aliens if (bullet.speed < 0 && !bullet.markedForDeletion) { this.aliens.forEach(alien => { if (!alien.markedForDeletion && checkCollision(bullet.getCollisionRect(), alien.getCollisionRect())) { alien.markedForDeletion = true; bullet.markedForDeletion = true; scoreToAdd += C.SCORE_INCREMENT; // Add explosion sound/effect here } }); } }); return scoreToAdd; } reset(gameMode) { this.direction = 1; this.moveTimer = 0; this.speedMultiplier = gameMode.speedMultiplier; this.shootChanceMultiplier = gameMode.shootChanceMultiplier; this.moveInterval = C.ALIEN_MOVE_INTERVAL_START / this.speedMultiplier; this.createFleet(); } } import { drawText, drawRect } from './utils.js'; import * as C from './constants.js'; export class Menu { constructor(game) { this.game = game; this.selectedModeIndex = 1; // Default to NORMAL this.modes = [C.GAME_MODE.EASY, C.GAME_MODE.NORMAL, C.GAME_MODE.HARD]; } update(input) { if (input.isKeyPressed('ArrowUp')) { this.selectedModeIndex = (this.selectedModeIndex - 1 + this.modes.length) % this.modes.length; } if (input.isKeyPressed('ArrowDown')) { this.selectedModeIndex = (this.selectedModeIndex + 1) % this.modes.length; } if (input.isKeyPressed('Enter') || input.isKeyPressed(' ')) { this.game.startGame(this.modes[this.selectedModeIndex]); } } draw(ctx) { // Clear screen drawRect(ctx, 0, 0, C.CANVAS_WIDTH, C.CANVAS_HEIGHT, '#000'); // Title drawText(ctx, 'SPACE INVADERS', C.CANVAS_WIDTH / 2 - 150, 80, C.PLAYER_COLOR, C.MENU_FONT); // Instructions drawText(ctx, 'CONTROLS:', C.CANVAS_WIDTH / 2 - 70, 150, C.TEXT_COLOR, C.GAME_FONT); drawText(ctx, 'Left/Right Arrows: Move', C.CANVAS_WIDTH / 2 - 130, 180, C.TEXT_COLOR, C.GAME_FONT); drawText(ctx, 'Spacebar: Shoot / Select', C.CANVAS_WIDTH / 2 - 140, 210, C.TEXT_COLOR, C.GAME_FONT); // Game Mode Selection drawText(ctx, 'SELECT DIFFICULTY:', C.CANVAS_WIDTH / 2 - 120, 260, C.TEXT_COLOR, C.GAME_FONT); this.modes.forEach((mode, index) => { const yPos = 290 + index * 30; const color = index === this.selectedModeIndex ? C.PLAYER_COLOR : C.TEXT_COLOR; const indicator = index === this.selectedModeIndex ? '> ' : ' '; drawText(ctx, indicator + mode.name, C.CANVAS_WIDTH / 2 - 50, yPos, color, C.GAME_FONT); }); drawText(ctx, 'Press SPACE to Start', C.CANVAS_WIDTH / 2 - 130, C.CANVAS_HEIGHT - 40, C.TEXT_COLOR, C.GAME_FONT); } } import { Player } from './player.js'; import { InputHandler } from './input.js'; import { AlienFleet } from './alien.js'; import { Menu } from './menu.js'; import { drawRect, drawText, checkCollision } from './utils.js'; import * as C from './constants.js'; class Game { constructor(canvas) { this.canvas = canvas; this.ctx = canvas.getContext('2d'); this.width = canvas.width; this.height = canvas.height; this.gameState = C.GAME_STATE.MENU; this.input = new InputHandler(); this.menu = new Menu(this); this.player = null; this.alienFleet = null; this.bullets = []; this.score = 0; this.lives = 0; this.level = 1; this.gameMode = C.GAME_MODE.NORMAL; // Default this.lastTime = 0; this.transitionTimer = 0; this.transitionDuration = 2000; // 2 seconds for level transition this.gameLoop = this.gameLoop.bind(this); } startGame(selectedMode) { this.gameMode = selectedMode; this.player = new Player(this); this.alienFleet = new AlienFleet(this); // Pass game instance this.bullets = []; this.score = 0; this.lives = C.LIVES_START; this.level = 1; this.gameState = C.GAME_STATE.PLAYING; this.lastTime = performance.now(); // Reset timer for smooth start requestAnimationFrame(this.gameLoop); } resetLevel() { this.player.reset(); this.alienFleet.reset(this.gameMode); // Reset fleet with current game mode this.bullets = []; // Clear bullets // Optionally increase difficulty slightly per level this.alienFleet.moveInterval *= 0.9; // Faster movement this.alienFleet.shootChanceMultiplier *= 1.05; // More frequent shooting } levelComplete() { this.level++; this.gameState = C.GAME_STATE.LEVEL_TRANSITION; this.transitionTimer = 0; // Add bonus points for completing level? } setGameOver() { this.gameState = C.GAME_STATE.GAME_OVER; this.transitionTimer = 0; // Use timer for displaying game over message } addBullet(bullet) { this.bullets.push(bullet); } update(deltaTime) { // Player Update this.player.update(this.input, deltaTime); // Alien Fleet Update this.alienFleet.update(deltaTime); // Bullets Update this.bullets.forEach(bullet => bullet.update()); // Collision Detection: Player Bullets vs Aliens const scoreGained = this.alienFleet.checkCollisions(this.bullets); this.score += scoreGained; // Collision Detection: Alien Bullets vs Player this.bullets.forEach(bullet => { // Check alien bullets (positive speed) against player if (bullet.speed > 0 && !bullet.markedForDeletion) { if (checkCollision(bullet.getCollisionRect(), this.player.getCollisionRect())) { bullet.markedForDeletion = true; this.playerHit(); } } }); // Remove marked bullets this.bullets = this.bullets.filter(bullet => !bullet.markedForDeletion); } playerHit() { this.lives--; // Add explosion/sound effect here if (this.lives <= 0) { this.setGameOver(); } else { // Brief invulnerability or reset position? For simplicity, just continue this.player.reset(); // Reset player position after hit } } draw() { // Clear canvas drawRect(this.ctx, 0, 0, this.width, this.height, '#000'); // Draw Game Elements this.player.draw(this.ctx); this.alienFleet.draw(this.ctx); this.bullets.forEach(bullet => bullet.draw(this.ctx)); // Draw UI (Score, Lives, Level) drawText(this.ctx, `SCORE: ${this.score}`, 10, 20, C.TEXT_COLOR, C.GAME_FONT); drawText(this.ctx, `LIVES: ${this.lives}`, this.width - 100, 20, C.TEXT_COLOR, C.GAME_FONT); drawText(this.ctx, `LEVEL: ${this.level}`, this.width / 2 - 50, 20, C.TEXT_COLOR, C.GAME_FONT); } drawGameOver() { drawRect(this.ctx, 0, 0, this.width, this.height, 'rgba(0, 0, 0, 0.7)'); // Darken screen drawText(this.ctx, 'GAME OVER', this.width / 2 - 100, this.height / 2 - 20, '#f00', C.MENU_FONT); // Red text drawText(this.ctx, `FINAL SCORE: ${this.score}`, this.width / 2 - 110, this.height / 2 + 20, C.TEXT_COLOR, C.GAME_FONT); drawText(this.ctx, 'Press ENTER to return to Menu', this.width / 2 - 190, this.height / 2 + 60, C.TEXT_COLOR, C.GAME_FONT); } drawLevelTransition(deltaTime) { this.transitionTimer += deltaTime; drawRect(this.ctx, 0, 0, this.width, this.height, '#000'); drawText(this.ctx, `LEVEL ${this.level} COMPLETE!`, this.width / 2 - 150, this.height / 2 - 20, C.PLAYER_COLOR, C.MENU_FONT); drawText(this.ctx, `SCORE: ${this.score}`, this.width / 2 - 70, this.height / 2 + 20, C.TEXT_COLOR, C.GAME_FONT); drawText(this.ctx, 'Get Ready!', this.width / 2 - 70, this.height / 2 + 60, C.TEXT_COLOR, C.GAME_FONT); if (this.transitionTimer >= this.transitionDuration) { this.resetLevel(); this.gameState = C.GAME_STATE.PLAYING; } } gameLoop(timestamp) { const deltaTime = timestamp - this.lastTime; this.lastTime = timestamp; // Clear canvas (important for menu/game over states too) this.ctx.clearRect(0, 0, this.width, this.height); switch (this.gameState) { case C.GAME_STATE.MENU: this.menu.update(this.input); this.menu.draw(this.ctx); break; case C.GAME_STATE.PLAYING: this.update(deltaTime); this.draw(); break; case C.GAME_STATE.LEVEL_TRANSITION: this.draw(); // Draw the last frame of the previous level underneath this.drawLevelTransition(deltaTime); break; case C.GAME_STATE.GAME_OVER: this.draw(); // Draw the final game state this.drawGameOver(); // Check for input to return to menu if (this.input.isKeyPressed('Enter')) { this.gameState = C.GAME_STATE.MENU; } break; } // Continue the loop unless we explicitly stopped (e.g., waiting on menu) if (this.gameState !== C.GAME_STATE.MENU || this.menu.needsRedraw) { // Keep looping if menu needs updates requestAnimationFrame(this.gameLoop); } // If we entered the menu from game over, ensure the loop restarts if (this.gameState === C.GAME_STATE.MENU && !this.menu.looping) { this.menu.looping = true; // Simple flag to ensure loop continues in menu requestAnimationFrame(this.gameLoop); } else if (this.gameState !== C.GAME_STATE.MENU) { this.menu.looping = false; // Reset flag when leaving menu } } run() { // Start the game loop from the menu state this.gameState = C.GAME_STATE.MENU; this.menu.looping = true; // Ensure menu starts looping requestAnimationFrame(this.gameLoop); } } // Initialize the game when the DOM is ready window.addEventListener('load', () => { const canvas = document.getElementById('gameCanvas'); if (canvas) { const game = new Game(canvas); game.run(); // Start the game } else { console.error('Canvas element not found!'); } }); This sets up the basic structure: 1. **HTML:** Creates the canvas element. 2. **CSS:** Styles the page and canvas for an old-school look. 3. **JavaScript:** * `constants.js`: Defines game parameters like sizes, speeds, colors, states, and modes. * `utils.js`: Helper functions for drawing shapes and text. * `input.js`: Handles keyboard input. * `player.js`: Defines the player object (drawing, movement, shooting). * `bullet.js`: Defines the bullet object. * `alien.js`: Defines the Alien class and the AlienFleet class to manage the grid, movement, and shooting. * `menu.js`: Handles drawing and logic for the main menu and difficulty selection. * `game.js`: The main game class that ties everything together, manages game states (Menu, Playing, Game Over, Level Transition), the game loop, drawing, updates, and collision detection. Now you can run this. Use the arrow keys to navigate the menu, Space/Enter to select a difficulty and start the game. In-game, use Left/Right arrows to move and Space to shoot.