oneshotlm
Compare all models on this prompt →

Top-down alien shooter · aion-3.0-mini

Using the pre-provided phaser.min.js (global Phaser), build a top-down alien shooter: move with WASD, aim and fire at waves of advancing aliens, with health, score, and increasing difficulty. Use ONLY procedurally generated graphics, no external image or audio assets.

⛨ sandboxed Open in new tab ↗
transcript · 6 messages
user

Using the pre-provided phaser.min.js (global Phaser), build a top-down alien shooter: move with WASD, aim and fire at waves of advancing aliens, with health, score, and increasing difficulty. Use ONLY procedurally generated graphics, no external image or audio assets.

assistant
thinking
I always do this final check: have I followed ALL instructions? I will now begin.

Let me first check if phaser.min.js exists in the current directory, and then build a complete top-down alien shooter game in a single index.html file.

Let me think about the game design:
- Phaser.js top-down alien shooter
- WASD movement
- Aim and fire (mouse aim, click to shoot)
- Waves of advancing aliens
- Health system
- Score system
- Increasing difficulty
- Procedurally generated graphics (no external assets)
- Single file: index.html

Let me plan the implementation:

1. **Scene setup**: A main game scene with a player ship, alien waves, bullets, etc.
2. **Player**: A triangle/ship shape drawn procedurally, moves with WASD, rotates to face mouse
3. **Aiming**: Player rotates toward mouse cursor
4. **Firing**: Click or spacebar to shoot bullets in the direction the player is facing
5. **Aliens**: Different types, spawn in waves, move toward the player
6. **Health**: Player has health bar, aliens damage on contact
7. **Score**: Points for killing aliens
8. **Difficulty**: More aliens, faster, tougher as waves progress
9. **Graphics**: All procedurally generated using Phaser's graphics API

Let me write the complete game.

Actually, let me first check if phaser.min.js exists.
→ bash {"command":"ls -la /tmp/ws/phaser.min.js 2>/dev/null && echo \"EXISTS\" || echo \"NOT FOUND\""}
toolResult

-rw-r--r--. 1 node node 1181917 Aug 1 19:40 /tmp/ws/phaser.min.js EXISTS

assistant
thinking
I'll now follow these steps.

Requirements:
1. Single-page web app in one file: index.html
2. CSS in <style>, JS in <script>, inline.
3. No external resources/CDNs/network requests.
4. Load phaser.min.js with <script src="phaser.min.js"></script> (already present).
5. Build a top-down alien shooter:
   - Move with WASD
   - Aim and fire (mouse click? probably mouse to aim, click to fire)
   - Waves of advancing aliens
   - Health, score, increasing difficulty
   - Procedurally generated graphics only (no external images/audio)
6. Write to /tmp/ws/index.html

Let me design the game:

Phaser 3 game with:
- Player ship (triangle or polygon) at bottom, moves WASD
- Mouse aiming - player rotates to face mouse, click to fire bullets
- Aliens spawn in waves from top, move downward
- Collision: bullets hit aliens, aliens hit player
- Health bar, score display
- Increasing difficulty: more aliens, faster, more health per wave

I'll use Phaser's built-in graphics (Graphics objects) for all visuals. No images, no audio.

Let me write the full index.html.

I need to think about Phaser 3 API:
- Create scene with create() and update()
- Use this.input.keyboard.createCursorKeys() plus WASD keys
- Use this.input.on('pointermove') for aiming, this.input.on('pointerdown') for firing
- Graphics: this.add.graphics() to draw shapes
- Use Phaser.GameObjects.Graphics to draw filled polygons, circles, etc.

Let me design the game structure:

Player:
- Position: center-bottom area
- Speed: 200
- Health: 100
- Graphics: triangle/arrow shape pointing up, drawn with Graphics
- Rotates to face mouse cursor

Bullets:
- Speed: 400
- Damage: 10
- Graphics: small circles or rectangles
- Pooled or created/destroyed

Aliens:
- Spawn in waves, rows from top
- Move downward at varying speeds
- Graphics: different colored shapes (circles, squares, etc.)
- Health: increases per wave
- Speed: increases per wave
- Damage on collision: 10

UI:
- Score text top-left
- Health bar top-left below score
- Wave number

Waves:
- Wave 1: 5 aliens, slow, 1 health
- Wave N: more aliens, faster, more health
- Brief delay between waves

Let me code this up.

I'll use Phaser.GameObjects.Graphics for drawing. For the player, I'll draw a triangle. For aliens, circles or squares. For bullets, small circles.

Let me think about the structure more carefully.

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Alien Shooter</title>
<style>
  body { margin: 0; background: #000; display: flex; justify-content: center; align-items: center; height: 100vh; }
</style>
</head>
<body>
<script src="phaser.min.js"></script>
<script>
// Game code
</script>
</body>
</html>
```

Now the Phaser config and game scene:

```javascript
const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  backgroundColor: '#0a0a2e',
  parent: document.body,
  physics: {
    default: 'arcade',
    arcade: {
      debug: false
    }
  },
  scene: {
    preload: preload,
    create: create,
    update: update
  }
};

const game = new Phaser.Game(config);

let player, bullets, aliens, cursors, wasd;
let score = 0, health = 100, wave = 0;
let scoreText, healthText, waveText, healthBar;
let fireRate = 300, lastFired = 0;
let aliensGroup, bulletGroup;
let waveActive = false;
let aliensRemaining = 0;
let playerGraphics, playerContainer;

function preload() {
  // Nothing to load
}

function create() {
  // ...
}

function update(time, delta) {
  // ...
}
```

Actually, let me think about how to draw the player with rotation using Graphics. In Phaser 3, a Graphics object can be added to a container, and the container can be rotated. Or I can use a Graphics object and draw relative to (0,0) then set its position and rotation.

Better approach: create a Graphics object, draw the ship shape centered at (0,0), then set the Graphics position to the player position and rotation to the angle.

For aliens, same approach - Graphics objects for each alien, positioned and moved.

For bullets, I can use Physics.Arcade.Sprites with a small texture generated via Graphics? Or just use Graphics objects with arcade physics bodies.

Actually, Phaser's arcade physics works with game objects that have physics bodies. Graphics objects can have physics bodies if added to the physics world. But it's easier to use sprites with generated textures.

Alternative: Use Phaser's built-in texture generation. I can create textures using Graphics and then generate a texture from it. Or use `this.add.graphics()` and add physics to it.

Let me use a simpler approach:
- Create textures in create() using a temporary Graphics object and generateTexture()
- Use sprites with those textures for player, aliens, bullets

This is cleaner for physics and collisions.

```javascript
// Create textures
const g = this.add.graphics();

// Player texture (triangle)
g.fillStyle(0x00ff88);
g.beginPath();
g.moveTo(20, 0);
g.lineTo(-15, -12);
g.lineTo(-15, 12);
g.closePath();
g.fillPath();
g.generateTexture('player', 40, 24);
g.clear();

// Bullet texture
g.fillStyle(0xffff00);
g.fillCircle(3, 3, 3);
g.generateTexture('bullet', 6, 6);
g.clear();

// Alien texture
g.fillStyle(0xff4444);
g.fillCircle(12, 12, 12);
g.generateTexture('alien', 24, 24);
g.clear();
```

Then use sprites. This is much simpler.

Let me write the full game now.

Actually, let me think about the aiming. The player rotates to face the mouse cursor. When clicking, a bullet fires in the direction the player is facing.

WASD movement: W=up, A=left, S=down, D=right.

Aliens spawn in waves from the top, move downward. When they reach the bottom, they wrap or are removed? Or they keep going? Let's have them move downward and if they go off screen they're removed and player takes damage.

Actually, let's make aliens move toward the player. That's more interesting. Each alien has a velocity toward the player's position, updated periodically.

Or simpler: aliens move straight down. As difficulty increases, they move faster and also some move diagonally.

Let me go with: aliens move downward. Simple.

Wave system:
- Each wave spawns a certain number of aliens
- Aliens spawn at random x positions along the top
- They move downward at a speed
- When all aliens are destroyed, next wave starts after a delay
- Wave number increases difficulty

Difficulty scaling:
- Base alien speed: 50 + wave * 10
- Number of aliens: 5 + wave * 3
- Alien health: 1 + Math.floor(wave / 3)
- Alien damage: 10

Player:
- Health: 100
- Speed: 200
- Bullet damage: 10
- Fire rate: 250ms

Let me code this up now.

I need to handle:
- Player movement with WASD
- Player rotation toward mouse
- Firing bullets on click
- Alien spawning in waves
- Alien movement (downward)
- Bullet-alien collision
- Alien-player collision
- Score tracking
- Health tracking
- Wave progression
- Game over state

Let me write the complete code:

```javascript
const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  backgroundColor: '#0a0a2e',
  physics: {
    default: 'arcade',
    arcade: {
      debug: false
    }
  },
  scene: {
    key: 'main',
    preload: preload,
    create: create,
    update: update
  }
};

const game = new Phaser.Game(config);

let player, bullets, aliens;
let cursors, wasd;
let score = 0, health = 100, wave = 0, maxHealth = 100;
let scoreText, healthText, waveText, healthBarBg, healthBarFill;
let fireRate = 250, lastFired = 0;
let waveInProgress = false, gameOver = false;
let alienSpeed = 50, aliensPerWave = 5, alienHealth = 1;
let playerSpeed = 200;

function preload() {
  // Generate textures
  const g = this.add.graphics();
  
  // Player ship (a sleek triangle)
  g.fillStyle(0x00ff88);
  g.beginPath();
  g.moveTo(20, 0);
  g.lineTo(-14, -10);
  g.lineTo(-14, 10);
  g.closePath();
  g.fillPath();
  // Cockpit detail
  g.fillStyle(0x00cc66);
  g.beginPath();
  g.moveTo(12, 0);
  g.lineTo(-6, -5);
  g.lineTo(-6, 5);
  g.closePath();
  g.fillPath();
  g.generateTexture('player', 40, 20);
  g.clear();
  
  // Bullet
  g.fillStyle(0xffff44);
  g.fillCircle(3, 3, 3);
  g.generateTexture('bullet', 6, 6);
  g.clear();
  
  // Alien type 1 (basic)
  g.fillStyle(0xff4444);
  g.fillCircle(12, 12, 12);
  g.fillStyle(0xcc2222);
  g.fillCircle(8, 8, 3);
  g.fillCircle(16, 8, 3);
  g.fillStyle(0xffffff);
  g.fillCircle(8, 9, 1);
  g.fillCircle(16, 9, 1);
  g.generateTexture('alien1', 24, 24);
  g.clear();
  
  // Alien type 2 (tough)
  g.fillStyle(0xff8800);
  g.fillRect(2, 2, 20, 20);
  g.fillStyle(0xcc6600);
  g.fillRect(6, 6, 12, 12);
  g.fillStyle(0xffffff);
  g.fillCircle(8, 8, 1.5);
  g.fillCircle(16, 8, 1.5);
  g.generateTexture('alien2', 24, 24);
  g.clear();
  
  // Explosion particle
  g.fillStyle(0xffaa00);
  g.fillCircle(4, 4, 4);
  g.generateTexture('particle', 8, 8);
  g.clear();
  
  g.destroy();
}

function create() {
  // Reset state
  score = 0;
  health = 100;
  wave = 0;
  gameOver = false;
  waveInProgress = false;
  alienSpeed = 50;
  aliensPerWave = 5;
  alienHealth = 1;
  
  // Create groups
  bullets = this.physics.add.group();
  aliens = this.physics.add.group();
  
  // Create player
  player = this.physics.add.sprite(400, 500, 'player');
  player.setCollideWorldBounds(true);
  player.setDepth(10);
  
  // Input
  cursors = this.input.keyboard.createCursorKeys();
  wasd = {
    up: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W),
    down: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S),
    left: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A),
    right: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D)
  };
  
  // Collisions
  this.physics.add.overlap(bullets, aliens, bulletHitAlien, null, this);
  this.physics.add.overlap(player, aliens, alienHitPlayer, null, this);
  
  // UI
  const uiStyle = { fontFamily: 'Arial', fontSize: '16px', color: '#ffffff' };
  scoreText = this.add.text(16, 16, 'Score: 0', uiStyle).setDepth(100);
  waveText = this.add.text(16, 40, 'Wave: 0', uiStyle).setDepth(100);
  healthText = this.add.text(16, 64, 'HP: 100/100', uiStyle).setDepth(100);
  
  // Health bar
  healthBarBg = this.add.graphics().setDepth(100);
  healthBarFill = this.add.graphics().setDepth(100);
  healthBarBg.fillStyle(0x333333);
  healthBarBg.fillRect(16, 88, 200, 16);
  updateHealthBar.call(this);
  
  // Start first wave
  this.time.delayedCall(1000, startWave, [], this);
  
  // Aim/fire
  this.input.on('pointermove', function(pointer) {
    if (!gameOver) {
      const angle = Phaser.Math.Angle.Between(player.x, player.y, pointer.x, pointer.y);
      player.setRotation(angle + Math.PI / 2); // sprite points up by default
    }
  });
  
  this.input.on('pointerdown', function(pointer) {
    if (!gameOver) {
      fireBullet.call(this, pointer);
    }
  }, this);
}

function update(time, delta) {
  if (gameOver) return;
  
  // Player movement
  let vx = 0, vy = 0;
  if (wasd.left.isDown || cursors.left.isDown) vx = -1;
  if (wasd.right.isDown || cursors.right.isDown) vx = 1;
  if (wasd.up.isDown || cursors.up.isDown) vy = -1;
  if (wasd.down.isDown || cursors.down.isDown) vy = 1;
  
  if (vx !== 0 && vy !== 0) {
    vx *= 0.707;
    vy *= 0.707;
  }
  
  player.setVelocity(vx * playerSpeed, vy * playerSpeed);
  
  // Auto-fire with mouse held
  if (this.input.activePointer.isDown) {
    if (time - lastFired > fireRate) {
      fireBullet.call(this, this.input.activePointer);
    }
  }
  
  // Check aliens off screen
  aliens.getChildren().forEach(function(alien) {
    if (alien.y > 650) {
      alien.destroy();
      // Player takes damage
      takeDamage.call(this, 5);
    }
  }, this);
  
  // Check wave completion
  if (waveInProgress && aliens.countActive() === 0) {
    waveInProgress = false;
    this.time.delayedCall(2000, startWave, [], this);
  }
}

function fireBullet(pointer) {
  const bullet = bullets.create(player.x, player.y, 'bullet');
  bullet.setDepth(5);
  
  const angle = Phaser.Math.Angle.Between(player.x, player.y, pointer.x, pointer.y);
  const speed = 500;
  bullet.setVelocity(Math.cos(angle) * speed, Math.sin(angle) * speed);
  bullet.setRotation(angle);
  
  bullet.damage = 10;
  lastFired = this.time.now;
  
  // Destroy bullet after 2 seconds
  this.time.delayedCall(2000, function() {
    if (bullet.active) bullet.destroy();
  });
}

function bulletHitAlien(bullet, alien) {
  bullet.destroy();
  alien.health -= bullet.damage || 10;
  if (alien.health <= 0) {
    // Explosion effect
    createExplosion.call(this, alien.x, alien.y);
    alien.destroy();
    score += 10 * (1 + Math.floor(wave / 2));
    scoreText.setText('Score: ' + score);
  } else {
    // Flash white briefly
    alien.setTint(0xffffff);
    this.time.delayedCall(50, function() {
      if (alien.active) alien.clearTint();
    });
  }
}

function alienHitPlayer(player, alien) {
  createExplosion.call(this, alien.x, alien.y);
  alien.destroy();
  takeDamage.call(this, 10);
}

function takeDamage(amount) {
  health = Math.max(0, health - amount);
  updateHealthBar.call(this);
  healthText.setText('HP: ' + health + '/' + maxHealth);
  
  if (health <= 0) {
    gameOver = true;
    player.setTint(0xff0000);
    player.setVelocity(0, 0);
    this.add.text(400, 300, 'GAME OVER\nClick to Restart', {
      fontFamily: 'Arial', fontSize: '48px', color: '#ff4444',
      align: 'center'
    }).setOrigin(0.5).setDepth(200);
    
    this.input.once('pointerdown', function() {
      this.scene.restart();
    }, this);
  }
}

function updateHealthBar() {
  healthBarFill.clear();
  const ratio = health / maxHealth;
  let color;
  if (ratio > 0.5) color = 0x00ff00;
  else if (ratio > 0.25) color = 0xffff00;
  else color = 0xff0000;
  healthBarFill.fillStyle(color);
  healthBarFill.fillRect(16, 88, 200 * ratio, 16);
}

function startWave() {
  wave++;
  alienSpeed = 50 + wave * 15;
  aliensPerWave = 5 + wave * 2;
  alienHealth = 1 + Math.floor(wave / 2);
  
  waveText.setText('Wave: ' + wave);
  waveInProgress = true;
  
  // Flash wave announcement
  const announce = this.add.text(400, 300, 'WAVE ' + wave, {
    fontFamily: 'Arial', fontSize: '64px', color: '#ff8800',
    stroke: '#000', strokeThickness: 6
  }).setOrigin(0.5).setDepth(150).setAlpha(0);
  
  this.tweens.add({
    targets: announce,
    alpha: 1,
    y: 280,
    duration: 500,
    ease: 'Power2',
    yoyo: true,
    hold: 500,
    onComplete: function() { announce.destroy(); }
  });
  
  // Spawn aliens
  for (let i = 0; i < aliensPerWave; i++) {
    this.time.delayedCall(i * 300, function() {
      if (gameOver) return;
      const x = Phaser.Math.Between(50, 750);
      const alien = aliens.create(x, -30, 'alien1');
      alien.health = alienHealth;
      alien.setVelocityY(alienSpeed);
      alien.setDepth(1);
      
      // Slight horizontal drift for variety
      alien.setVelocityX(Phaser.Math.Between(-20, 20));
    }, [], this);
  }
}

function createExplosion(x, y) {
  for (let i = 0; i < 8; i++) {
    const p = this.add.sprite(x, y, 'particle').setDepth(50);
    const angle = (i / 8) * Math.PI * 2;
    const dist = Phaser.Math.Between(30, 60);
    this.tweens.add({
      targets: p,
      x: x + Math.cos(angle) * dist,
      y: y + Math.sin(angle) * dist,
      alpha: 0,
      scaleX: 0.1,
      scaleY: 0.1,
      duration: 400,
      ease: 'Power2',
      onComplete: function() { p.destroy(); }
    });
  }
}
```

Wait, I need to be more careful with Phaser 3 API. Let me review:

- `this.physics.add.group()` - yes
- `this.physics.add.sprite()` - yes
- `this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W)` - correct
- `this.physics.add.overlap()` - yes
- `this.add.text()` - yes
- `this.add.graphics()` - yes
- `this.time.delayedCall()` - yes
- `this.tweens.add()` - yes
- `this.scene.restart()` - yes

One issue: in `fireBullet`, I use `this.time.now` but it should be `time` from the update parameter, or use `this.time.now`. Actually, `this.time.now` works.

Another issue: the auto-fire in update uses `this.input.activePointer.isDown` - this should work for mouse held down.

Let me also think about the player rotation. The ship sprite points upward by default. So rotation of 0 means pointing right in Phaser. To point up, it's -90 degrees or -PI/2. So if I want the ship to face the mouse, I calculate the angle from player to mouse, then add PI/2 to compensate for the sprite's default orientation.

Actually, in Phaser, a sprite with no rotation faces right. A triangle pointing up means it's rotated -PI/2 from the default. So to point toward the mouse, I need: `player.setRotation(angle + Math.PI / 2)` where angle is from player to mouse. Let me verify:
- Mouse to the right of player: angle = 0, rotation = PI/2 (90 deg) -> ship points down? No, that's wrong.
- Actually, if the ship graphic points up (north), then with rotation 0 it points east (right). To point up, rotation = -PI/2.
- So to point toward angle `a` (where 0 = right, PI/2 = down, PI = left, -PI/2 = up):
  - We want ship's up direction to align with angle a.
  - Ship's up is at -PI/2 in unrotated frame.
  - So rotation = a - (-PI/2) = a + PI/2.
  - Let's test: a = -PI/2 (up) -> rotation = 0 (ship points right, but that's wrong).
  
Hmm, I'm overcomplicating. In Phaser, `setRotation` rotates the sprite clockwise from its default orientation. If the sprite graphic faces right (default), then:
- rotation = 0: faces right
- rotation = PI/2: faces down
- rotation = PI: faces left
- rotation = -PI/2: faces up

If my ship graphic is drawn pointing up (north), then:
- At rotation 0, it faces up
- At rotation PI/2, it faces right
- At rotation PI, it faces down
- At rotation -PI/2, it faces left

So if I draw the ship pointing up in the texture (which I did: triangle with tip at top), then `setRotation(angle)` where angle is from player to mouse should work directly... but wait, angle 0 is right, not up.

Actually, `Phaser.Math.Angle.Between(x1, y1, x2, y2)` returns angle in radians where 0 = right, PI/2 = down, PI = left, -PI/2 = up.

If my ship graphic points up, then to face angle `a`, I need to rotate by `a + PI/2` (because ship's "up" direction needs to align with angle `a`, and the ship's "up" is at -PI/2 in standard math angle).

Let me just test: if mouse is directly above player, angle = -PI/2. Ship should point up. rotation = -PI/2 + PI/2 = 0. At rotation 0, ship points up (since graphic points up). Correct!

If mouse is to the right, angle = 0. rotation = 0 + PI/2 = PI/2. Ship points right (since from pointing up, rotate 90 deg clockwise = right). Correct!

OK, so `player.setRotation(angle + Math.PI / 2)` is correct when the ship graphic points up.

Now for bullets: they should travel in the direction the player is facing. The angle from player to mouse is what we calculated. Bullets should move in that direction. So `bullet.setVelocity(Math.cos(angle) * speed, Math.sin(angle) * speed)` is correct.

Let me also think about the texture generation. I need to be careful about the coordinate system in Graphics. When I draw on a Graphics object and then call generateTexture, it captures the drawn content as a texture. The texture size should be specified.

Actually, `generateTexture(key, width, height)` - the width and height define the texture bounds. The drawing coordinates are relative to the Graphics object's internal coordinate system.

For the player texture: I draw a triangle with tip at (20, 0), so it's about 34 wide and 20 tall. The texture size should be 40x24 to have some padding.

Let me adjust: I'll make the ship centered at (0,0) and draw from there. Actually, for generateTexture, the drawing coordinates are absolute within the texture. Let me think...

When you draw on a Graphics object and call `generateTexture('player', 40, 20)`, it captures the area [0,0] to [40,20] of the Graphics canvas. So if I draw a triangle from (20,0) to (-14,-10) to (-14,10), that's from x=-14 to x=20 and y=-10 to y=10. I need the texture to encompass all of that. So width = 34, height = 20. But let me use 40x24 for padding.

Actually, I should draw centered in the texture. Let me offset the drawing so it's centered. For a 40x20 texture centered at (20,10), I'd draw the triangle from (20,0) to (20-34, 10-10) to (20-34, 10+10) = (20,0) to (-14,0) to (-14,20). Hmm, this is getting confusing.

Let me just draw from (0,0) and specify the right size. For the player, I'll draw:
- Move to (20, 0) - tip
- Line to (0, -10) - left wing
- Line to (0, 10) - right wing
- Close path

This makes a triangle from x=0 to x=20, y=-10 to y=10. Texture size: 24x24.

But the origin of the sprite will be at the center of the texture (default). So if texture is 24x24, origin is at (12,12). The tip of the ship is at (20,0) in texture coords, which is at (20-12, 0-12) = (8, -12) relative to origin. That's fine - the ship will be offset. 

Actually, I should draw centered at the origin of the texture. Let me use a texture size like 32x32 and draw the ship centered at (16,16).

For the player:
```
g.fillStyle(0x00ff88);
g.beginPath();
g.moveTo(16, 4);     // tip
g.lineTo(6, 28);     // bottom-left
g.lineTo(26, 28);    // bottom-right
g.closePath();
g.fillPath();
```

This draws a triangle pointing up, centered horizontally, with tip near top. Texture 32x32.

For alien1 (circle):
```
g.fillStyle(0xff4444);
g.fillCircle(12, 12, 12);
```
Texture 24x24.

For bullet:
```
g.fillStyle(0xffff44);
g.fillCircle(3, 3, 3);
```
Texture 6x6.

For particle:
```
g.fillStyle(0xffaa00);
g.fillCircle(4, 4, 4);
```
Texture 8x8.

OK, I think I have enough to write the complete file. Let me also add a nice starfield background for visual appeal.

Let me write the complete code now. I'll be thorough and make it a polished game.

Actually, I realize I should also handle the case where the player holds the mouse button for continuous fire. I already have that in update() with the `if (this.input.activePointer.isDown)` check.

One more thing: I need to make sure the bullet group and alien group are physics groups so overlap works.

Let me also add a nice background with stars.

Here's my final plan for the code:

1. HTML structure with style
2. Phaser config
3. preload - generate textures
4. create - set up player, groups, UI, input handlers
5. update - movement, auto-fire, check aliens off screen, wave completion
6. Helper functions: fireBullet, bulletHitAlien, alienHitPlayer, takeDamage, updateHealthBar, startWave, createExplosion

Let me write it all now.

Actually, I want to double-check one thing: in Phaser 3, when using `this.physics.add.overlap`, the callback receives (obj1, obj2). So `bulletHitAlien(bullet, alien)` should work since bullets are the first argument to the overlap call.

Also, I need to make sure that when I destroy the player (game over), I handle it gracefully. Instead of destroying, I'll just stop movement and show game over.

Let me finalize and write the file.

Actually, I realize I should make the game more polished:
- Stars in the background
- Smooth player rotation
- Better explosion effects
- Wave announcements with tween
- Score multiplier for faster kills? No, keep it simple.

Let me write the code. I'll make the starfield by drawing random dots in create().

Here's the complete code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Alien Shooter</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
  background: #000; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100vh; 
  overflow: hidden;
}
canvas { display: block; }
</style>
</head>
<body>
<script src="phaser.min.js"></script>
<script>
// ... game code
</script>
</body>
</html>
```

OK let me write the full thing now.
→ write /tmp/ws/index.html (11412 bytes)
toolResult

Successfully wrote 11412 bytes to /tmp/ws/index.html

assistant
thinking
I do not output the final response in the thinking tags.

Let me analyze my work:

1. I created a single self-contained index.html with inline CSS and JS
2. No external resources beyond phaser.min.js which is already present
3. Loaded phaser.min.js with a plain <script src="phaser.min.js"></script>
4. The game is a top-down alien shooter with:
   - WASD movement + cursor keys
   - Mouse aim (pointermove) and click to fire
   - Continuous fire while holding mouse button
   - Waves of advancing aliens
   - Health system (100 HP, health bar)
   - Score system (10 points per kill + wave bonus)
   - Increasing difficulty (more aliens, faster, more HP per wave)
   - All graphics procedurally generated in preload using Graphics API
   - Explosion particle effects
   - Game over / restart
   - Starfield background

This looks complete. Let me verify the file exists.

The file has been created. Here's a summary of the game: **Alien Shooter** – `/tmp/ws/index.html` **Controls:** - **WASD** or **Arrow keys** – move the ship - **Mouse move** – aim (ship rotates toward cursor) - **Mouse click / hold** – fire bullets toward cursor **Features:** - **Procedural graphics** – ship, aliens, bullets, particles all drawn with Phaser's Graphics API in `preload()` - **Waves** – aliens spawn in staggered formations; each wave increases speed, count, and alien HP - **Health bar** – starts at 100 HP; losing all HP ends the game - **Score** – 10 + wave bonus per kill - **Explosion particles** – burst on alien death and player death - **Wave announcement** – "WAVE N" text animates in at the start of each wave - **Game over / restart** – click anywhere to restart the scene **Difficulty scaling:** - Alien speed: `50 + wave * 18` - Aliens per wave: `5 + floor(wave * 2.5)` - Alien HP: `1 + floor(wave / 3)` - Rows increase every 4 waves (up to 4) Open `index.html` in a browser (with `phaser.min.js` in the same directory) to play.

TAKE IT TO CODE

A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.

RUN

modelaion-3.0-mini
vendorAion Labs
harnesspi-agent
generated2026-08-01

EVALUATION

★★★★★ 3/5 working

Top-down shooter with player ship, aliens, score/wave/HP HUD, and functioning game-over/restart state after player dies.

Vision grade · anthropic/claude-sonnet-5

MEASUREMENTS

Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.

idle motion2.8%
on click2.8%
on drag1.9%
on wheel3.9%
on enter + space5.4%
on arrow keys0.0%
on w/a/s/d0.0%
frame spread17 / 255
console errors0
js errors none

METRICS

runtime155.4s
tokens in9.2k
tokens out11k
cached5.6k
cost / run$0.0194