NeuroConnect

A 3D Connect Four game built with WebGL 2.0 featuring AI opponent and custom shaders.

Features

• 3D Graphics: Built with WebGL 2.0 and custom rendering engine
• AI Opponent: Play against a neural network-based AI
• Custom Shaders: Includes Phong and Toon shading options
• Interactive Controls: WASD movement, spacebar to drop chips
• Dynamic Lighting: Toggle-able lighting system

Getting Started

Prerequisites

• Modern web browser with WebGL 2.0 support
• Local web server (e.g., Live Server extension for VS Code)

Running the Game

1. Clone the repository
2. Open the project folder in your preferred web server
3. Navigate to index.html in your browser

Alternatively, if using VS Code with Live Server:

• Right-click index.html and select "Open with Live Server"

Controls

• WASD: Move the chip placement tool
• Space: Drop chip into selected column
• L: Toggle lighting

Project Structure

neuro-connect/
├── index.html          # Main HTML entry point
├── style.css           # Styles and UI
├── src/
│   ├── main.js         # Application entry and game loop
│   ├── engine/         # Core rendering engine
│   │   ├── Camera.js
│   │   ├── InputController.js
│   │   ├── Renderer.js
│   │   └── ShaderManager.js
│   ├── game/           # Game logic
│   │   ├── AI.js
│   │   └── ConnectFour.js
│   ├── shaders/        # GLSL shader files
│   │   ├── phong.frag
│   │   ├── phong.vert
│   │   ├── toon.frag
│   │   └── toon.vert
│   └── utils/          # Utility modules
│       ├── ObjLoader.js
│       └── Scene.js
├── libs/
│    └── gl-matrix-min.js  # Math library for 3D graphics
└── assets/

Technologies

• WebGL 2.0: Hardware-accelerated 3D graphics
• JavaScript ES6+: Modern JavaScript with modules
• GLSL: Custom vertex and fragment shaders
• gl-matrix: Matrix and vector math library

License

MIT