Four in a Row - Connect Four Classic Game

Seele01-Flash
By
Four in a Row is the timeless strategic board game where players drop colored discs to connect four pieces in a line. Play against friends or challenge the computer AI in this classic puzzle game.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "**Four in a Row: 3D Classic**". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style:** Create a clean, semi-realistic 3D aesthetic reminiscent of the physical plastic board game but with modern lighting. The style should be vibrant but not distracting. * **The Board:** * Construct a vertical blue board (7 columns x 6 rows) with hollow circular slots. * The board should have a slight plastic gloss (using `MeshPhysicalMaterial` with moderate roughness and clearcoat). * The board stands on a simple table surface or floats in a void with a soft radial gradient background (e.g., deep blue to black) to keep focus on gameplay. * **The Pieces (Discs):** * Create cylindrical coin-shaped discs in two colors: **Vibrant Red** and **Bright Yellow**. * The discs should have a slight bevel on the edges and concentric ring details on the face (bump map or simple geometry) to mimic the texture seen in the screenshot. * *Optimization:* Use InstancedMesh for the discs to ensure 60fps performance on mobile devices, as there can be up to 42 discs on screen. * **Lighting:** Use a 3-point lighting setup. A key light from the top-left to cast soft shadows inside the board slots, a fill light, and a rim light to highlight the plastic edges. * **Camera:** Position the camera in a fixed perspective view, slightly angled down looking at the board, ensuring the entire 7x6 grid fits comfortably within the safe area of a mobile screen (portrait mode preferred). ### 2. Audio Requirements * **BGM:** A laid-back, "elevator jazz" or "lo-fi study beat" track. It should be unobtrusive, looping seamlessly to aid concentration. * **Sound Effects (SFX):** * **Selection:** A soft "click" or "pop" when the player taps a column to hover their piece. * **Drop:** A satisfying, realistic plastic-on-plastic "clack" sound when the disc hits the bottom (or lands on another disc). Variation in pitch based on how far the disc falls would be excellent. * **Win:** A cheerful, ascending major chord jingle accompanied by a particle effect. * **Draw:** A neutral, lower-pitched "thud" sound. ### 3. Gameplay Loop * **Turn-Based Logic:** Players take turns dropping a disc into one of the 7 columns. The disc must occupy the lowest available empty slot in that column. * **State Management:** Track the grid state (7x6 array). * **Win Condition:** Check after every move if the current player has formed a line of 4 consecutive discs of their color. * Directions to check: Horizontal, Vertical, Diagonal (Top-left to Bottom-right), Diagonal (Bottom-left to Top-right). * **Opponent Modes:** * Include a simple toggle for "PvP" (Hotseat) vs. "PvE" (Basic AI that blocks wins or makes random valid moves). * **Game Over:** When a win is detected, highlight the 4 winning discs (e.g., make them glow or pulse) and display a "Red Wins!" or "Yellow Wins!" overlay. Provide a "Rematch" button. ### 4. Mobile Controls & Interaction * **Orientation:** **Portrait Mode** optimized. The vertical board fits naturally on a phone screen. * **Touch Input:** * **Tap to Drop:** The primary interaction is tapping anywhere within a specific column's width to drop a piece into that column. * **Visual Indicator:** Before dropping, show a "ghost" or semi-transparent disc at the top of the column where the user is touching/hovering to indicate where the piece will fall. * **Physics/Animation:** * Do not just teleport the disc. Animate the disc falling from the top of the board to its resting position using a simple gravity tween (e.g., using GSAP or a custom ease-in function) to create the feeling of weight. * **UI Elements:** * Place a "Restart" and "Mode Switch" button at the bottom of the screen, well away from the board to prevent accidental clicks. * Buttons should be large (min 44px height) and rounded for easy thumb access. * **Haptic Feedback:** Trigger a short vibration (`navigator.vibrate(50)`) when a disc lands. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

Four in a Row is a beloved strategic board game that has entertained players for generations. This digital version brings the classic connect-four gameplay to your browser, allowing you to enjoy the timeless puzzle challenge anytime, anywhere. The game features intuitive controls, crisp graphics with red and yellow game pieces, and engaging gameplay that's easy to learn but challenging to master.

Whether you're looking to challenge your strategic thinking or enjoy some friendly competition, Four in a Row delivers the perfect blend of simplicity and depth that has made it a household favorite worldwide.

Core Features

Classic Strategic Gameplay

Experience the authentic Four in a Row challenge where every move matters. Plan your strategy carefully as you attempt to connect four of your colored discs while blocking your opponent's winning combinations.

Multiple Game Modes

  • Single Player Mode : Test your skills against intelligent computer AI with varying difficulty levels
  • Two Player Mode : Challenge friends and family in exciting head-to-head matches
  • Quick Match : Jump into a game instantly without setup delays

User-Friendly Design

The game features a clean, colorful interface with clearly distinguishable red and yellow game pieces. The intuitive drag-and-drop mechanics make it accessible for players of all ages and skill levels.

Cross-Platform Compatibility

Play seamlessly across all devices - desktop computers, tablets, and smartphones. No downloads required - simply open your browser and start playing immediately.

Game Rules and Strategy

How to Play

The objective is simple yet engaging: be the first player to connect four of your colored discs in a row. Connections can be made horizontally, vertically, or diagonally across the 7x6 game grid.

Winning Strategies

  • Control the Center : Occupy the middle columns for maximum connection opportunities
  • Think Ahead : Plan multiple moves in advance to set up winning combinations
  • Block Opponents : Watch for your opponent's potential four-in-a-row setups and block them strategically
  • Create Multiple Threats : Force your opponent into difficult defensive positions

Operation Guide

Mouse Controls : Click on any column to drop your disc into the lowest available slot

Touch Controls : On mobile devices, simply tap the column where you want to place your piece

Game Flow : 1. Choose your color (red or yellow) 2. Select single-player or two-player mode 3. Take turns dropping discs into columns 4. First to connect four pieces wins! 5. Start a new game or rematch with different settings

Why Play Four in a Row

Perfect for All Ages

This game appeals to children learning strategic thinking and adults seeking mental stimulation. Its simple rules make it accessible, while the strategic depth keeps experienced players engaged.

Educational Benefits

  • Develops logical reasoning and pattern recognition
  • Improves strategic planning and foresight
  • Enhances spatial awareness and visual processing
  • Builds patience and concentration skills

Social Gaming Experience

Whether playing with family members, friends, or online opponents, Four in a Row creates memorable gaming moments and friendly competition that brings people together.

No Commitment Required

With quick 5-10 minute game sessions, it's perfect for short breaks, waiting periods, or whenever you need a mental challenge. No lengthy tutorials or complex setups - just pure, immediate fun.

Frequently Asked Questions (FAQ)