Trap the Cat

Seele01-Flash
By
Trap the Cat is an engaging strategic puzzle game where you must outsmart a clever cat trying to escape. Click hexagonal tiles to create barriers and catch the cat before it reaches the edge.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Trap the Cat". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: Clean, low-poly isometric aesthetic. The game board is a honeycomb grid (hexagonal tiling). * **Grid Assets**: Use `THREE.CylinderGeometry` (with 6 radial segments) to create extruded hexagonal tiles. * **Walkable Tiles**: Bright lime green (#90EE90). * **Obstacle/Trapped Tiles**: Dark cyan or slate blue (#4682B4) with a slightly taller extrusion height to visually indicate a barrier. * **The Cat**: Create a procedural character using basic primitives (a `Group` containing a Sphere for the head, two small Cones for ears) to avoid external asset dependencies. The cat should be white/orange. * **Background**: A soft, off-white or cream background (#FDFDFD) to maintain high contrast for outdoor mobile visibility. * **Optimization**: Use `THREE.InstancedMesh` for the hexagonal grid to ensure 60FPS performance on mobile devices, as there will be 121+ tiles (11x11 grid). ### 2. Audio Requirements * **BGM**: A "Sneaky" and lighthearted tune using pizzicato strings or light woodwinds (placeholder logic or simple oscillator synthesis). * **Sound Effects**: * **Tap/Block**: A "pop" or "stone thud" sound when the player clicks a tile. * **Cat Move**: A soft "whoosh" or high-pitched "meow" when the cat jumps to the next tile. * **Win**: A cheerful major-chord jingle. * **Lose**: A comical "slide whistle" or sad chord. ### 3. Gameplay Loop * **Grid Setup**: Generate an 11x11 hexagonal grid. At the start, randomly turn 10-15 tiles into obstacles (Dark Cyan) to create variety. Place the Cat in the exact center. * **Turn-Based Logic**: * **Player Turn**: The player taps a Green tile to turn it into an Obstacle (Dark Cyan). This ends the player's turn. * **Cat Turn**: Immediately after the player, the Cat moves one step to an adjacent Green tile. * **Cat AI**: The cat must use a Breadth-First Search (BFS) or basic pathfinding algorithm to find the shortest path to the grid edge. If multiple paths exist, choose random. If no path exists, move to any available neighbor. * **Win Condition**: The cat is completely surrounded by obstacles and has no moves left. Display "You Caught It!" text. * **Loss Condition**: The cat reaches any tile on the outermost edge of the grid. Display "Cat Escaped!" text. * **Reset**: The game should automatically offer a restart option after the game ends. ### 4. Mobile Controls & Interaction * **Camera**: Use an `OrthographicCamera` positioned isometrically (looking down at a 45-degree angle) to ensure the grid geometry is clear and touch targets are consistent. * **Touch Input**: Implement `THREE.Raycaster` for touch/mouse detection. * Ensure the raycast target area for each hexagon is accurate to prevent "fat finger" errors. * **Responsive Layout**: * The camera zoom must dynamically adjust based on `window.innerWidth` so the entire 11x11 grid is visible on both Portrait (vertical) and Landscape (horizontal) mobile screens without scrolling. * **Visual Feedback**: * When the cat moves, animate the position using simple interpolation (Lerp) rather than teleporting. * When a player taps a tile, apply a small scale-down/scale-up animation (bounce) to the tile to confirm input. * **UI**: Add a minimal HTML overlay for the "Reset" button placed at the bottom center of the screen (Thumb Zone), styled with CSS to be large (at least 48px height) for easy tapping. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

Trap the Cat is a captivating HTML5 puzzle game that challenges your strategic thinking and planning skills. Based on the classic "Circle the Cat" concept, this modern remake offers an enhanced gaming experience with improved graphics and multiple play modes. The objective is simple yet challenging: prevent a cunning cat from escaping by strategically placing barriers on a hexagonal grid.

The game features adorable 2D graphics with a cute white cat as the main character, set against a vibrant green hexagonal playing field. What makes this puzzle particularly engaging is the cat's intelligent AI behavior - it actively seeks the shortest path to freedom, making each game a unique strategic challenge.

Core Features

Multiple Game Modes

Trap the Cat offers versatile gameplay options to suit different preferences:

  • Player vs Cat Mode : Test your strategic skills against the AI cat
  • Play as the Cat : Switch perspectives and try to escape as the cat
  • Auto-play Mode : Watch the game play itself to learn optimal strategies
  • Free to Play : Complete game available at no cost through your web browser

Strategic Puzzle Mechanics

The game operates on a hexagonal grid system where each move matters. The cat will always choose the most efficient escape route, forcing players to think several moves ahead. Success requires:

  • Spatial reasoning to predict the cat's movement patterns
  • Strategic planning to create effective barrier layouts
  • Quick decision-making as the cat moves after each player action
  • Pattern recognition to identify optimal trapping configurations

Cross-Platform Compatibility

Built with HTML5 technology, Trap the Cat works seamlessly across all modern devices and browsers. Whether you're on a desktop computer, laptop, tablet, or smartphone, you can enjoy the same smooth gameplay experience without any downloads or installations.

Gameplay Mechanics

The hexagonal grid creates unique strategic possibilities compared to traditional square-based puzzle games. Each hexagon connects to six neighbors, providing the cat with multiple escape routes while giving players various blocking options. The challenge lies in predicting which path the cat will choose and positioning barriers accordingly.

The cat's AI uses pathfinding algorithms to always select the shortest route to the edge. This means that blocking one path may redirect the cat to an entirely different escape route, requiring players to think dynamically and adapt their strategies in real-time.

Operation Guide

Trap the Cat features intuitive one-click controls that make it accessible to players of all ages:

  • Click any green hexagon to place a barrier (hexagon turns blue)
  • Plan your moves carefully - each click allows the cat to move one step
  • Watch the cat's position and predict its next move
  • Create strategic barriers to funnel the cat into a trap
  • Win by completely surrounding the cat with no escape routes

The game requires no complex key combinations or timing-based actions, making it perfect for casual gaming sessions while still providing depth for strategic puzzle enthusiasts.

Why Play This Game

Perfect for Puzzle Lovers : If you enjoy brain teasers and strategic thinking games, Trap the Cat offers the perfect blend of simplicity and complexity. The rules are easy to understand, but mastering the strategy takes practice and skill.

Stress-Free Gaming : Unlike action games, there's no time pressure or fast reflexes required. Take your time to analyze the board and plan your moves carefully.

Educational Value : The game helps develop logical thinking, spatial reasoning, and strategic planning skills, making it both entertaining and mentally stimulating.

Instant Accessibility : No downloads, registrations, or waiting - simply open your browser and start playing immediately on any device.

Replay Value : Each game presents a unique challenge as the cat's starting position and your initial moves create different scenarios every time.

Frequently Asked Questions (FAQ)