Game Developer & Designer Skill

Build complete, polished games with professional-grade mechanics, visuals, and player experience.

Core Workflow

Analyze — Understand game type, platform, core loop, target audience
Design — Define mechanics, progression, visual style, audio needs
Architect — Plan component structure, state management, game loop
Implement — Build iteratively: core → polish → juice
Playtest — Test feel, balance, edge cases

Game Design Fundamentals

The Core Loop

Every game needs a satisfying core loop. Define it explicitly:

Action → Challenge → Reward → Progression → (repeat)

Example (Pong-style): Hit ball → Keep rally → Score point → Level up → Harder AI

Player Experience Pillars

Agency: Player actions feel meaningful and responsive
Challenge: Difficulty matches skill, with room to grow
Reward: Clear feedback for success (visual, audio, progression)
Flow: Minimize friction between player intent and game response

Platform-Specific Guidance

React Native Games: See references/react-native-games.md Web/HTML5 Games: See references/web-games.md Game Math & Physics: See references/game-physics.md

Implementation Patterns

Game Loop Architecture

// Core game loop pattern
const useGameLoop = (updateFn, isRunning) => {
  const frameRef = useRef();
  const lastTimeRef = useRef(0);
  
  useEffect(() => {
    if (!isRunning) return;
    
    const loop = (timestamp) => {
      const deltaTime = (timestamp - lastTimeRef.current) / 1000;
      lastTimeRef.current = timestamp;
      updateFn(deltaTime);
      frameRef.current = requestAnimationFrame(loop);
    };
    
    frameRef.current = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(frameRef.current);
  }, [isRunning, updateFn]);
};

State Management

Separate concerns clearly:

Game State: Positions, scores, level, entities
UI State: Menus, modals, settings
Input State: Current touches, gestures, keys
Audio State: What's playing, volume levels

Collision Detection

Start simple, optimize only if needed:

// AABB collision (rectangles)
const checkCollision = (a, b) => (
  a.x < b.x + b.width &&
  a.x + a.width > b.x &&
  a.y < b.y + b.height &&
  a.y + a.height > b.y
);

// Circle collision
const circleCollision = (a, b) => {
  const dx = a.x - b.x;
  const dy = a.y - b.y;
  const distance = Math.sqrt(dx * dx + dy * dy);
  return distance < a.radius + b.radius;
};

Game Feel ("Juice")

Good games feel responsive and alive. Add juice through:

Visual Feedback

Screen shake on impacts (subtle: 2-5px, dramatic: 10-15px)
Particle effects for collisions, explosions, trails
Squash/stretch on bounces and impacts
Flash effects on damage or scoring
Trails behind fast-moving objects

Audio Feedback

Vary pitch slightly on repeated sounds (±10%)
Layer sounds for impact (hit + whoosh + bass)
Use rising tones for positive events, falling for negative
Add subtle ambient soundscape

Timing & Easing

Use easing functions, never linear motion
Add anticipation before actions (wind-up)
Add follow-through after actions (settle)
Hit-stop/freeze frames on important impacts (16-50ms)

AI Opponent Design

Difficulty Scaling

const AI_CONFIGS = {
  easy: {
    reactionDelay: 200,    // ms before responding
    predictionError: 0.3,  // randomness in targeting
    speedMultiplier: 0.7,  // movement speed
    mistakeChance: 0.15    // chance to miss intentionally
  },
  medium: {
    reactionDelay: 100,
    predictionError: 0.15,
    speedMultiplier: 0.9,
    mistakeChance: 0.05
  },
  hard: {
    reactionDelay: 50,
    predictionError: 0.05,
    speedMultiplier: 1.0,
    mistakeChance: 0.01
  }
};

AI Behavior Patterns

Reactive: Respond to current ball position
Predictive: Calculate where ball will arrive
Adaptive: Adjust strategy based on player patterns
Personality: Add quirks (aggressive, defensive, erratic)

Level Design & Progression

Difficulty Curve

Levels 1-10:   Tutorial zone — Teach mechanics gently
Levels 11-25:  Learning zone — Introduce variations
Levels 26-50:  Challenge zone — Test mastery
Levels 51-75:  Expert zone — Combine mechanics
Levels 76-100: Mastery zone — Peak difficulty

Progression Systems

Unlocks: New content as reward for progress
Upgrades: Permanent improvements
Achievements: Recognition for skill/exploration
Leaderboards: Social competition

Level Variation Techniques

Modify parameters (speed, size, count)
Add/remove elements
Change layouts
Introduce new mechanics
Combine existing mechanics

Visual Style Guidelines

Retro/Arcade (80s)

Neon colors: #ff00ff, #00ffff, #39ff14, #ff6b35
Scanline/CRT effects
Pixel fonts or bold geometric sans-serif
Grid backgrounds, glow effects
High contrast, dark backgrounds

Modern Minimal

Limited color palette (2-3 colors)
Clean geometric shapes
Generous whitespace
Subtle shadows and depth
Smooth animations

Pixel Art

Consistent pixel scale (don't mix sizes)
Limited palette per sprite
Clear silhouettes
Animation principles still apply

Sound Design Checklist

Essential sounds for most games:

Menu navigation (select, confirm, back)
Core action sounds (hit, collect, shoot)
Feedback sounds (success, failure, damage)
Ambient/background music
Transition sounds (level start, game over)

Implementation tips:

Preload all sounds before gameplay
Use audio sprites for web
Implement volume controls (music/SFX separate)
Support mute toggle
Vary sounds slightly to avoid repetition fatigue

Performance Optimization

Critical for Games

Target 60 FPS consistently
Minimize garbage collection (object pooling)
Use useMemo/useCallback for expensive calculations
Batch state updates
Profile before optimizing

React Native Specific

Use react-native-reanimated for animations
Avoid JS thread blocking during gameplay
Use native driver for animations when possible
Consider react-native-game-engine for complex games

Project Structure Template

game-name/
├── src/
│   ├── components/
│   │   ├── game/          # Game entities (Player, Ball, Enemy)
│   │   ├── ui/            # UI components (Button, Modal, Score)
│   │   └── effects/       # Visual effects (Particles, Glow)
│   ├── screens/           # Full screens (Menu, Game, Settings)
│   ├── hooks/             # Custom hooks (useGameLoop, useSound)
│   ├── context/           # State management
│   ├── utils/             # Helpers (physics, math, collision)
│   ├── config/            # Constants, level data, settings
│   ├── assets/
│   │   ├── sounds/
│   │   ├── images/
│   │   └── fonts/
│   └── types/             # TypeScript definitions
├── App.tsx
└── package.json

Quality Checklist

Before considering a game complete:

Gameplay

Core loop is satisfying
Controls feel responsive (<100ms latency)
Difficulty curve is smooth
Edge cases handled (pause, background, resume)

Polish

Visual feedback for all actions
Sound effects for key events
Smooth transitions between states
Loading states where needed

UX

Clear how to play (tutorial or intuitive)
Progress is saved
Settings are accessible
Pause functionality works

Technical

Consistent 60 FPS
No memory leaks
Handles interruptions gracefully
Works on target devices/browsers

game-developer