Game Designer

Design Process

Step 1: Audit

Read every file in the game project. Understand the complete codebase before suggesting changes. Specifically:

• Read all HTML, CSS, and JavaScript/TypeScript source files
• Read all asset references (images, sprites, sounds)
• Read the build configuration (vite.config, package.json, tsconfig)
• Identify the game loop, rendering approach, and state management
• Note the current visual state: background, colors, animations, transitions

Present a brief summary of the game's architecture and current visual state.

Step 2: Design Report

Score each of the following design areas on a scale of 1-5:

Present this report to the user with specific observations and a recommended priority order for improvements. Ask the user which areas they want to address.

Step 3: Implement Improvements

For each area the user wants improved, implement the changes following the spectacle effects and patterns below. Always ask "May I write this to [filepath]?" before modifying any file, following the collaboration protocol.

Spectacle Effects

These are battle-tested visual effects that add juice and atmosphere to browser games. Implement them as needed based on the audit results.

Combo Text

Floating text that appears when the player achieves consecutive hits or a combo. Rises and fades out.

function showComboText(x, y, text, color = '#ffdd00') {
  const el = document.createElement('div');
  el.textContent = text;
  el.style.cssText = `
    position: fixed;
    left: ${x}px;
    top: ${y}px;
    font-size: 28px;
    font-weight: 900;
    color: ${color};
    text-shadow: 0 0 10px ${color}, 2px 2px 0 #000;
    pointer-events: none;
    z-index: 1000;
    transition: all 0.8s ease-out;
    font-family: 'Arial Black', sans-serif;
  `;
  document.body.appendChild(el);

  requestAnimationFrame(() => {
    el.style.top = `${y - 80}px`;
    el.style.opacity = '0';
    el.style.transform = 'scale(1.5)';
  });

  setTimeout(() => el.remove(), 800);
}

Hit Freeze Frame

A brief pause (freeze frame) on impact that makes hits feel heavy. Works on both player and enemy hits.

function freezeFrame(durationMs = 50) {
  // For Canvas-based games
  const originalRAF = window.requestAnimationFrame;
  let frozen = true;

  setTimeout(() => {
    frozen = false;
  }, durationMs);

  // For simple game loops with a running flag:
  if (typeof gameLoop !== 'undefined' && gameLoop.running) {
    gameLoop.running = false;
    setTimeout(() => { gameLoop.running = true; }, durationMs);
  }
}

Rainbow Background

A slow-shifting gradient background that adds life without distracting from gameplay.

@keyframes rainbowShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.game-canvas {
  background: linear-gradient(
    -45deg,
    #1a1a2e, #16213e, #0f3460, #533483,
    #e94560, #533483, #0f3460, #16213e
  );
  background-size: 400% 400%;
  animation: rainbowShift 15s ease infinite;
}

Pulsing Background on Score

The background briefly brightens or shifts color when the player scores, creating a subconscious reward signal.

function pulseBackground() {
  const canvas = document.querySelector('.game-canvas');
  if (!canvas) return;

  canvas.style.transition = 'filter 0.1s ease-out';
  canvas.style.filter = 'brightness(1.3)';

  setTimeout(() => {
    canvas.style.filter = 'brightness(1.0)';
  }, 100);
}

Entity Entrance Animations

Enemies, obstacles, or collectibles should not just appear -- they should enter with a brief animation that draws attention without being slow.

@keyframes entityEntrance {
  0%   { transform: scale(0) rotate(180deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(-10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.entity-enter {
  animation: entityEntrance 0.3s ease-out forwards;
}

// For canvas-based games, apply entrance scaling in the draw loop
function drawEntityWithEntrance(entity, ctx) {
  if (entity.entranceProgress < 1) {
    entity.entranceProgress = Math.min(1, entity.entranceProgress + 0.05);
    const scale = easeOutBack(entity.entranceProgress);
    ctx.save();
    ctx.translate(entity.x, entity.y);
    ctx.scale(scale, scale);
    // draw entity at origin
    ctx.restore();
  }
}

function easeOutBack(t) {
  const c1 = 1.70158;
  const c3 = c1 + 1;
  return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
}

Persistent Player Trail

A fading trail behind the player entity that creates a sense of speed and movement history.

class PlayerTrail {
  constructor(maxLength = 12) {
    this.positions = [];
    this.maxLength = maxLength;
  }

  add(x, y) {
    this.positions.push({ x, y, alpha: 1.0 });
    if (this.positions.length > this.maxLength) {
      this.positions.shift();
    }
  }

  draw(ctx, radius, color) {
    this.positions.forEach((pos, i) => {
      const alpha = (i / this.positions.length) * 0.4;
      const size = radius * (i / this.positions.length) * 0.8;
      ctx.beginPath();
      ctx.arc(pos.x, pos.y, size, 0, Math.PI * 2);
      ctx.fillStyle = color.replace('1)', `${alpha})`);
      ctx.fill();
    });
  }
}

Streak Milestone Announcements

When the player hits score milestones (every 10, 50, 100 points), show a full-screen announcement that celebrates progress.

function showMilestone(value, message) {
  const overlay = document.createElement('div');
  overlay.style.cssText = `
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    pointer-events: none;
    animation: fadeInOut 1.5s ease forwards;
  `;

  const score = document.createElement('div');
  score.textContent = value;
  score.style.cssText = `
    font-size: 72px;
    font-weight: 900;
    color: #ffd700;
    text-shadow: 0 0 20px #ffd700, 0 0 40px #ff8c00;
  `;

  const msg = document.createElement('div');
  msg.textContent = message;
  msg.style.cssText = `
    font-size: 24px;
    color: #fff;
    margin-top: 10px;
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
  `;

  overlay.appendChild(score);
  overlay.appendChild(msg);
  document.body.appendChild(overlay);

  setTimeout(() => overlay.remove(), 1500);
}

// Usage: Check after score updates
function checkMilestones(newScore) {
  const milestones = {
    10:  'Nice Start!',
    25:  'Getting Warmed Up!',
    50:  'Halfway There!',
    100: 'Triple Digits!',
    250: 'On Fire!',
    500: 'Unstoppable!',
  };
  if (milestones[newScore]) {
    showMilestone(newScore, milestones[newScore]);
  }
}

Add the required keyframe to CSS:

@keyframes fadeInOut {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

Design Areas (Detailed Scoring Criteria)

Background (1-5)

Color Palette (1-5)

Animations (1-5)

Particles (1-5)

Screen Transitions (1-5)

Typography (1-5)

Game Feel / Juice (1-5)

Game Over (1-5)

Entity Prominence (1-5)

First Impression (1-5)

What NOT to Change

These areas are outside this skill's scope. Do not modify them unless explicitly asked:

• Physics values: gravity, velocity, acceleration, collision sizes
• Scoring logic: point values, multipliers, high score calculation
• Input handling: key bindings, touch zones, event listeners
• Game flow: state machine transitions, spawn waves, difficulty curves
• Spawn timing: enemy rates, obstacle frequency, power-up intervals

If the audit reveals issues in these areas, note them in the report but do not fix them. Suggest the user run /game-qa or handle them separately.

Common Visual Bugs to Avoid

When implementing visual improvements, watch for these frequent mistakes:

1. Z-index conflicts: Spectacle overlays (combo text, milestones) must have a higher z-index than game elements but not block input (use pointer-events: none).

2. Animation stacking: Multiple simultaneous CSS animations can conflict. Use separate elements for independent effects rather than animating the same property twice on one element.

3. Memory leaks from DOM elements: Every dynamically created element (combo text, particles, overlays) must be removed after its animation completes. Always pair appendChild with a setTimeout(() => el.remove(), ...).

4. requestAnimationFrame without cancellation: If you add rAF-based animations, store the frame ID and cancel it on cleanup (game over, state change) to prevent ghost animations.

5. CSS transitions on transform while using JS transform: If JavaScript directly sets style.transform, CSS transitions on transform will fight with it. Pick one: either CSS transition or JS-driven transform, not both.

6. Canvas clear before draw: When adding visual effects to a canvas game, ensure the clearRect happens before all draw calls, not between them.

7. Layout thrashing: Reading offsetWidth/offsetHeight immediately before writing style in a loop forces browser reflow. Batch reads separately from writes.

8. Uninitialized color values: If the game uses dynamic colors, always provide a fallback. ctx.fillStyle = entity.color || '#ffffff' prevents black fills from undefined colors.

Collaborative Protocol

This skill follows the collaboration principle:

1. Audit first, suggest second: Never start editing before the full audit and design report are presented and discussed.
2. Show before writing: Present the design report and planned changes in conversation before asking to write to any file.
3. Ask permission: Use "May I write this to [filepath]?" before every file modification.
4. One area at a time: Implement improvements area by area, getting approval after each, rather than changing everything at once.
5. Test visually: After each implementation, suggest the user run the game and verify the visual change before proceeding.