Cyber Block PopAI · Claude 3.5

Core Game Loop and Mechanics

Block Grid Classic is a relaxing puzzle game where players strategically place blocks on an 8×8 grid to clear lines and maximize their score.

Moment-to-Moment Gameplay

1. Player sees three fixed-shape blocks at the bottom of the screen
2. Player drags one block and places it on the grid (blocks cannot be rotated)
3. When a full row or column is completed, it clears automatically with a satisfying animation
4. Player receives points for the clear (more points for multiple simultaneous clears)
5. After placing all three blocks, three new blocks appear
6. Process repeats

Progression and Engagement

• Score System:
  • Single line clear: 100 points
  • Double clear (2 lines at once): 300 points (150 per line)
  • Triple clear: 600 points (200 per line)
  • Quad clear: 1000 points (250 per line)
  • Combo multiplier increases score for consecutive clears without placing a block that doesn't clear
• High Score: Players try to beat their personal best
• Strategic Depth: Planning ahead for combo opportunities and managing limited space

Win/Lose Conditions

• No Win Condition: Endless gameplay
• Lose Condition: Game ends when none of the three available blocks can fit anywhere on the grid
• Game Over Screen: Shows final score and high score, with restart button

What Makes It Compelling

• No Time Pressure: Players can think as long as they want
• Strategic Planning: Balancing immediate clears vs. setting up future combos
• Satisfying Feedback: Clear animations and score popups reward good plays
• "One More Game" Factor: Quick sessions with clear improvement path

Starting Scope

The first iteration will implement a complete, polished core experience:

Must Have (First Iteration):

• 8×8 grid with clean visual design
• Block generation system with 7 classic block shapes (1×1, 2×1, 3×1, 2×2, L-shapes, T-shape, etc.)
• Three blocks always available at bottom
• Drag-and-drop placement (touch and mouse)
• Row and column clearing with smooth animation
• Score system with combo multipliers
• High score persistence (using window.gameConfig)
• Game over detection and restart
• Clean, minimalist UI with score display

Future Enhancements (Later Iterations):

• Additional block shapes
• Power-ups or special blocks
• Daily challenges
• Color themes
• Sound toggle
• Undo last move
• Hint system

Game Perspective

Fixed-screen perspective with a top-down view of the 8×8 grid. The entire game fits on one screen with no scrolling needed.

Game World and Level Design

Layout (720×1280 portrait)

• Top Section (0-200px): Score display and game info
  • Current score (large, prominent)
  • High score (smaller, secondary)
  • Combo indicator (appears during combos)
• Middle Section (200-920px): 8×8 game grid (640×640px centered)
  • Grid cells are 80×80px each
  • Clean borders between cells
  • Subtle shadow/depth for placed blocks
  • Clear visual feedback for valid/invalid placement
• Bottom Section (920-1280px): Block preview area
  • Three blocks displayed horizontally
  • Each block in its own container (approximately 200×200px area)
  • Blocks are draggable from this area

Grid Design

• 8×8 grid of equal-sized cells
• Neutral background color (light gray or off-white)
• Subtle grid lines for clarity
• Placed blocks have solid colors with slight gradient/shadow
• Clearing animation: fade out with particle effect

Block Shapes (7 Standard Shapes)

All blocks are composed of 1-5 cells in fixed arrangements:

1. Single: 1×1 (1 cell)
2. Domino: 2×1 (2 cells horizontal)
3. Trio: 3×1 (3 cells horizontal)
4. Small Square: 2×2 (4 cells)
5. L-Shape: 3 cells in L formation
6. T-Shape: 3 cells in T formation
7. Long Bar: 4×1 or 5×1 (4-5 cells horizontal)

Each block shape comes in a different color from a clean, pleasant palette.

Edit Mode Design

Edit mode allows players to customize the game experience while maintaining core gameplay integrity.

Editable Properties

Visual Customization:

• Grid Colors:
  • Background color (default: light gray #F5F5F5)
  • Grid line color (default: medium gray #CCCCCC)
  • Constraint: Must maintain sufficient contrast
• Block Colors:
  • Color palette for the 7 block types
  • Default: Clean, distinct colors (blue, green, red, yellow, purple, orange, pink)
  • Constraint: Colors must be visually distinct from each other
• UI Theme:
  • Score text color
  • Background color
  • Constraint: Text must be readable

Gameplay Parameters:

• Scoring Multipliers:
  • Base score per line (default: 100)
  • Combo multiplier increase (default: 1.5x per combo level)
  • Max combo level (default: 5)
  • Constraint: Values between 50-500 for base, 1.0-3.0 for multiplier
• Block Distribution:
  • Probability weights for each block shape
  • Default: Equal probability for all shapes
  • Constraint: All weights must be positive numbers

Difficulty Tweaks:

• Grid Size:
  • Options: 6×6, 7×7, 8×8, 9×9, 10×10
  • Default: 8×8
  • Constraint: Must be between 6 and 10
• Blocks Per Turn:
  • Number of blocks offered (default: 3)
  • Constraint: 2-4 blocks

Config Structure

window.gameConfig = {
  gridSize: 8,
  blocksPerTurn: 3,
  colors: {
    gridBackground: "#F5F5F5",
    gridLines: "#CCCCCC",
    blocks: ["#4A90E2", "#50C878", "#E74C3C", "#F39C12", "#9B59B6", "#FF6B6B", "#FF69B4"]
  },
  scoring: {
    baseScore: 100,
    comboMultiplier: 1.5,
    maxComboLevel: 5
  },
  blockWeights: {
    single: 1,
    domino: 1,
    trio: 1,
    smallSquare: 1,
    lShape: 1,
    tShape: 1,
    longBar: 1
  },
  highScore: 0
}

Control Design

Mobile (Touch) Controls

• Drag and Drop:
  • Touch a block in the preview area to pick it up
  • Visual feedback: Block follows finger, slightly enlarged and elevated (shadow effect)
  • Drag over grid to see placement preview (ghost outline)
  • Preview shows green if valid placement, red if invalid
  • Release to place (if valid) or return to preview area (if invalid)
• Touch Handling:
  • Track touch ID to prevent interference between multiple touches
  • Only one block can be dragged at a time
  • Prevent page scrolling while dragging

Desktop (Mouse/Keyboard) Controls

• Mouse Drag and Drop:
  • Click and hold on a block to pick it up
  • Same visual feedback as touch (enlarged, shadow, ghost preview)
  • Release mouse to place or cancel
  • Cursor changes to indicate draggable elements
• No Keyboard Controls: Game is purely mouse-driven on desktop for simplicity

Implementation Details

• Drag State Management:
  • Track: isDragging, draggedBlock, dragStartPos, currentDragPos
  • Calculate grid position from drag position
  • Show ghost preview at snapped grid position
• Placement Validation:
  • Check if all cells of the block shape are within grid bounds
  • Check if all cells are empty
  • Provide immediate visual feedback (green/red preview)
• Smooth Animations:
  • Block pickup: scale up to 1.1x with smooth transition
  • Block placement: snap to grid with ease-out animation
  • Invalid placement: shake animation and return to preview area

Art Style and Visual Theme

Overall Style

Clean, minimalist, universally appealing design that works across all cultures and age groups. Think modern casual mobile games with a timeless quality.

Color Palette

• Background: Soft, neutral tones (off-white, light gray)
• Grid: Subtle borders, not too prominent
• Blocks: Bright but not garish colors with slight gradients for depth
  • Blue (#4A90E2)
  • Green (#50C878)
  • Red (#E74C3C)
  • Yellow (#F39C12)
  • Purple (#9B59B6)
  • Coral (#FF6B6B)
  • Pink (#FF69B4)
• UI Elements: Dark gray text on light backgrounds for readability
• Accents: Gold/yellow for score highlights and combos

Visual Elements

• Blocks:
  • Solid colors with subtle gradient (lighter at top)
  • Soft rounded corners (4-6px border radius)
  • Slight drop shadow for depth
  • Clean, geometric shapes
• Grid:
  • Light background
  • Thin, subtle grid lines
  • Slight inner shadow for depth
• Effects:
  • Clearing animation: Gentle fade with small particle burst
  • Score popup: Numbers float up and fade
  • Combo indicator: Pulsing glow effect
  • Invalid placement: Quick shake animation

Typography

• Score: Large, bold, sans-serif font (60-80px)
• High Score: Medium, regular weight (24-30px)
• UI Text: Clean, readable sans-serif (18-24px)

Asset Strategy

• Code-Rendered: Grid, blocks, UI elements (using CSS/Canvas)
• Generated Assets:
  • Background texture (optional, subtle)
  • Particle effects for clearing
  • Game over screen decoration
  • Sound effects