4 in a Row

Seele01-Flash
By
4 in a Row is the classic connect four strategy game brought online with multiplayer capabilities. Challenge friends or opponents worldwide as you drop discs strategically to connect four pieces vertically, horizontally, or diagonally to claim victory.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "4 in a Row 3D". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style:** Vibrant, semi-realistic arcade style similar to the screenshot. * **The Board:** A vertical standing board made of light polished wood texture with a 7-column by 6-row grid of circular cutouts. The board should have thickness and rounded edges (bevels). * **The Discs (Chips):** * Player 1: Bright Glossy Red (plastic material). * Player 2: Bright Cyan/Light Blue (plastic material). * Geometry: Cylinder geometry with a slight inner extrusion (concentric rings) to look like real game pieces. * **Background:** A clean, deep purple to blue gradient background (CSS radial gradient) to make the board pop. * **Lighting:** Soft, warm studio lighting using `AmbientLight` (0.6 intensity) and a `DirectionalLight` (0.8 intensity) casting soft shadows to give depth to the holes. * **Mobile Optimization:** Use `InstancedMesh` for the discs if possible to reduce draw calls, or keep geometry segments low (e.g., radial segments around 32). Ensure textures are generated procedurally or use simple colors to avoid external asset dependency errors. ### 2. Audio Requirements * **BGM:** A chill, looping casual "elevator" or "lounge" jazz track (generate a placeholder function or use a reliable public URL). * **SFX - Drop:** A "whoosh" sound when the chip is released. * **SFX - Land:** A satisfying plastic "clack" or "thud" when the chip hits the bottom or another chip. * **SFX - Win:** A celebratory chime or fanfare. * **SFX - Error:** A dull thud if a player tries to drop a disc in a full column. ### 3. Gameplay Loop * **Game Setup:** Standard 7 (width) x 6 (height) grid. * **Turn System:** Two-player local hotseat mode (Player 1 vs. Player 2). Turns alternate automatically. * **Mechanics:** * Players do not place discs directly in a slot; they select a **column**. * **Gravity Animation:** The disc must visibly animate falling from the top of the board to the lowest available empty slot in that column. It should bounce slightly upon landing (easing function: `easeOutBounce`). * **Win Condition:** The game checks after every move if there are 4 contiguous discs of the same color: * Horizontally * Vertically * Diagonally * **Game Over:** When a win is detected, draw a line connecting the winning pieces or make them glow, display a "Player [X] Wins!" UI overlay, and offer a "Restart" button. ### 4. Mobile Controls & Interaction * **Input Method:** Raycasting via Touch (mobile) and Mouse (desktop). * **Hit Testing:** * Create invisible "column colliders" that extend above the board. This ensures that even if the user taps slightly imperfectly, the game registers the intent to drop in that column. * The touch area for each column should be at least 44px wide on screen. * **Orientation:** The camera should be an `OrthographicCamera` or a fixed `PerspectiveCamera` positioned to view the board front-on but slightly angled (isometric feel) to show the 3D depth. It must resize responsively to fit both Portrait (vertical board) and Landscape modes. * **Feedback:** * **Visual:** When a player hovers (or touches and holds) over a column, a "ghost" semi-transparent disc should appear at the top to indicate where the drop will happen. * **Haptic:** Trigger `navigator.vibrate(10)` when a disc lands (if supported). * **UI:** Minimalist HTML overlay for the score and "Restart" button, placed at the bottom of the screen for easy thumb reach. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

4 in a Row is a timeless strategy game that brings the beloved connect four experience to your browser. With a stellar 4.0/5 rating, this engaging multiplayer game challenges players to think strategically while racing against their opponents to connect four discs in a row.

This classic board game transforms the traditional tabletop experience into an exciting online multiplayer adventure. Whether you're playing against friends or challenging random opponents from around the world, every match requires careful planning and strategic thinking to outsmart your competitor.

Core Features

Completely Free to Play

Enjoy unlimited gameplay without any payment requirements. Access all game features and multiplayer modes at no cost.

Global Multiplayer Experience

Connect with players worldwide through seamless online multiplayer functionality. Challenge friends directly or get matched with opponents of similar skill levels.

Cross-Platform Compatibility

Play on any device - desktop computers, tablets, or smartphones. The game adapts perfectly to different screen sizes while maintaining smooth gameplay.

Classic Strategy Gameplay

Experience the pure essence of connect four with traditional rules and intuitive mechanics that are easy to learn but challenging to master.

Instant Browser Access

No downloads or installations required. Simply open your web browser and start playing immediately.

Game Rules and Strategy

Objective

Be the first player to connect four of your colored discs in a row - vertically, horizontally, or diagonally.

Strategic Elements

  • Blocking : Prevent your opponent from connecting four by placing your disc in their potential winning position
  • Setting Traps : Create multiple winning opportunities simultaneously to guarantee victory
  • Center Control : Dominating the center columns provides more connection possibilities
  • Vertical Thinking : Consider how each move affects future placement options in the same column

How to Play

Basic Controls

  • Click or Tap : Select the column where you want to drop your disc
  • Strategic Placement : Your disc will fall to the lowest available position in that column
  • Turn-Based Play : Alternate turns with your opponent until someone connects four

Winning Conditions

Achieve victory by connecting four of your discs in any of these patterns: - Horizontal : Four discs in the same row - Vertical : Four discs in the same column
- Diagonal : Four discs connected diagonally (ascending or descending)

Why Play 4 in a Row

This game perfectly combines accessibility with depth. New players can quickly understand the basic mechanics, while experienced strategists will appreciate the nuanced tactical decisions required for consistent victories. The multiplayer aspect adds unpredictability and excitement, ensuring no two games feel exactly the same.

The browser-based format means you can enjoy quick matches during breaks or engage in longer gaming sessions without any technical barriers. Whether you're rekindling nostalgia for the classic board game or discovering this strategic gem for the first time, 4 in a Row delivers engaging entertainment for all skill levels.

Frequently Asked Questions (FAQ)