Four in a Row - Classic Connect Four Game

Seele01-Flash
By
Four in a Row is the beloved classic strategy game where players drop colored discs to connect four in a row. Play against friends or computer AI in this timeless board game that combines simple rules with strategic depth.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "**Classic Four in a Row 3D**". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: Creating a "Skeuomorphic Toy" aesthetic. The goal is to make the digital board feel like a high-quality, tangible plastic toy from the 90s. * **The Board**: A bright, semi-glossy blue vertical rack with a 7-column x 6-row grid. The board needs "holes" or transparent windows for the slots. It should stand on two legs on a simple wooden table surface. * **The Discs (Tokens)**: * **Red Team**: Vibrant matte red plastic. * **Yellow Team**: Vibrant matte yellow plastic. * **Detail**: Based on the reference image, each disc should have a concentric ring design with small, raised dots around the outer rim to catch the light. * **Lighting**: Use a warm, 3-point lighting setup to create soft shadows and distinct specular highlights on the plastic surfaces (Simulating indoor room lighting). * **Camera**: Fixed perspective, slightly angled down (approx 15 degrees) to show the depth of the board and the table, but kept head-on enough to clearly see the grid columns. * **Optimization**: Use `InstancedMesh` for the discs to maintain high performance on mobile devices, as there can be up to 42 discs on screen. ### 2. Audio Requirements * **BGM**: A light, jazzy, elevator-style lounge music track. It should be relaxing and unobtrusive, encouraging thinking. * **SFX - Disc Drop**: A satisfying plastic "clack" or "rattle" sound when a disc hits the bottom or lands on another disc. * **SFX - Win Jingle**: A short, triumphant major chord arpeggio. * **SFX - UI**: Soft "pop" sounds for menu buttons. * **Ambience**: Very subtle room tone (air conditioning hum or distant chatter) to ground the scene in reality. ### 3. Gameplay Loop * **Core Mechanic**: A turn-based strategy game. * Player 1 (Red) and Player 2/AI (Yellow) take turns dropping a disc into one of the 7 columns. * Gravity logic: The disc must fall to the lowest available empty slot in that column. * **Victory Condition**: The first player to align 4 of their own discs vertically, horizontally, or diagonally wins immediately. * **Draw Condition**: If the entire 7x6 grid (42 slots) is filled without a winner, the game ends in a draw. * **AI Logic**: Include a simple Minimax algorithm for the CPU opponent that can block obvious player threats and seek its own 4-in-a-row opportunities. * **Win State**: When a player wins, the winning line of 4 discs should glow or pulse, and a "Winner!" overlay should appear. ### 4. Mobile Controls & Interaction * **Orientation**: **Portrait Mode** is preferred for one-handed play, placing the board in the center and UI below it. * **Controls - "Tap to Drop"**: * Split the screen width into 7 invisible vertical touch zones corresponding to the board columns. * Touching anywhere within a column's zone (even above the board) highlights that column. * Releasing the touch drops the disc. * **Visual Feedback**: * **Phantom Disc**: Before dropping, show a semi-transparent "ghost" disc hovering over the selected column to indicate where the move will be made. * **Animation**: The drop needs to be animated with a bounce effect (using an easing function like `easeOutBounce`) when it hits the bottom to convey weight. * **Haptic Feedback**: Trigger a short, light vibration (using the Vibration API) exactly when the disc lands. * **UI**: Large, thumb-friendly "Restart" and "Menu" buttons at the bottom of the screen (min-height 50px). 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 the digital version of the world-famous connect-four strategy game that has entertained families and friends for generations. This classic board game challenges players to think strategically while racing to be the first to connect four discs in a row. With its simple yet engaging gameplay, Four in a Row offers endless entertainment for players of all ages.

The game features a traditional 6x7 grid board where players take turns dropping colored discs from the top. Your objective is to be the first player to form a horizontal, vertical, or diagonal line of four matching discs. What seems simple quickly becomes a thrilling battle of wits as you plan your moves while blocking your opponent's strategies.

Core Features

Multiple Game Modes

  • Single Player Mode : Challenge yourself against intelligent computer AI with adjustable difficulty levels
  • Two Player Mode : Play head-to-head with friends on the same device
  • Quick Match : Jump straight into a game with optimized settings for fast gameplay

Strategic Gameplay Elements

  • Easy to Learn : Simple drop-and-connect mechanics that anyone can understand instantly
  • Hard to Master : Deep strategic elements including blocking, setting up multiple threats, and advanced positioning
  • Visual Feedback : Clear animations and highlighting show winning combinations
  • Undo Function : Practice mode allows move reversal for learning and experimentation

Accessibility and Design

  • Cross-Platform Compatible : Play seamlessly on desktop computers, tablets, and smartphones
  • Responsive Design : Game board automatically adjusts to your screen size
  • Colorblind Friendly : High contrast red and yellow pieces ensure visibility for all players
  • Touch and Mouse Support : Intuitive controls work perfectly with both touch screens and traditional mouse input

Gameplay Instructions

Basic Rules

The rules of Four in a Row are elegantly simple: 1. Choose Your Color : Select red or yellow discs at the start of each game 2. Take Turns : Players alternate dropping one disc per turn into any available column 3. Gravity Effect : Discs fall to the lowest available position in the selected column 4. Win Condition : Connect four of your colored discs in any direction - horizontal, vertical, or diagonal 5. Draw Condition : If the board fills completely without a winner, the game ends in a tie

Strategic Tips

  • Control the Center : Columns in the middle offer more winning opportunities
  • Think Ahead : Plan multiple moves in advance and anticipate your opponent's responses
  • Create Multiple Threats : Set up situations where you can win in more than one way
  • Block Wisely : Prevent your opponent's winning moves while advancing your own position
  • Watch for Traps : Be careful not to give your opponent the winning move by creating a setup they can exploit

Operation Guide

Desktop Controls: - Mouse Click : Click on any column to drop a disc - Keyboard : Use number keys 1-7 to select columns, or arrow keys to navigate - Spacebar : Confirm move selection

Mobile/Tablet Controls: - Tap : Simply tap the column where you want to drop your disc - Swipe : Swipe left or right to preview column selection - Double-tap : Quick drop function for experienced players

Game Interface: - Reset Button : Start a new game at any time - Hint System : Get strategic suggestions when you're stuck - Move Counter : Track the number of moves played - Timer : Optional time limits for competitive play

Why Play Four in a Row

Perfect for Everyone

Four in a Row strikes the perfect balance between accessibility and depth. New players can enjoy the game immediately thanks to its intuitive rules, while experienced strategists can explore advanced tactics like forced wins, defensive positioning, and psychological gameplay. This makes it an ideal choice for family game time, casual breaks, or serious strategic challenges.

Educational Benefits

Beyond entertainment, Four in a Row develops valuable cognitive skills: - Strategic thinking and planning ahead - Pattern recognition and spatial awareness - Logical reasoning and problem-solving - Concentration and focus improvement - Social interaction and sportsmanship

Convenient Online Experience

Enjoy all the fun of the classic board game without physical setup or cleanup. Our online version loads instantly in any web browser, requires no downloads or installations, and saves your game preferences automatically. Whether you have five minutes or an hour to spare, Four in a Row provides the perfect mental challenge.

Competitive and Social

Compete against friends locally or test your skills against our advanced AI opponents. The game includes statistics tracking so you can monitor your improvement over time and celebrate your victories. Challenge colleagues during breaks, play with family members of different ages, or practice solo to perfect your strategy.

Frequently Asked Questions (FAQ)