Star Pop - Building a Match-3 Puzzle Game with AI

A complete record of developing a classic "Pop Star" elimination puzzle game using AI tools — from core algorithms to polished effects and mobile optimization.

Project Overview

Star Pop is a classic elimination puzzle game built with AI assistance. Players tap connected same-colored stars (2 or more) to eliminate them, scoring points through combos and mass eliminations.

Tech Stack:

• Vanilla JavaScript (ES6+)
• HTML5 Canvas
• CSS3 Responsive Design
• Web Audio API (sound effects)

Core Features:

• Classic elimination gameplay — tap 2+ adjacent same-colored stars to pop them
• Combo system with escalating score multipliers
• Particle explosions, screen shake, and floating score effects
• Sound effects system (select, pop, combo, game over)
• Mobile-first responsive design
• Local high score storage

---

AI Usage Workflow

Phase 1: Creating the Base Game

Goal: Get AI to help build a playable elimination game prototype

Prompt Example:

Help me create a "Pop Star"-style elimination game using HTML5 Canvas and JavaScript.
It needs:
1. A 10x14 game grid with 4 colors of stars randomly generated
2. Tap adjacent same-colored stars (at least 2) to eliminate them
3. After elimination, stars above fall down and columns shift left
4. Scoring system with base score + combo bonus
5. Game over detection when no more moves are possible
6. Inherit from the existing GameBase class

Please provide the complete game logic code.

AI Output Highlights:

• Created the grid system and star data structure
• Implemented Flood Fill algorithm to find connected same-colored stars
• Added gravity (fall-down) and column shift logic
• Built the core game loop

Key Takeaway: The AI generated a fully functional core in one pass. The Flood Fill and gravity algorithms were correct and efficient for the 10×14 grid size.

---

Phase 2: Visual Effects & Animation

Goal: Make the game feel alive and satisfying

Prompt:

The base game works. Now I want to add:
1. Particle explosion effects when stars are eliminated
2. Floating score animations (show earned points)
3. Screen shake effect (triggered on big eliminations)
4. Hover highlight to show which stars can be eliminated

Please implement these using requestAnimationFrame for smooth performance.

AI Solutions:

Effect	Implementation	Optimization
Particle Explosion	Particle class with physics simulation	Limit particle count, clean up expired ones
Score Popup	ScorePopup class — floats up and fades out	Alpha gradient for smooth fade
Screen Shake	Random canvas offset jitter	Intensity scales with elimination count
Hover Highlight	Semi-transparent overlay on eligible stars	Only repaint on mouse move

---

Phase 3: Mobile Adaptation

Problem: On mobile, the grid cells were too small and touch response felt laggy.

How to Describe to AI:

The game works on desktop but on mobile:
1. Cells are too small to tap accurately
2. Touch feels laggy
3. Layout doesn't fit the screen well

How can I improve the mobile experience? I need to detect mobile devices and handle them differently.

AI Analysis:

• Root cause: Fixed cell sizes don't adapt to different screens
• Solution: Dynamically calculate cell size based on screen dimensions

Prompt:

Please modify the setup method to:
1. Use larger cells (min 30px) on mobile, smaller (min 25px) on desktop
2. Reduce side margins on mobile to maximize screen width
3. Add touchstart event listener to reduce touch latency
4. Scale up UI elements (score, combo) on mobile

Result: ✅ Smooth, responsive gameplay on both mobile and desktop.

---

Phase 4: Combo System Design

Problem: How to design a combo mechanic that feels rewarding but not too easy?

Consulting AI for Design:

I want a combo system:
- Consecutive eliminations earn bonus points
- Higher combos = bigger multipliers
- Combo resets if player takes too long or has no moves

Help me design a balanced formula.

AI's Proposed Formula:

// Combo calculation
comboBonus = baseScore * combo * 0.5;
totalScore = baseScore + comboBonus;

// Combo rules
- Each successful elimination: combo++
- Eliminate 2 stars: baseScore = 20
- Eliminate 3 stars: baseScore = 30
- Eliminate n stars: baseScore = n * 10
- No moves available or game over: combo = 0

Result: ✅ The formula encourages chaining eliminations while keeping the game challenging.

---

Phase 5: Sound System Integration

Goal: Add audio feedback for a more immersive experience

Prompt:

I want to add sound effects:
1. Selection sound when tapping a star
2. Pop sound for elimination
3. Special combo sound
4. Game over sound
5. Optional background music

The project already has a SoundManager class. Please help integrate it.

AI Implementation:

• Defined sound mappings in the constructor
• Called SoundManager.play() at key game events
• Added a volume toggle button in the top-right corner

Prompt for Placement:

Add sound calls at:
- updateSelectedStars: play 'select' sound
- popStars: play 'pop' sound, play 'combo' on combo
- checkGameOver: play 'gameover' sound

Result: ✅ Rich audio feedback with minimal code changes.

---

Core Algorithm Deep Dive

1. Flood Fill — Finding Connected Stars

This is the heart of the game — finding all adjacent same-colored stars from a tapped position.

findConnectedStars(startR, startC) {
  const color = this.grid[startR][startC];
  if (color === 0) return [];

  const connected = [];
  const visited = new Set();
  const queue = [{r: startR, c: startC}];
  visited.add(`${startR},${startC}`);

  while (queue.length > 0) {
    const {r, c} = queue.shift();
    connected.push({r, c});

    // Check four directions
    const directions = [[-1,0], [1,0], [0,-1], [0,1]];
    for (const [dr, dc] of directions) {
      const nr = r + dr;
      const nc = c + dc;

      if (nr >= 0 && nr < this.rows &&
          nc >= 0 && nc < this.cols &&
          !visited.has(`${nr},${nc}`) &&
          this.grid[nr][nc] === color) {
        visited.add(`${nr},${nc}`);
        queue.push({r: nr, c: nc});
      }
    }
  }

  return connected;
}

Optimization Notes (from AI):

• Iterative BFS instead of recursion to avoid stack overflow
• Uses a Set for visited tracking — O(n) time complexity
• For a 10×14 grid, this is more than efficient

---

2. Gravity — Stars Fall Down

After elimination, stars above need to fall to fill gaps.

applyGravity() {
  for (let c = 0; c < this.cols; c++) {
    let writePos = this.rows - 1;

    // Iterate from bottom to top
    for (let r = this.rows - 1; r >= 0; r--) {
      if (this.grid[r][c] > 0) {
        if (writePos !== r) {
          this.grid[writePos][c] = this.grid[r][c];
          this.grid[r][c] = 0;
        }
        writePos--;
      }
    }
  }
}

AI Optimization Tip: Two-pointer technique — single pass, O(rows × cols) time.

---

3. Empty Column Removal

When an entire column is empty, columns to the right shift left.

removeEmptyColumns() {
  let writeCol = 0;

  for (let c = 0; c < this.cols; c++) {
    let isEmpty = true;
    for (let r = 0; r < this.rows; r++) {
      if (this.grid[r][c] > 0) {
        isEmpty = false;
        break;
      }
    }

    if (!isEmpty) {
      if (writeCol !== c) {
        for (let r = 0; r < this.rows; r++) {
          this.grid[r][writeCol] = this.grid[r][c];
          this.grid[r][c] = 0;
        }
      }
      writeCol++;
    }
  }
}

---

Testing Problems & AI Solutions

Problem 1: Touch Delay on Mobile

Symptom: Noticeable lag when tapping stars on mobile.

AI Solution:

// Add touchstart event for immediate response
this.canvas.addEventListener('touchstart', (e) => {
  e.preventDefault();
  const touch = e.touches[0];
  const rect = this.canvas.getBoundingClientRect();
  const x = touch.clientX - rect.left;
  const y = touch.clientY - rect.top;

  // Handle input immediately
  this.handleInput(x, y);
}, { passive: false });

Status: ✅ Fixed in one attempt.

---

Problem 2: Particle Animation Performance

Symptom: Frame drops when eliminating many stars at once.

AI Analysis & Fix:

1. Limit particle count:

const particleCount = Math.min(5, stars.length * 5);

2. Clean up expired particles:

updateParticles() {
  this.particles = this.particles.filter(p => {
    p.update();
    return p.life > 0;
  });
}

3. Object pool pattern (advanced):

this.particlePool = [];
for (let i = 0; i < 100; i++) {
  this.particlePool.push(new Particle());
}

Status: ✅ Smooth 60fps even with large eliminations.

---

Problem 3: Inaccurate Game Over Detection

Symptom: Game ends even when valid moves still exist.

AI Solution:

checkGameOver() {
  for (let r = 0; r < this.rows; r++) {
    for (let c = 0; c < this.cols; c++) {
      if (this.grid[r][c] > 0) {
        const connected = this.findConnectedStars(r, c);
        if (connected.length >= 2) {
          return false; // Move still available
        }
      }
    }
  }
  return true; // Game over
}

Optimization: Only call after elimination events, and return early on first found match.

Status: ✅ Accurate detection every time.

---

Problem 4: Unbalanced Scoring

Symptom: Score grows either too fast or too slow.

AI's Balanced Formula:

Approach	Formula	Characteristic
Linear	count * 10	Simple and straightforward
Exponential	count * count * 5	Rewards mass elimination
Hybrid	count * 10 + combo * count * 2	Balances combo and quantity

Final Choice:

const baseScore = count * 10;
const comboBonus = this.combo > 0 ? baseScore * this.combo * 0.5 : 0;
const totalScore = Math.floor(baseScore + comboBonus);

Status: ✅ Players reported satisfying progression.

---

Key Learnings

AI Collaboration Best Practices

✅ What worked well:

• Break development into clear phases
• Provide context (code snippets, error messages, expected behavior)
• Ask for optimization suggestions proactively
• Test each AI-generated piece before moving on

❌ What to avoid:

• Asking for too many features at once
• Vague problem descriptions without context
• Blindly accepting AI code without testing
• Ignoring performance considerations

---

Game Development Insights

Performance:

• Use requestAnimationFrame over setInterval
• Clean up event listeners and timers promptly
• Limit particle counts and animation complexity
• Avoid frequent DOM manipulation

User Experience:

• Visual feedback is essential (hover, click animation)
• Sound effects dramatically improve immersion
• Clear score and combo display keeps players engaged
• Smooth transitions make the game feel polished

Mobile First:

• Touch events should take priority over mouse events
• Responsive layout that adapts to any screen
• Touch targets should be at least 44×44px
• Prevent page scrolling and zooming during gameplay

---

Future Expansion Ideas

1. Game Modes

• Timed Mode: Score as much as possible within a time limit
• Challenge Mode: Reach target score in limited moves
• Endless Mode: New stars keep generating

2. Power-Up System

• 💣 Bomb: Clear a specific area of stars
• 🔄 Shuffle: Rearrange all remaining stars
• 🎨 Color Bomb: Eliminate all stars of one color

3. Social Features

• Leaderboard integration
• Achievement badges
• Score sharing

4. Theme Customization

• Space, ocean, forest visual themes
• Customizable star shapes
• Toggle-able special effects

---

Play the Game

Ready to try it yourself? Play Star Pop now!

Want to build your own game? Check out our AI Coding Tools and AI Art Tools collections.

---

Summary

Using AI assistance, Star Pop went from concept to a polished, playable game in record time. Here's where AI made the biggest impact:

1. Rapid Prototyping: Built a working game skeleton in a single prompt
2. Algorithm Implementation: Flood Fill, gravity, and column shift were generated correctly
3. Problem Solving: Mobile adaptation, performance optimization, and bug fixes
4. Code Review: AI proactively suggested performance improvements and edge case handling
5. Balance Tuning: Score formula and combo mechanics were iterated quickly

Key Takeaway: AI is an incredibly powerful coding partner, but human oversight — testing each phase, providing clear context, and making design decisions — remains essential. The best results come from a tight feedback loop between developer and AI.