Square Stacker - Free Puzzle Strategy Game

Seele01-Flash
By
Square Stacker is a strategic puzzle game that challenges you to stack colored squares and create matches of three in a row. With multiple ways to score and endless strategic possibilities, this free browser game offers addictive puzzle gameplay for all skill levels.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Square Stacker". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: Minimalist "Cute" aesthetic using a vibrant, saturated color palette (Cyan, Magenta, Lime Green, Orange) against a dark matte grey background (Hex: #333333). * **Camera**: Use an `OrthographicCamera` fixed at a high angle (isometric view) to ensure the grid is readable without perspective distortion. * **Grid**: A 3x3 base board. Each cell should be a slightly indented dark square to indicate drop zones. * **Game Pieces (The Stacks)**: * Use `ExtrudedGeometry` to create **Hollow Square Frames** (concentric squares) rather than solid blocks. This allows players to see a "Small" square nested inside a "Large" square. * **Sizes**: Three distinct sizes (Large, Medium, Small). * **Material**: `MeshLambertMaterial` or `MeshToonMaterial` for a soft, plastic toy look. * **Optimization**: Use `InstancedMesh` if possible for repeated geometry. Keep polygon count low (Low-poly) for smooth mobile performance. Shadow casting should be minimal or baked to save battery. ### 2. Audio Requirements * **BGM**: A relaxing, looping "Lo-fi Hip Hop" or "Chill Electronic" track. No distracting vocals. * **Sound Effects (SFX)**: * **Pickup**: A soft "pop" or suction sound when lifting a piece. * **Place**: A solid "thud" or plastic click when a piece snaps into the grid. * **Match/Clear**: A satisfying, ascending chime or "ding" chord. * **Game Over**: A low, gentle buzzer. ### 3. Gameplay Loop * **The Board**: A 3x3 grid. * **The Hand**: A spawn area at the bottom of the screen displaying 3 randomly generated pieces. A "piece" can be a single square or a pre-stacked combination (e.g., a Large Red Frame containing a Small Blue Frame). * **Mechanic**: * The player drags a piece from the "Hand" to a grid cell. * **Stacking Rule**: A piece can be placed on a grid cell if the specific size slots are unoccupied. (e.g., You can place a Small Blue square into a cell that already has a Large Red square, but you cannot place it if the cell already has a Small square). * **Scoring (The Match)**: * **Line Match**: Align 3 squares of the **same color** horizontally, vertically, or diagonally. (Matches are checked based on the top-most visible color in that size slot). * **Full Stack**: (Optional bonus) Completing a cell with all 3 sizes (Large + Medium + Small) clears that cell. * **Clearing**: When a match occurs, the involved squares shrink/implode and disappear, freeing up space. * **Game Over**: When the player cannot place any of the 3 available pieces into any slot on the grid. ### 4. Mobile Controls & Interaction * **Input**: Support both Mouse (Desktop) and Touch (Mobile) events (`touchstart`, `touchmove`, `touchend`). * **Raycasting**: Use a Raycaster to detect which grid cell is under the finger during the drag phase. * **Visual Feedback**: * **Highlight**: When dragging a piece over a valid grid cell, the cell should glow or the piece should "snap" visually to the center of the cell (ghosting) before releasing. * **Invalid Move**: If a move is invalid, the piece should snap back to the bottom tray with a spring animation. * **UI Layout**: * **Orientation**: Portrait Mode (Vertical) preferred. * **Top**: Score counter (large, rounded font). * **Middle**: The 3x3 Game Board (centered). * **Bottom**: The "Hand" / Spawn area (must be at least 20% of screen height to allow easy thumb access). * **Responsiveness**: Ensure the canvas resizes correctly on `window.resize` and prevents default browser scrolling behaviors (rubber-banding). Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About Square Stacker

Square Stacker is an engaging puzzle strategy game that combines the satisfaction of stacking with the challenge of pattern matching. With a solid 4.2/5 rating from players, this game offers a perfect blend of simple mechanics and deep strategic thinking. Your mission is to stack various colored and shaped squares to create winning combinations of three in a row.

Core Features

Strategic Puzzle Gameplay

Square Stacker stands out with its multi-dimensional approach to puzzle solving. You can achieve victory through:

  • Color Matching : Stack three squares of the same color in any direction
  • Shape Matching : Align three squares of identical shapes for points
  • Multiple Scoring Angles : Score horizontally, vertically, diagonally, or by stacking height
  • Nested Stacking : Place squares within each other for creative combinations

Free and Accessible Gaming

  • Completely Free : No downloads, purchases, or subscriptions required
  • Instant Play : Start playing immediately in your browser
  • Cross-Platform Support : Perfect compatibility with mobile devices and desktop computers
  • HTML5 Technology : Smooth performance across all modern browsers

Easy to Learn, Challenging to Master

The game features intuitive controls that anyone can pick up quickly, yet the strategic depth keeps experienced puzzle enthusiasts engaged. Each move requires thinking several steps ahead, identifying patterns, and spotting connection opportunities.

Game Mechanics

Stacking System

The core gameplay revolves around intelligently placing squares from your selection area onto the game board. You have access to three squares at any time, giving you strategic choices for each placement.

Multiple Victory Conditions

Unlike traditional match-3 games, Square Stacker offers numerous ways to score: - Horizontal Lines : Three matching squares in a row - Vertical Columns : Three matching squares stacked vertically
- Diagonal Matches : Three squares aligned diagonally - Height Stacking : Three squares stacked directly on top of each other

Operation Guide

Mobile Controls

  • Touch and Drag : Select any of the three available squares from the side panel
  • Tap Placement : Touch the desired location on the game board to place your square
  • Intuitive Interface : Large, finger-friendly controls designed for mobile gameplay

Desktop Controls

  • Mouse Selection : Click on one of the three squares in the selection area
  • Mouse Placement : Click on your desired position on the game board
  • Smooth Navigation : Responsive mouse controls for precise placement

Why Play Square Stacker

Perfect for Puzzle Lovers

If you enjoy games that challenge your strategic thinking and pattern recognition skills, Square Stacker delivers exactly what you're looking for. The game rewards both quick thinking and careful planning.

Stress-Free Gaming Experience

  • No Time Pressure : Take your time to plan each move carefully
  • Relaxing Gameplay : Enjoy a calm, meditative puzzle experience
  • Progressive Difficulty : The challenge naturally increases as you improve

Ideal for All Skill Levels

Whether you're a casual player looking for quick entertainment or a puzzle enthusiast seeking deep strategic gameplay, Square Stacker adapts to your playing style. The simple rules make it accessible to beginners, while the strategic depth provides lasting appeal for experienced players.

Anytime, Anywhere Gaming

With full mobile support and browser-based gameplay, you can enjoy Square Stacker during commutes, breaks, or whenever you have a few minutes to spare. No installation required – just open your browser and start playing!

Frequently Asked Questions (FAQ)