Coffee Match: Block Puzzle - Free Online Sorting Game

Seele01-Flash
By
Coffee Match: Block Puzzle is an addictive color-sorting puzzle game where you match coffee cups to their trays against the clock. Featuring vibrant graphics, strategic gameplay, and relaxing coffee themes.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Coffee Match: Block Puzzle". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style:** Casual, bright, and semi-skeuomorphic. The aesthetic should resemble a clean, wooden coffee shop table. * **Camera:** Use an **Orthographic Camera** angled at approx 45-60 degrees (Isometric view) to ensure the grid is easy to read without perspective distortion. * **The Board (Grid):** A dark wooden or chocolate-colored square tray (e.g., 6x6 or 8x8 grid) recessed slightly into the light wood table background. * **The Blocks (Trays):** * Use `RoundedBoxGeometry` to create "Polyomino" shapes (Tetris-like shapes: L-shape, Square, I-shape). * Blocks must have distinct colors: Red, Blue, Green, Purple, Orange, Yellow. * **Crucial Detail:** Each unit of a block has a circular indentation (cup holder). * **Material:** Plastic-like `MeshStandardMaterial` with moderate roughness (0.4) and metalness (0.1). * **The Cups:** * Simple low-poly cylinders with a white "latte art" top texture. * Cups appear on "Conveyor Belts" positioned at the edges of the grid. * Cups are color-coded to match the blocks. * **Lighting:** Soft AmbientLight (0.6 intensity) combined with a DirectionalLight casting soft shadows to give depth to the holes and cups. * **Mobile Optimization:** Use `InstancedMesh` for the cups if possible. Keep polygon count low per object. Avoid expensive post-processing; rely on clean textures and standard materials. ### 2. Audio Requirements * **Background Music (BGM):** Upbeat, looping "Coffee Shop Bossa Nova" or "Acoustic Guitar" track. It should be relaxing but have a rhythmic beat to match the "fast-paced" sorting. * **Sound Effects (SFX):** * **Slide:** A wooden "clack" or smooth friction sound when moving blocks. * **Fill:** A satisfying "pop" or liquid "slurp" sound when a cup travels from the conveyor into a tray slot. * **Match/Clear:** A cash register "ding" or a high-pitched "chime" when a fully filled tray vanishes. * **Error:** A dull "thud" if trying to move a locked block or mismatched color. * **Time Warning:** A ticking clock sound in the last 10 seconds. ### 3. Gameplay Loop * **Setup:** The grid contains several colored blocks (Trays) with empty slots. Conveyor belts at the grid edges (Top, Right, Bottom, Left) hold queues of colored Coffee Cups. * **Mechanic - Sliding:** The player can drag blocks within the grid. This is a "sliding block" mechanic—blocks can only move into empty grid spaces (not overlapping). * **Mechanic - Filling:** When a block's empty slot aligns directly with a conveyor belt arrow: 1. The Cup moves from the belt into the block's slot. 2. **Constraint:** The Cup color must match the Block color (optional complexity, or just match any empty slot for simpler versions, but "Sorting" implies color matching). * **Clearing:** Once all slots in a specific Block are filled with cups, the Block highlights, scales up slightly, and disappears (ships out), freeing up grid space. * **Win Condition:** Clear all incoming cups or achieve a target score before time runs out. * **Fail Condition:** The timer reaches zero, or the grid becomes deadlocked (no moves possible to accept new cups). * **Boosters:** Implement logic for a "Freeze Time" (pauses timer for 5s) and "Shuffle" (rearranges blocks on the grid). ### 4. Mobile Controls & Interaction * **Touch Input (Raycaster):** Implement a robust Raycaster for touch events. * `touchstart`: Detect which block is touched. Highlight it. * `touchmove`: Map screen delta movement to the 3D X/Z plane. The block should follow the finger relative to the grid. * `touchend`: Snap the block to the nearest valid grid coordinate. If invalid (overlapping), snap back to original position. * **Orientation:** **Portrait Mode** (Vertical). The grid sits in the center, with UI (Timer, Score) at the top and Boosters at the bottom for thumb accessibility. * **Visual Feedback:** * When dragging, the block should lift slightly (y-axis) to indicate it's active. * Valid move shadow: Project a faint shadow on the grid showing where the block will snap. * **Haptics:** Trigger `navigator.vibrate(10)` on a successful snap or cup fill event for tactile feedback. * **UI:** Buttons (Pause, Boosters) must be at least 44x44 pixels effectively for hit-testing. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

Coffee Match: Block Puzzle is a captivating sorting puzzle game that combines fast-paced action with relaxing coffee shop vibes. This colorful block puzzle challenges you to match coffee cups to their corresponding trays before time runs out. With its intuitive drag-and-drop mechanics and progressively challenging levels, it's the perfect brain training game for puzzle enthusiasts of all ages.

The game features a delightful coffee theme with warm, inviting graphics that create a cozy atmosphere while you solve increasingly complex sorting challenges. Each level presents a new puzzle configuration, keeping the gameplay fresh and engaging.

Core Features

Strategic Color Matching

The core gameplay revolves around color-coded sorting mechanics . You'll need to identify matching colors and strategically move blocks to create perfect matches. Each coffee cup must find its way to the corresponding tray color, requiring both quick thinking and spatial awareness.

Time-Based Challenges

Every level comes with a ticking clock that adds excitement and urgency to your sorting decisions. The time pressure creates an adrenaline rush while maintaining the game's relaxing coffee shop atmosphere.

Helpful Power-Ups

When puzzles get tough, utilize clever boosters and power-ups : - Time Freeze : Pause the countdown to plan your next moves carefully - Shuffle : Rearrange blocks when you're stuck in a difficult position - Hint System : Get guidance on optimal sorting strategies

Progressive Difficulty

Start with simple 3x3 grids and advance to complex multi-layered puzzles. Each level introduces new challenges, from additional colors to more intricate tray arrangements, ensuring long-term engagement.

Gameplay Mechanics

The puzzle mechanics are elegantly simple yet deeply strategic. You'll slide and arrange colorful blocks representing different coffee types - from espresso browns to latte creams. The goal is creating complete color matches between cups and their designated trays.

Spatial reasoning plays a crucial role as you must plan several moves ahead. Sometimes you'll need to temporarily move blocks to less optimal positions to create space for the perfect match.

Operation Guide

Controls are designed for maximum accessibility across all devices:

  • Drag and Drop : Click and hold any block, then drag it to your desired position
  • Mouse Interaction : Left-click to select blocks and interact with game interface elements
  • Touch Controls : On mobile devices, tap and swipe for smooth block movement
  • Menu Navigation : Use mouse clicks to access settings, boosters, and level selection

The intuitive control system ensures players can focus on puzzle-solving rather than struggling with complicated inputs. Whether you're playing on desktop or mobile, the responsive controls provide a seamless gaming experience.

Why Play This Game

Coffee Match: Block Puzzle stands out in the crowded puzzle game market for several compelling reasons:

Perfect Stress Relief

The combination of challenging gameplay and soothing coffee aesthetics creates an ideal stress-relief experience. The warm color palette and gentle sound effects help you unwind while keeping your mind sharp.

Brain Training Benefits

Regular play improves: - Pattern recognition skills - Spatial awareness and planning - Quick decision-making under pressure - Color differentiation abilities - Strategic thinking and foresight

Accessibility and Convenience

As a free browser-based game , there are no barriers to entry. No downloads, installations, or account creation required - simply open your browser and start playing instantly.

Mobile-Optimized Experience

The game's responsive design ensures perfect gameplay across all screen sizes, from desktop monitors to smartphone screens. Touch controls are specifically optimized for mobile play.

Endless Replayability

With hundreds of unique level configurations and randomly generated puzzles, you'll never run out of new challenges to tackle.

Frequently Asked Questions (FAQ)