Gem Slide - Free Match-3 Puzzle Game

Seele01-Flash
By
Gem Slide is a captivating match-3 puzzle game where you slide colorful gems to create powerful combinations. With its intuitive sliding mechanics and rewarding gameplay, it's perfect for puzzle lovers seeking quick entertainment.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Gem Slide". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: "Futuristic Pop" aesthetic based on the logo. Use a bright, high-contrast color palette (Cyan, Magenta, vibrant Yellow, Lime Green). The look should be 2.5D (3D objects on a static 2D plane). * **The Board**: Create an 8x8 transparent grid centered on the screen. Behind the grid, render a slowly rotating, low-poly skybox or a gradient background (Deep Purple to Light Blue) to simulate a floating environment. * **Gem Models**: Use low-poly 3D primitives for gems to ensure high performance on mobile (max 200 faces per gem). * Red: Octahedron (Diamond shape) * Blue: Icosahedron (Sphere-like) * Green: Cube (Box) * Yellow: Tetrahedron (Pyramid) * Purple: Dodecahedron * **Materials**: Use `MeshPhysicalMaterial` with high roughness and metalness to simulate a "plastic/shiny toy" look. Add a subtle rotation animation to all gems when idle. * **Effects**: Simple particle explosions (using `THREE.Points`) when gems are matched. A glow effect (emissive color) when a gem is selected. ### 2. Audio Requirements * **BGM**: A relaxing but upbeat "Synth-pop" or "Electronic Lounge" track. It should be loopable and not distracting. * **Sound Effects (SFX)**: * *Select*: A high-pitched "blip". * *Swap*: A "whoosh" sliding sound. * *Match/Clear*: A satisfying "glass shattering" or digital "crunch" sound. * *Combo/Multi-match*: An ascending chime scale (C-E-G-C) to reward players for matching 4 or 5 gems. ### 3. Gameplay Loop * **Initialization**: Generate an 8x8 grid filled with random gems. Ensure no matches exist at the start. * **Core Mechanic**: 1. **Selection**: Player selects one gem. 2. **Swap**: Player selects an adjacent gem (Up/Down/Left/Right). The two gems visually swap positions (use a tweening library like GSAP for smooth animation). 3. **Validation**: Check if the swap results in a match of 3 or more identical gems in a row or column. 4. **Resolution**: * *If Match*: The matched gems shrink and disappear. The score increases (Base points for 3, exponential multiplier for 4 or 5). Gems above fall down to fill empty spaces. New random gems spawn at the top and fall in. Check for matches again (Cascade effect). * *If No Match*: The gems swap back to their original positions. * **Winning/Losing**: This is an endless high-score chaser. Display the current Score at the top of the UI. ### 4. Mobile Controls & Interaction * **Input Handling**: Implement a unified Raycaster system handling both `touchstart/touchmove/touchend` and `mousedown/mousemove/mouseup`. * **Swipe Detection**: * Detect the start touch position on a gem. * Detect the end touch position. * Calculate the Delta X and Delta Y. If the swipe distance exceeds a threshold (e.g., 30px), trigger the swap in the dominant direction. * **Screen Adaptation**: * Force the camera to fit the entire 8x8 grid within the screen width (for portrait) or height (for landscape). * The game must be playable with one hand in Portrait mode. * **Feedback**: * **Haptic**: Trigger `navigator.vibrate(50)` on a successful match. * **Visual**: Highlight the selected gem with a white outline or scale it up by 1.1x. * **CSS constraints**: Add `user-select: none;` and `touch-action: none;` to the canvas container to prevent scrolling or zooming the webpage while playing. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About Gem Slide

Gem Slide is an engaging free-to-play puzzle game that puts a fresh spin on the classic match-3 genre. With an impressive 4.4/5 rating from players, this colorful gem-matching adventure challenges you to slide gems in all directions to create spectacular combinations. Whether you're looking for a quick brain teaser or an extended puzzle session, Gem Slide delivers satisfying gameplay that keeps you coming back for more.

Core Features

Revolutionary Sliding Mechanics

Unlike traditional match-3 games where gems fall from above, Gem Slide lets you slide gems in any direction - left, right, up, or down. This unique mechanic opens up countless strategic possibilities and makes every move feel intentional and rewarding.

Multi-Gem Matching System

While matching three gems is the foundation, Gem Slide rewards ambitious players who can: - Match 4 gems for enhanced scoring - Match 5+ gems for explosive bonus effects - Create simultaneous matches of different gem colors for maximum points

Completely Free Experience

  • No download required - play instantly in your browser
  • Zero cost - enjoy all features without any payment
  • No ads interrupting gameplay - focus purely on puzzle-solving
  • Cross-platform compatibility - seamless play on any device

Strategic Depth

This isn't just about quick matches - Gem Slide rewards: - Pattern recognition skills - Forward thinking and planning multiple moves ahead - Spatial awareness for optimal gem positioning - Combo creation for massive score multipliers

Gameplay Mechanics

How to Create Matches

Success in Gem Slide comes from understanding the sliding system: 1. Identify potential matches by scanning the gem grid 2. Plan your slide direction - gems move until they hit an obstacle 3. Create chain reactions by setting up multiple matches 4. Maximize scoring by matching 4+ gems simultaneously

Scoring System

Your performance is measured by: - Basic matches (3 gems) provide foundation points - Extended matches (4-5+ gems) offer exponential bonuses - Multi-color combinations create spectacular score multipliers - Chain reactions can lead to game-changing point explosions

Controls and Operation Guide

Desktop Controls

  • Mouse : Point and click on any gem
  • Drag : Hold and drag gems in your desired direction (left, right, up, down)
  • Release : Let go to execute the slide movement

Mobile Controls

  • Touch : Tap any gem with your finger
  • Slide : Drag your finger in the direction you want gems to move
  • Multi-touch : Use multiple fingers for rapid successive moves

Pro Tips for Better Performance

  • Look for cascading opportunities before making each move
  • Focus on corners and edges where gems have limited movement options
  • Plan 2-3 moves ahead to set up powerful combinations
  • Prioritize larger matches over quick small ones for better scoring

Why Play Gem Slide

Perfect for All Skill Levels

Whether you're a puzzle novice or a match-3 veteran, Gem Slide offers: - Intuitive mechanics that anyone can learn quickly - Progressive difficulty that grows with your skills - No time pressure - think at your own pace - Satisfying progression with each successful match

Ideal for Any Schedule

  • Quick sessions for coffee breaks or commutes
  • Extended play for deeper puzzle-solving sessions
  • Instant resume - pick up exactly where you left off
  • No commitment required - play as much or as little as you want

Brain Training Benefits

Regular play helps develop: - Visual pattern recognition - Strategic planning abilities - Spatial reasoning skills - Problem-solving confidence

Frequently Asked Questions (FAQ)