Papercut.ioAI · Claude 3.5

Core Game Loop and Mechanics

Moment-to-Moment Gameplay:

• Player controls a colored block that moves continuously at constant speed across a flat 3D arena
• Swipe anywhere on screen to change direction (360° free movement, not grid-locked)
• Leaving your colored territory creates a vulnerable "live trail" behind you
• Return to your territory to close the loop and claim everything inside (flood-fill algorithm)
• Avoid enemy live trails (instant death) while trying to cut through theirs to eliminate them
• Compete against 3-5 AI bots following the same rules
• Match ends when player reaches 100% territory or dies

Progression & Engagement:

• Territory percentage constantly updates, creating tension and goals
• Live leaderboard shows competitive standing
• Risk/reward balance: larger loops = more territory but longer vulnerable trail
• Strategic depth: when to expand vs. when to play safe, when to hunt enemy trails

Win/Lose Conditions:

• Win: Claim 100% of the arena (victory screen with stats)
• Lose: Hit an enemy's live trail (death screen shows final %, "Play Again" button)
• Bots respawn after death; player restarts from small territory

Replayability:

• Fast matches (2-5 minutes typical)
• Emergent gameplay from AI interactions
• Personal best % tracking
• Different strategies each match

Starting Scope

First Iteration Must Include:

• 3D arena (50x50 tile grid) with boundary walls
• Player block with continuous movement and swipe steering
• Territory ownership system (home territory vs. neutral)
• Live trail rendering and tracking
• Loop closure detection with flood-fill claiming
• Collision detection: player vs. enemy trails (death), player vs. boundary (bounce/stop)
• 3 AI bots with basic behavior (expand with small loops, avoid long trails)
• HUD: territory % counter (top-center), simple leaderboard (top-right)
• Death screen with final % and "Play Again" button
• Clean visual style: flat-shaded tiles, colored blocks, trail ribbons
• Camera: low isometric view following player with slight lag

Defer to Future Iterations:

• Advanced AI behaviors (trail hunting, strategic retreats)
• Power-ups or special abilities
• Multiple arena sizes or shapes
• Cosmetic customization (block skins, trail effects)
• Sound effects and background music
• Particle effects for territory claiming
• Tutorial or onboarding flow

Game Perspective

3D Isometric/Elevated Top-Down

• Camera positioned at ~45° angle looking down at the arena
• Elevated enough to show 3D depth of tiles and blocks
• Not perfectly flat top-down—slight perspective to emphasize 3D
• Camera follows player block with smooth interpolation (slight lag for polish)
• Fixed zoom level (no pinch-to-zoom needed for first iteration)

Game World and Level Design

Arena Layout:

• 50x50 grid of tiles (2500 total tiles)
• Each tile is 1 unit square in 3D space
• Bounded by visible walls on all four edges
• Flat playing surface at y=0
• All tiles start as neutral (light grey/white)

Starting Positions:

• Player spawns at random edge location with 3x3 home territory
• 3 AI bots spawn at other edge locations (evenly distributed)
• Minimum distance between spawn points to prevent immediate conflicts

Visual Zones:

• Neutral Territory: Light grey/white tiles (unclaimed)
• Owned Territory: Flat-shaded tiles in player/bot colors (raised slightly, y=0.1)
• Live Trails: Thin raised ribbons (y=0.2) in matching colors
• Boundary Walls: Simple white/grey walls around perimeter (height=2 units)

Edit Mode Design

Editable Properties:

• Player Color: RGB color picker for player block and territory
• Bot Count: Slider (1-5 bots)
• Bot Colors: Color pickers for each bot
• Movement Speed: Slider (0.5x - 2x, default 1x)
• Arena Size: Dropdown (Small=30x30, Medium=50x50, Large=70x70)
• Camera Angle: Slider (30° - 60°, default 45°)

Constraints:

• Colors must have sufficient contrast (minimum brightness difference)
• Speed range prevents unplayable extremes
• Arena size limited to maintain performance on mobile
• Bot count capped at 5 to prevent overcrowding

Edit Mode UI:

• Right-side panel with collapsible sections
• Live preview of changes
• "Reset to Defaults" button
• Changes apply immediately (no "Apply" button needed)

Control Design

Mobile (Primary):

• Swipe Steering: Swipe anywhere on screen to set new direction
  • Swipe up = move forward (away from camera)
  • Swipe down = move backward (toward camera)
  • Swipe left/right = turn left/right
  • Diagonal swipes = diagonal movement
  • No joystick widget—entire screen is swipe surface
• Movement: Continuous at constant speed (no acceleration/deceleration)
• Direction Change: Instant response to swipe, smooth rotation animation
• Touch Handling:
  • Track touch start position
  • Calculate swipe vector on touch move
  • Normalize to unit vector for direction
  • Ignore very small swipes (< 10px threshold)
  • Only process one touch at a time (ignore multi-touch)

Desktop (Secondary):

• WASD or Arrow Keys: Direct 8-direction movement
  • W/Up = forward, S/Down = backward
  • A/Left = left, D/Right = right
  • Diagonals = combined keys (W+A = forward-left)
• Mouse: Click and drag to set direction (similar to swipe)
• Movement speed and behavior identical to mobile

Input State Management:

• Store current direction as normalized vector
• Update player velocity each frame based on direction × speed
• Clear input state on window blur
• Prevent default browser behavior for arrow keys

No Pointer Lock Needed:

• Game doesn't require mouse look or FPS-style camera control
• Camera is fixed relative to player position

Win/Lose Conditions

Victory Condition:

• Claim 100% of arena territory
• Trigger victory screen overlay with:
  • "Victory!" message
  • Final time elapsed
  • "Play Again" button (large, thumb-friendly)

Defeat Condition:

• Player block collides with any enemy live trail
• Trigger death screen overlay with:
  • "Defeated!" message
  • Final territory % owned
  • Killer's name/color (if identifiable)
  • "Play Again" button (large, thumb-friendly)

Respawn Behavior:

• Player: Resets to new random edge location with 3x3 territory
• Bots: Respawn at random edge after 3-second delay
• All previous territory lost on death

Boundary Collision:

• Player cannot die from hitting arena walls (Paper.io 2 rule)
• Block stops or bounces slightly when hitting boundary
• Trail continues from boundary point when player turns away

Safe Zones:

• Player cannot die on their own owned territory
• Player cannot die by crossing their own completed territory
• Only live trails (incomplete loops) are lethal

AI Bot Behavior

Basic AI (First Iteration):

Each bot operates with simple state machine:

1. Expand State (default):

   • Move outward from owned territory
   • Draw small rectangular loops (5-10 tiles per side)
   • Return to territory to close loop
   • Transition to Retreat if trail length > 15 tiles

2. Retreat State:

   • Turn toward nearest owned territory
   • Move directly back to close loop
   • Transition to Expand once loop closed

3. Avoid State (triggered by proximity):

   • Detect other trails within 5-tile radius
   • Steer away from detected trails
   • Return to previous state once clear

Bot Spawn & Respawn:

• Spawn at random edge location (minimum 15 tiles from other bots)
• Start with 3x3 home territory
• Respawn 3 seconds after death at new random edge
• Lose all territory on death

AI Constraints:

• Bots follow same movement speed as player
• Bots obey same collision rules
• Bots cannot "cheat" (no perfect pathfinding or omniscience)

Future AI Enhancements (Deferred):

• Trail hunting: actively seek player's live trail when close
• Strategic retreats: calculate risk vs. reward for loop size
• Territorial defense: prioritize reclaiming lost territory
• Difficulty levels: adjust reaction time and decision-making

HUD Design

Top-Center: Territory Counter

• Large, bold percentage display (e.g., "34%")
• Font size: 48px (easily readable on mobile)
• Color: White with dark outline for contrast
• Updates in real-time as territory changes
• Position: 20px from top, centered horizontally

Top-Right: Mini Leaderboard

• Compact vertical list showing:
  • Top 3 players/bots by territory %
  • Player's rank if not in top 3
• Each entry shows:
  • Colored square (player/bot color)
  • Name (e.g., "You", "Bot 1")
  • Percentage bar (horizontal, filled with player color)
  • Percentage number
• Font size: 24px
• Position: 20px from top and right
• Semi-transparent dark background for readability
• Updates every 0.5 seconds (not every frame, for performance)

Death Screen (Full-Screen Overlay):

• Semi-transparent dark background (rgba(0,0,0,0.8))
• Centered content:
  • "Defeated!" heading (72px, red)
  • Final territory % (48px, white)
  • "Play Again" button (200x80px, bright color, 36px text)
• Button positioned in lower third (thumb-friendly)
• Fade-in animation (0.3s)

Victory Screen (Full-Screen Overlay):

• Similar layout to death screen
• "Victory!" heading (72px, gold/yellow)
• Final time and 100% display
• "Play Again" button (same styling)

No Pause Menu:

• Matches are short and continuous
• No pause functionality in first iteration

Technical Implementation Notes

Three.js Setup:

• Use THREE.WebGLRenderer with antialias: true
• THREE.PerspectiveCamera with FOV=50, positioned for isometric view
• THREE.Scene with ambient + directional lighting
• Render loop at 60fps target

Territory System:

• 2D array (50x50) tracking tile ownership (0=neutral, 1=player, 2-6=bots)
• Separate array for live trail tiles
• Flood-fill algorithm for loop closure (iterative, not recursive, to avoid stack overflow)
• Update tile colors via material changes (efficient batching)

Collision Detection:

• Check player position against all enemy trail positions each frame
• Use simple distance check (< 0.5 units = collision)
• Boundary check: clamp player position to arena bounds

Performance Optimization:

• Use THREE.InstancedMesh for tiles (single draw call for all tiles of same color)
• Update only changed tiles, not entire grid
• Throttle leaderboard updates to 0.5s intervals
• Use object pooling for trail segments

Camera Follow:

• Lerp camera position toward player position each frame
• Lag factor: 0.1 (smooth but responsive)
• Maintain fixed angle and distance from player

Art Style and Visual Theme

Overall Aesthetic:

• Clean, minimalist 3D design
• Bright, saturated colors on neutral background
• Flat-shaded polygons (no textures or gradients)
• Inspired by modern mobile games (Paper.io, Voodoo games)
• High contrast for clarity on mobile screens

Color Palette:

• Neutral Arena: Light grey (#E0E0E0) or white (#FFFFFF)
• Player: Bright blue (#2196F3) - default, customizable
• Bots: Bright distinct colors (red #F44336, green #4CAF50, yellow #FFEB3B, purple #9C27B0, orange #FF9800)
• Boundary Walls: Medium grey (#BDBDBD)
• UI Elements: White text with dark outlines, semi-transparent dark backgrounds

3D Asset Specifications:

• Blocks (Player/Bots): 0.8x0.8x0.8 unit cubes, flat-shaded, slightly rounded edges
• Tiles: 1x1x0.1 unit flat planes, raised 0.1 units when owned
• Trails: 0.3-unit wide ribbons, 0.2 units tall, flat-shaded
• Walls: 1-unit wide, 2-units tall, simple box geometry

Lighting:

• Ambient light: soft white (#FFFFFF, intensity 0.6)
• Directional light: from above-right (#FFFFFF, intensity 0.8)
• No shadows in first iteration (performance consideration)

Camera Settings:

• Position: 30 units above and behind player, 45° angle
• Look-at: player position
• FOV: 50° (not too wide, not too narrow)

Animation & Polish:

• Smooth block rotation when changing direction (0.2s ease)
• Tile color transitions when claimed (0.3s ease)
• Camera follow with slight lag (lerp factor 0.1)
• Death animation: block shrinks and fades (0.5s)
• Victory animation: confetti particles (deferred to future iteration)

Rendering Approach:

• All 3D elements rendered via Three.js
• HUD rendered as HTML overlay (positioned absolutely over canvas)
• No CSS/Canvas for game objects—pure Three.js for consistency