simonw/space_invaders.txt Secret

## space_invaders.txt
% uv run --with 'https://github.com/ml-explore/mlx-lm/archive/refs/heads/main.zip' python
   Built mlx-lm @ https://github.com/ml-explore/mlx-lm/archive/refs/heads/main.zip
Installed 24 packages in 92ms
Python 3.13.0 (main, Oct 16 2024, 08:05:40) [Clang 18.1.8 ] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>> from mlx_lm import load, generate
>>> model, tokenizer = load("mlx-community/GLM-4.5-Air-3bit")
Fetching 17 files: 100%|█████████████████████| 17/17 [00:00<00:00, 14656.36it/s]
>>> messages = [{"role": "user", "content": "Write an HTML and JavaScript page implementing space invaders"}]
>>> prompt = tokenizer.apply_chat_template(
...     messages, add_generation_prompt=True
... )
>>>
>>> len(prompt)
14
>>> response = generate(model, tokenizer, prompt=prompt, verbose=True)
==========

<think>The user wants me to create a Space Invaders game using HTML, CSS, and JavaScript. I need to create a complete, functional game with the following features:

1. Player spaceship that can move left/right and shoot
2. Enemy invaders that move in formation and shoot back
3. Score tracking
4. Lives/health system
5. Game over conditions
6. Start/restart functionality
7. Modern, polished design

Key components:
- Canvas for the game area
- Player ship with movement controls (arrow keys or WASD)
- Shooting mechanism (spacebar)
- Enemy formation that moves side to side and down
- Enemy bullets
- Collision detection
- Score display
- Lives display
- Game over screen
- Start screen

I'll use a modern design with smooth animations, particle effects, and a retro-futuristic aesthetic.</think>

I'll create a fully functional Space Invaders game with a modern, polished design. This will include smooth animations, particle effects, and a complete game experience.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <
==========
Prompt: 14 tokens, 0.076 tokens-per-sec
Generation: 256 tokens, 30.585 tokens-per-sec
Peak memory: 46.894 GB
>>> help(generate)
huggingface/tokenizers: The current process just got forked, after parallelism has already been used. Disabling parallelism to avoid deadlocks...
To disable this warning, you can either:
	- Avoid using `tokenizers` before the fork if possible
	- Explicitly set the environment variable TOKENIZERS_PARALLELISM=(true | false)

>>>
>>> response = generate(model, tokenizer, prompt=prompt, verbose=True, max_tokens=8192)
==========

<think>The user wants me to create a Space Invaders game using HTML, CSS, and JavaScript. I need to create a complete, functional game with the following features:

1. Player spaceship that can move left/right and shoot
2. Enemy invaders that move in formation and shoot back
3. Score tracking
4. Lives/health system
5. Game over conditions
6. Start/restart functionality
7. Modern, polished design

Key components:
- Canvas for the game area
- Player ship with movement controls (arrow keys or WASD)
- Shooting mechanism (spacebar)
- Enemy formation that moves side to side and down
- Enemy bullets
- Collision detection
- Score display
- Lives display
- Game over screen
- Start screen

I'll use a modern design with smooth animations, particle effects, and a retro-futuristic aesthetic.</think>

I'll create a fully functional Space Invaders game with a modern, polished design. This will include smooth animations, particle effects, and a complete game experience.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Space Invaders</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: #0a0a0a;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden;
        }

        .game-container {
            position: relative;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 0 50px rgba(0, 255, 255, 0.3);
        }

        canvas {
            border: 2px solid #00ffff;
            border-radius: 10px;
            display: block;
            background: #000;
        }

        .ui-overlay {
            position: absolute;
            top: 30px;
            left: 30px;
            right: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            pointer-events: none;
            z-index: 10;
        }

        .score, .lives {
            font-size: 24px;
            font-weight: bold;
            text-shadow: 0 0 10px #00ffff;
        }

        .game-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: rgba(0, 0, 0, 0.9);
            border-radius: 10px;
            z-index: 20;
            transition: opacity 0.3s;
        }

        .game-screen.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .game-title {
            font-size: 48px;
            margin-bottom: 20px;
            text-shadow: 0 0 20px #00ffff;
            animation: glow 2s ease-in-out infinite;
        }

        @keyframes glow {
            0%, 100% { text-shadow: 0 0 20px #00ffff; }
            50% { text-shadow: 0 0 30px #00ffff, 0 0 40px #00ffff; }
        }

        .game-button {
            background: linear-gradient(135deg, #00ffff, #0080ff);
            border: none;
            color: #000;
            font-size: 20px;
            font-weight: bold;
            padding: 15px 40px;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 20px;
        }

        .game-button:hover {
            transform: scale(1.1);
            box-shadow: 0 0 30px #00ffff;
        }

        .controls {
            margin-top: 30px;
            text-align: center;
            font-size: 16px;
            opacity: 0.8;
        }

        .final-score {
            font-size: 32px;
            margin: 20px 0;
            color: #00ffff;
        }

        .stars {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }

        .star {
            position: absolute;
            width: 2px;
            height: 2px;
            background: white;
            border-radius: 50%;
            animation: twinkle 3s infinite;
        }

        @keyframes twinkle {
            0%, 100% { opacity: 0; }
            50% { opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="stars" id="stars"></div>

    <div class="game-container">
        <div class="ui-overlay">
            <div class="score">Score: <span id="scoreValue">0</span></div>
            <div class="lives">Lives: <span id="livesValue">3</span></div>
        </div>

        <canvas id="gameCanvas" width="800" height="600"></canvas>

        <div class="game-screen" id="startScreen">
            <h1 class="game-title">SPACE INVADERS</h1>
            <button class="game-button" onclick="startGame()">START GAME</button>
            <div class="controls">
                Use ← → or A/D to move<br>
                Press SPACE to shoot
            </div>
        </div>

        <div class="game-screen hidden" id="gameOverScreen">
            <h1 class="game-title">GAME OVER</h1>
            <div class="final-score">Final Score: <span id="finalScore">0</span></div>
            <button class="game-button" onclick="restartGame()">PLAY AGAIN</button>
        </div>
    </div>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        // Create background stars
        function createStars() {
            const starsContainer = document.getElementById('stars');
            for (let i = 0; i < 100; i++) {
                const star = document.createElement('div');
                star.className = 'star';
                star.style.left = Math.random() * 100 + '%';
                star.style.top = Math.random() * 100 + '%';
                star.style.animationDelay = Math.random() * 3 + 's';
                starsContainer.appendChild(star);
            }
        }
        createStars();

        // Game variables
        let gameRunning = false;
        let score = 0;
        let lives = 3;
        let animationId;

        // Player
        const player = {
            x: canvas.width / 2 - 25,
            y: canvas.height - 60,
            width: 50,
            height: 30,
            speed: 5,
            canShoot: true,
            shootCooldown: 0
        };

        // Arrays for game objects
        let bullets = [];
        let enemyBullets = [];
        let enemies = [];
        let particles = [];

        // Enemy setup
        const enemyRows = 5;
        const enemyCols = 10;
        const enemyWidth = 40;
        const enemyHeight = 30;
        let enemyDirection = 1;
        let enemyDropDistance = 40;

        // Input handling
        const keys = {};
        document.addEventListener('keydown', (e) => {
            keys[e.key] = true;
            if (e.key === ' ') {
                e.preventDefault();
                shoot();
            }
        });

        document.addEventListener('keyup', (e) => {
            keys[e.key] = false;
        });

        // Initialize enemies
        function createEnemies() {
            enemies = [];
            for (let row = 0; row < enemyRows; row++) {
                for (let col = 0; col < enemyCols; col++) {
                    enemies.push({
                        x: col * (enemyWidth + 10) + 80,
                        y: row * (enemyHeight + 10) + 50,
                        width: enemyWidth,
                        height: enemyHeight,
                        type: row < 2 ? 'small' : row < 4 ? 'medium' : 'large',
                        alive: true
                    });
                }
            }
        }

        // Shooting mechanics
        function shoot() {
            if (player.canShoot && gameRunning) {
                bullets.push({
                    x: player.x + player.width / 2 - 2.5,
                    y: player.y,
                    width: 5,
                    height: 10,
                    speed: 7
                });
                player.canShoot = false;
                player.shootCooldown = 15;
            }
        }

        // Enemy shooting
        function enemyShoot() {
            if (enemies.length > 0 && Math.random() < 0.02) {
                const shooter = enemies[Math.floor(Math.random() * enemies.length)];
                if (shooter.alive) {
                    enemyBullets.push({
                        x: shooter.x + shooter.width / 2 - 2.5,
                        y: shooter.y + shooter.height,
                        width: 5,
                        height: 10,
                        speed: 3
                    });
                }
            }
        }

        // Create particle effect
        function createParticles(x, y, color, count = 10) {
            for (let i = 0; i < count; i++) {
                particles.push({
                    x: x,
                    y: y,
                    vx: (Math.random() - 0.5) * 5,
                    vy: (Math.random() - 0.5) * 5,
                    life: 30,
                    color: color
                });
            }
        }

        // Update particles
        function updateParticles() {
            for (let i = particles.length - 1; i >= 0; i--) {
                const p = particles[i];
                p.x += p.vx;
                p.y += p.vy;
                p.life--;
                if (p.life <= 0) {
                    particles.splice(i, 1);
                }
            }
        }

        // Draw functions
        function drawPlayer() {
            ctx.fillStyle = '#00ffff';
            ctx.beginPath();
            ctx.moveTo(player.x + player.width / 2, player.y);
            ctx.lineTo(player.x, player.y + player.height);
            ctx.lineTo(player.x + player.width, player.y + player.height);
            ctx.closePath();
            ctx.fill();

            // Cockpit
            ctx.fillStyle = '#ffffff';
            ctx.beginPath();
            ctx.arc(player.x + player.width / 2, player.y + 15, 5, 0, Math.PI * 2);
            ctx.fill();
        }

        function drawEnemies() {
            enemies.forEach(enemy => {
                if (enemy.alive) {
                    const color = enemy.type === 'small' ? '#ff0066' :
                                 enemy.type === 'medium' ? '#ff9900' : '#00ff00';
                    ctx.fillStyle = color;

                    // Draw enemy shape
                    ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
                    ctx.fillStyle = '#000';
                    ctx.fillRect(enemy.x + 5, enemy.y + 5, enemy.width - 10, enemy.height - 10);
                }
            });
        }

        function drawBullets() {
            ctx.fillStyle = '#00ff00';
            bullets.forEach(bullet => {
                ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
            });

            ctx.fillStyle = '#ff0066';
            enemyBullets.forEach(bullet => {
                ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
            });
        }

        function drawParticles() {
            particles.forEach(p => {
                ctx.fillStyle = p.color + Math.floor(p.life / 3).toString(16).padStart(2, '0');
                ctx.fillRect(p.x, p.y, 2, 2);
            });
        }

        // Collision detection
        function checkCollisions() {
            // Bullet vs Enemy
            for (let i = bullets.length - 1; i >= 0; i--) {
                for (let j = enemies.length - 1; j >= 0; j--) {
                    if (enemies[j].alive &&
                        bullets[i].x < enemies[j].x + enemies[j].width &&
                        bullets[i].x + bullets[i].width > enemies[j].x &&
                        bullets[i].y < enemies[j].y + enemies[j].height &&
                        bullets[i].y + bullets[i].height > enemies[j].y) {

                        // Hit!
                        enemies[j].alive = false;
                        bullets.splice(i, 1);
                        score += enemies[j].type === 'small' ? 30 : enemies[j].type === 'medium' ? 20 : 10;
                        document.getElementById('scoreValue').textContent = score;
                        createParticles(enemies[j].x + enemies[j].width / 2,
                                       enemies[j].y + enemies[j].height / 2,
                                       '#00ff00', 15);
                        break;
                    }
                }
            }

            // Enemy Bullet vs Player
            for (let i = enemyBullets.length - 1; i >= 0; i--) {
                if (enemyBullets[i].x < player.x + player.width &&
                    enemyBullets[i].x + enemyBullets[i].width > player.x &&
                    enemyBullets[i].y < player.y + player.height &&
                    enemyBullets[i].y + enemyBullets[i].height > player.y) {

                    // Player hit!
                    enemyBullets.splice(i, 1);
                    lives--;
                    document.getElementById('livesValue').textContent = lives;
                    createParticles(player.x + player.width / 2,
                                   player.y + player.height / 2,
                                   '#ff0066', 20);

                    if (lives <= 0) {
                        gameOver();
                    }
                }
            }
        }

        // Update game state
        function update() {
            if (!gameRunning) return;

            // Move player
            if ((keys['ArrowLeft'] || keys['a'] || keys['A']) && player.x > 0) {
                player.x -= player.speed;
            }
            if ((keys['ArrowRight'] || keys['d'] || keys['D']) && player.x < canvas.width - player.width) {
                player.x += player.speed;
            }

            // Update shoot cooldown
            if (player.shootCooldown > 0) {
                player.shootCooldown--;
                if (player.shootCooldown === 0) {
                    player.canShoot = true;
                }
            }

            // Update bullets
            for (let i = bullets.length - 1; i >= 0; i--) {
                bullets[i].y -= bullets[i].speed;
                if (bullets[i].y < 0) {
                    bullets.splice(i, 1);
                }
            }

            for (let i = enemyBullets.length - 1; i >= 0; i--) {
                enemyBullets[i].y += enemyBullets[i].speed;
                if (enemyBullets[i].y > canvas.height) {
                    enemyBullets.splice(i, 1);
                }
            }

            // Move enemies
            let shouldDrop = false;
            for (let enemy of enemies) {
                if (enemy.alive) {
                    if (enemy.x <= 0 || enemy.x + enemy.width >= canvas.width) {
                        shouldDrop = true;
                    }
                }
            }

            if (shouldDrop) {
                enemyDirection *= -1;
                enemies.forEach(enemy => {
                    if (enemy.alive) {
                        enemy.y += enemyDropDistance;
                    }
                });
            }

            enemies.forEach(enemy => {
                if (enemy.alive) {
                    enemy.x += enemyDirection * 0.5;
                }
            });

            // Enemy shooting
            enemyShoot();

            // Check collisions
            checkCollisions();

            // Update particles
            updateParticles();

            // Check win condition
            if (enemies.filter(e => e.alive).length === 0) {
                createEnemies();
                enemyDropDistance += 5; // Increase difficulty
            }

            // Check lose condition
            if (enemies.some(e => e.alive && e.y + e.height >= player.y)) {
                gameOver();
            }
        }

        // Render game
        function render() {
            // Clear canvas
            ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Draw game objects
            drawPlayer();
            drawEnemies();
            drawBullets();
            drawParticles();
        }

        // Game loop
        function gameLoop() {
            update();
            render();
            animationId = requestAnimationFrame(gameLoop);
        }

        // Start game
        function startGame() {
            document.getElementById('startScreen').classList.add('hidden');
            gameRunning = true;
            score = 0;
            lives = 3;
            document.getElementById('scoreValue').textContent = score;
            document.getElementById('livesValue').textContent = lives;
            createEnemies();
            gameLoop();
        }

        // Game over
        function gameOver() {
            gameRunning = false;
            cancelAnimationFrame(animationId);
            document.getElementById('finalScore').textContent = score;
            document.getElementById('gameOverScreen').classList.remove('hidden');
        }

        // Restart game
        function restartGame() {
            document.getElementById('gameOverScreen').classList.add('hidden');
            bullets = [];
            enemyBullets = [];
            particles = [];
            player.x = canvas.width / 2 - 25;
            player.canShoot = true;
            player.shootCooldown = 0;
            enemyDirection = 1;
            enemyDropDistance = 40;
            startGame();
        }
    </script>
</body>
</html>
```

This Space Invaders game features:

**Core Gameplay:**
- Player spaceship that moves left/right with arrow keys or A/D
- Shooting mechanism with spacebar
- Enemy formation that moves side to side and drops down
- Enemy AI that shoots back at the player
- Collision detection for all projectiles
- Score tracking and lives system

**Visual Features:**
- Modern, neon-themed design with glowing effects
- Smooth animations and transitions
- Particle effects for explosions and hits
- Animated background stars
- Different enemy types with different colors and point values
- Trail effect on the canvas for a retro feel

**Game Mechanics:**
- Progressive difficulty (enemies drop faster each wave)
- Win condition: destroy all enemies
- Lose condition: enemies reach the bottom or player runs out of lives
- Start screen and game over screen with restart functionality
- Responsive controls with proper input handling

The game is fully playable and includes all the classic Space Invaders elements with a modern, polished presentation.
==========
Prompt: 14 tokens, 14.095 tokens-per-sec
Generation: 4193 tokens, 25.564 tokens-per-sec
Peak memory: 47.687 GB
	% uv run --with 'https://github.com/ml-explore/mlx-lm/archive/refs/heads/main.zip' python
	Built mlx-lm @ https://github.com/ml-explore/mlx-lm/archive/refs/heads/main.zip
	Installed 24 packages in 92ms
	Python 3.13.0 (main, Oct 16 2024, 08:05:40) [Clang 18.1.8 ] on darwin
	Type "help", "copyright", "credits" or "license" for more information.
	>>> from mlx_lm import load, generate
	>>> model, tokenizer = load("mlx-community/GLM-4.5-Air-3bit")
	Fetching 17 files: 100%\|█████████████████████\| 17/17 [00:00<00:00, 14656.36it/s]
	>>> messages = [{"role": "user", "content": "Write an HTML and JavaScript page implementing space invaders"}]
	>>> prompt = tokenizer.apply_chat_template(
	... messages, add_generation_prompt=True
	... )
	>>>
	>>> len(prompt)
	14
	>>> response = generate(model, tokenizer, prompt=prompt, verbose=True)
	==========

	<think>The user wants me to create a Space Invaders game using HTML, CSS, and JavaScript. I need to create a complete, functional game with the following features:

	1. Player spaceship that can move left/right and shoot
	2. Enemy invaders that move in formation and shoot back
	3. Score tracking
	4. Lives/health system
	5. Game over conditions
	6. Start/restart functionality
	7. Modern, polished design

	Key components:
	- Canvas for the game area
	- Player ship with movement controls (arrow keys or WASD)
	- Shooting mechanism (spacebar)
	- Enemy formation that moves side to side and down
	- Enemy bullets
	- Collision detection
	- Score display
	- Lives display
	- Game over screen
	- Start screen

	I'll use a modern design with smooth animations, particle effects, and a retro-futuristic aesthetic.</think>

	I'll create a fully functional Space Invaders game with a modern, polished design. This will include smooth animations, particle effects, and a complete game experience.

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<
	==========
	Prompt: 14 tokens, 0.076 tokens-per-sec
	Generation: 256 tokens, 30.585 tokens-per-sec
	Peak memory: 46.894 GB
	>>> help(generate)
	huggingface/tokenizers: The current process just got forked, after parallelism has already been used. Disabling parallelism to avoid deadlocks...
	To disable this warning, you can either:
	- Avoid using `tokenizers` before the fork if possible
	- Explicitly set the environment variable TOKENIZERS_PARALLELISM=(true \| false)

	>>>
	>>> response = generate(model, tokenizer, prompt=prompt, verbose=True, max_tokens=8192)
	==========

	<think>The user wants me to create a Space Invaders game using HTML, CSS, and JavaScript. I need to create a complete, functional game with the following features:

	1. Player spaceship that can move left/right and shoot
	2. Enemy invaders that move in formation and shoot back
	3. Score tracking
	4. Lives/health system
	5. Game over conditions
	6. Start/restart functionality
	7. Modern, polished design

	Key components:
	- Canvas for the game area
	- Player ship with movement controls (arrow keys or WASD)
	- Shooting mechanism (spacebar)
	- Enemy formation that moves side to side and down
	- Enemy bullets
	- Collision detection
	- Score display
	- Lives display
	- Game over screen
	- Start screen

	I'll use a modern design with smooth animations, particle effects, and a retro-futuristic aesthetic.</think>

	I'll create a fully functional Space Invaders game with a modern, polished design. This will include smooth animations, particle effects, and a complete game experience.

	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Space Invaders</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: 'Arial', sans-serif;
	background: #0a0a0a;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	overflow: hidden;
	}

	.game-container {
	position: relative;
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
	border-radius: 20px;
	padding: 20px;
	box-shadow: 0 0 50px rgba(0, 255, 255, 0.3);
	}

	canvas {
	border: 2px solid #00ffff;
	border-radius: 10px;
	display: block;
	background: #000;
	}

	.ui-overlay {
	position: absolute;
	top: 30px;
	left: 30px;
	right: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	pointer-events: none;
	z-index: 10;
	}

	.score, .lives {
	font-size: 24px;
	font-weight: bold;
	text-shadow: 0 0 10px #00ffff;
	}

	.game-screen {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.9);
	border-radius: 10px;
	z-index: 20;
	transition: opacity 0.3s;
	}

	.game-screen.hidden {
	opacity: 0;
	pointer-events: none;
	}

	.game-title {
	font-size: 48px;
	margin-bottom: 20px;
	text-shadow: 0 0 20px #00ffff;
	animation: glow 2s ease-in-out infinite;
	}

	@keyframes glow {
	0%, 100% { text-shadow: 0 0 20px #00ffff; }
	50% { text-shadow: 0 0 30px #00ffff, 0 0 40px #00ffff; }
	}

	.game-button {
	background: linear-gradient(135deg, #00ffff, #0080ff);
	border: none;
	color: #000;
	font-size: 20px;
	font-weight: bold;
	padding: 15px 40px;
	border-radius: 30px;
	cursor: pointer;
	transition: all 0.3s;
	margin-top: 20px;
	}

	.game-button:hover {
	transform: scale(1.1);
	box-shadow: 0 0 30px #00ffff;
	}

	.controls {
	margin-top: 30px;
	text-align: center;
	font-size: 16px;
	opacity: 0.8;
	}

	.final-score {
	font-size: 32px;
	margin: 20px 0;
	color: #00ffff;
	}

	.stars {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: -1;
	}

	.star {
	position: absolute;
	width: 2px;
	height: 2px;
	background: white;
	border-radius: 50%;
	animation: twinkle 3s infinite;
	}

	@keyframes twinkle {
	0%, 100% { opacity: 0; }
	50% { opacity: 1; }
	}
	</style>
	</head>
	<body>
	<div class="stars" id="stars"></div>

	<div class="game-container">
	<div class="ui-overlay">
	<div class="score">Score: <span id="scoreValue">0</span></div>
	<div class="lives">Lives: <span id="livesValue">3</span></div>
	</div>

	<canvas id="gameCanvas" width="800" height="600"></canvas>

	<div class="game-screen" id="startScreen">
	<h1 class="game-title">SPACE INVADERS</h1>
	<button class="game-button" onclick="startGame()">START GAME</button>
	<div class="controls">
	Use ← → or A/D to move<br>
	Press SPACE to shoot
	</div>
	</div>

	<div class="game-screen hidden" id="gameOverScreen">
	<h1 class="game-title">GAME OVER</h1>
	<div class="final-score">Final Score: <span id="finalScore">0</span></div>
	<button class="game-button" onclick="restartGame()">PLAY AGAIN</button>
	</div>
	</div>

	<script>
	const canvas = document.getElementById('gameCanvas');
	const ctx = canvas.getContext('2d');

	// Create background stars
	function createStars() {
	const starsContainer = document.getElementById('stars');
	for (let i = 0; i < 100; i++) {
	const star = document.createElement('div');
	star.className = 'star';
	star.style.left = Math.random() * 100 + '%';
	star.style.top = Math.random() * 100 + '%';
	star.style.animationDelay = Math.random() * 3 + 's';
	starsContainer.appendChild(star);
	}
	}
	createStars();

	// Game variables
	let gameRunning = false;
	let score = 0;
	let lives = 3;
	let animationId;

	// Player
	const player = {
	x: canvas.width / 2 - 25,
	y: canvas.height - 60,
	width: 50,
	height: 30,
	speed: 5,
	canShoot: true,
	shootCooldown: 0
	};

	// Arrays for game objects
	let bullets = [];
	let enemyBullets = [];
	let enemies = [];
	let particles = [];

	// Enemy setup
	const enemyRows = 5;
	const enemyCols = 10;
	const enemyWidth = 40;
	const enemyHeight = 30;
	let enemyDirection = 1;
	let enemyDropDistance = 40;

	// Input handling
	const keys = {};
	document.addEventListener('keydown', (e) => {
	keys[e.key] = true;
	if (e.key === ' ') {
	e.preventDefault();
	shoot();
	}
	});

	document.addEventListener('keyup', (e) => {
	keys[e.key] = false;
	});

	// Initialize enemies
	function createEnemies() {
	enemies = [];
	for (let row = 0; row < enemyRows; row++) {
	for (let col = 0; col < enemyCols; col++) {
	enemies.push({
	x: col * (enemyWidth + 10) + 80,
	y: row * (enemyHeight + 10) + 50,
	width: enemyWidth,
	height: enemyHeight,
	type: row < 2 ? 'small' : row < 4 ? 'medium' : 'large',
	alive: true
	});
	}
	}
	}

	// Shooting mechanics
	function shoot() {
	if (player.canShoot && gameRunning) {
	bullets.push({
	x: player.x + player.width / 2 - 2.5,
	y: player.y,
	width: 5,
	height: 10,
	speed: 7
	});
	player.canShoot = false;
	player.shootCooldown = 15;
	}
	}

	// Enemy shooting
	function enemyShoot() {
	if (enemies.length > 0 && Math.random() < 0.02) {
	const shooter = enemies[Math.floor(Math.random() * enemies.length)];
	if (shooter.alive) {
	enemyBullets.push({
	x: shooter.x + shooter.width / 2 - 2.5,
	y: shooter.y + shooter.height,
	width: 5,
	height: 10,
	speed: 3
	});
	}
	}
	}

	// Create particle effect
	function createParticles(x, y, color, count = 10) {
	for (let i = 0; i < count; i++) {
	particles.push({
	x: x,
	y: y,
	vx: (Math.random() - 0.5) * 5,
	vy: (Math.random() - 0.5) * 5,
	life: 30,
	color: color
	});
	}
	}

	// Update particles
	function updateParticles() {
	for (let i = particles.length - 1; i >= 0; i--) {
	const p = particles[i];
	p.x += p.vx;
	p.y += p.vy;
	p.life--;
	if (p.life <= 0) {
	particles.splice(i, 1);
	}
	}
	}

	// Draw functions
	function drawPlayer() {
	ctx.fillStyle = '#00ffff';
	ctx.beginPath();
	ctx.moveTo(player.x + player.width / 2, player.y);
	ctx.lineTo(player.x, player.y + player.height);
	ctx.lineTo(player.x + player.width, player.y + player.height);
	ctx.closePath();
	ctx.fill();

	// Cockpit
	ctx.fillStyle = '#ffffff';
	ctx.beginPath();
	ctx.arc(player.x + player.width / 2, player.y + 15, 5, 0, Math.PI * 2);
	ctx.fill();
	}

	function drawEnemies() {
	enemies.forEach(enemy => {
	if (enemy.alive) {
	const color = enemy.type === 'small' ? '#ff0066' :
	enemy.type === 'medium' ? '#ff9900' : '#00ff00';
	ctx.fillStyle = color;

	// Draw enemy shape
	ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
	ctx.fillStyle = '#000';
	ctx.fillRect(enemy.x + 5, enemy.y + 5, enemy.width - 10, enemy.height - 10);
	}
	});
	}

	function drawBullets() {
	ctx.fillStyle = '#00ff00';
	bullets.forEach(bullet => {
	ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
	});

	ctx.fillStyle = '#ff0066';
	enemyBullets.forEach(bullet => {
	ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
	});
	}

	function drawParticles() {
	particles.forEach(p => {
	ctx.fillStyle = p.color + Math.floor(p.life / 3).toString(16).padStart(2, '0');
	ctx.fillRect(p.x, p.y, 2, 2);
	});
	}

	// Collision detection
	function checkCollisions() {
	// Bullet vs Enemy
	for (let i = bullets.length - 1; i >= 0; i--) {
	for (let j = enemies.length - 1; j >= 0; j--) {
	if (enemies[j].alive &&
	bullets[i].x < enemies[j].x + enemies[j].width &&
	bullets[i].x + bullets[i].width > enemies[j].x &&
	bullets[i].y < enemies[j].y + enemies[j].height &&
	bullets[i].y + bullets[i].height > enemies[j].y) {

	// Hit!
	enemies[j].alive = false;
	bullets.splice(i, 1);
	score += enemies[j].type === 'small' ? 30 : enemies[j].type === 'medium' ? 20 : 10;
	document.getElementById('scoreValue').textContent = score;
	createParticles(enemies[j].x + enemies[j].width / 2,
	enemies[j].y + enemies[j].height / 2,
	'#00ff00', 15);
	break;
	}
	}
	}

	// Enemy Bullet vs Player
	for (let i = enemyBullets.length - 1; i >= 0; i--) {
	if (enemyBullets[i].x < player.x + player.width &&
	enemyBullets[i].x + enemyBullets[i].width > player.x &&
	enemyBullets[i].y < player.y + player.height &&
	enemyBullets[i].y + enemyBullets[i].height > player.y) {

	// Player hit!
	enemyBullets.splice(i, 1);
	lives--;
	document.getElementById('livesValue').textContent = lives;
	createParticles(player.x + player.width / 2,
	player.y + player.height / 2,
	'#ff0066', 20);

	if (lives <= 0) {
	gameOver();
	}
	}
	}
	}

	// Update game state
	function update() {
	if (!gameRunning) return;

	// Move player
	if ((keys['ArrowLeft'] \|\| keys['a'] \|\| keys['A']) && player.x > 0) {
	player.x -= player.speed;
	}
	if ((keys['ArrowRight'] \|\| keys['d'] \|\| keys['D']) && player.x < canvas.width - player.width) {
	player.x += player.speed;
	}

	// Update shoot cooldown
	if (player.shootCooldown > 0) {
	player.shootCooldown--;
	if (player.shootCooldown === 0) {
	player.canShoot = true;
	}
	}

	// Update bullets
	for (let i = bullets.length - 1; i >= 0; i--) {
	bullets[i].y -= bullets[i].speed;
	if (bullets[i].y < 0) {
	bullets.splice(i, 1);
	}
	}

	for (let i = enemyBullets.length - 1; i >= 0; i--) {
	enemyBullets[i].y += enemyBullets[i].speed;
	if (enemyBullets[i].y > canvas.height) {
	enemyBullets.splice(i, 1);
	}
	}

	// Move enemies
	let shouldDrop = false;
	for (let enemy of enemies) {
	if (enemy.alive) {
	if (enemy.x <= 0 \|\| enemy.x + enemy.width >= canvas.width) {
	shouldDrop = true;
	}
	}
	}

	if (shouldDrop) {
	enemyDirection *= -1;
	enemies.forEach(enemy => {
	if (enemy.alive) {
	enemy.y += enemyDropDistance;
	}
	});
	}

	enemies.forEach(enemy => {
	if (enemy.alive) {
	enemy.x += enemyDirection * 0.5;
	}
	});

	// Enemy shooting
	enemyShoot();

	// Check collisions
	checkCollisions();

	// Update particles
	updateParticles();

	// Check win condition
	if (enemies.filter(e => e.alive).length === 0) {
	createEnemies();
	enemyDropDistance += 5; // Increase difficulty
	}

	// Check lose condition
	if (enemies.some(e => e.alive && e.y + e.height >= player.y)) {
	gameOver();
	}
	}

	// Render game
	function render() {
	// Clear canvas
	ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	// Draw game objects
	drawPlayer();
	drawEnemies();
	drawBullets();
	drawParticles();
	}

	// Game loop
	function gameLoop() {
	update();
	render();
	animationId = requestAnimationFrame(gameLoop);
	}

	// Start game
	function startGame() {
	document.getElementById('startScreen').classList.add('hidden');
	gameRunning = true;
	score = 0;
	lives = 3;
	document.getElementById('scoreValue').textContent = score;
	document.getElementById('livesValue').textContent = lives;
	createEnemies();
	gameLoop();
	}

	// Game over
	function gameOver() {
	gameRunning = false;
	cancelAnimationFrame(animationId);
	document.getElementById('finalScore').textContent = score;
	document.getElementById('gameOverScreen').classList.remove('hidden');
	}

	// Restart game
	function restartGame() {
	document.getElementById('gameOverScreen').classList.add('hidden');
	bullets = [];
	enemyBullets = [];
	particles = [];
	player.x = canvas.width / 2 - 25;
	player.canShoot = true;
	player.shootCooldown = 0;
	enemyDirection = 1;
	enemyDropDistance = 40;
	startGame();
	}
	</script>
	</body>
	</html>
	```

	This Space Invaders game features:

	Core Gameplay:
	- Player spaceship that moves left/right with arrow keys or A/D
	- Shooting mechanism with spacebar
	- Enemy formation that moves side to side and drops down
	- Enemy AI that shoots back at the player
	- Collision detection for all projectiles
	- Score tracking and lives system

	Visual Features:
	- Modern, neon-themed design with glowing effects
	- Smooth animations and transitions
	- Particle effects for explosions and hits
	- Animated background stars
	- Different enemy types with different colors and point values
	- Trail effect on the canvas for a retro feel

	Game Mechanics:
	- Progressive difficulty (enemies drop faster each wave)
	- Win condition: destroy all enemies
	- Lose condition: enemies reach the bottom or player runs out of lives
	- Start screen and game over screen with restart functionality
	- Responsive controls with proper input handling

	The game is fully playable and includes all the classic Space Invaders elements with a modern, polished presentation.
	==========
	Prompt: 14 tokens, 14.095 tokens-per-sec
	Generation: 4193 tokens, 25.564 tokens-per-sec
	Peak memory: 47.687 GB
No results found