🐍 Cyber Snake 3D

🇬🇧 English | 🇹🇷 Türkçe

Cyberpunk aesthetics meets classic Snake mechanics in a 3D procedural world.
Cyberpunk estetiğinin klasik Yılan mekanikleriyle buluştuğu 3D prosedürel bir dünya.

🇬🇧 English

Overview

Cyber Snake 3D is a modern reimagining of the classic Snake game, built with React, Three.js (React Three Fiber), and TypeScript. Set in a neon-lit cyberpunk city, the game features dynamic difficulty scaling, 3D combat mechanics, RPG-like power-ups, and intense "bullet hell" moments.

✨ Features

• 3D Environment: Fully immersive 3D world with neon lighting and cyberpunk cityscapes.
• Dynamic Difficulty: The map grows and enemies become more aggressive as your score increases.
• Combat System:
  • Enemies: Melee attackers, Archers, and Mages with unique AI behaviors.
  • Shooting: First-person and top-down shooting mechanics.
  • Power-ups: Rapid Fire, Spread Shot, Speed Boost, Health, and Shield.
• Camera Modes: Switch between Chase, FPS (First Person), and Top-Down views instantly.
• Performance Optimized: Uses InstancedMesh for rendering hundreds of bullets without lag.

📂 Project Structure

A detailed look at the codebase and what each part does:

cyber-snake-3d/
├── public/              # Static assets (images, gameplay screenshots)
├── src/
│   ├── components/      # React functional components for the 3D world
│   │   ├── Bullets.tsx         // Handles rendering of player bullets using InstancedMesh
│   │   ├── CameraController.tsx // Manages Chase, FPS, and TopDown camera behaviors & transitions
│   │   ├── Enemies.tsx         // Renders different enemy types (Melee, Archer, Mage) and their projectiles
│   │   ├── Environment.tsx     // Generates the cyberpunk city, grid floor, and neon boundary lines
│   │   ├── Food.tsx            // Renders glowing collectibles that increase score
│   │   ├── PowerUps.tsx        // Renders floating power-up cubes (Shield, Rapid Fire, etc.)
│   │   └── Snake.tsx           // The main player character, handling segments, movement, and the gun model
│   ├── store/
│   │   └── gameStore.ts        // The Brain of the game. Handles ALL state (score, positions, combat logic, difficulty scaling) using Zustand
│   ├── systems/
│   │   └── SoundManager.ts     // A custom audio engine using Web Audio API for synthesized SFX (no external mp3 files needed)
│   ├── App.tsx          // Main entry point, sets up the 3D Canvas, UI HUD (Heads-up Display), and Input Handlers
│   └── main.tsx         // React DOM root
├── index.html           // Helper HTML file
├── vite.config.ts       // Build and development server configuration
└── package.json         // Dependencies and scripts

🎮 Controls

• Grid Movement: W, A, S, D or Arrow Keys.
• Shoot: Mouse Left Click (Aims at cursor).
• Change Camera: V key.

🚀 Installation & Running

1. Clone the repository:

   git clone https://github.com/YOUR_USERNAME/cyber-snake-3d.git
   cd cyber-snake-3d

2. Install dependencies:

   npm install

3. Run Development Server:

   npm run dev

4. Build for Production:

   npm run build

---

🇹🇷 Türkçe

Genel Bakış

Cyber Snake 3D, React, Three.js (React Three Fiber) ve TypeScript kullanılarak geliştirilmiş, klasik Yılan oyununun modern bir yeniden yorumudur. Neon ışıklı bir cyberpunk şehrinde geçen oyun, dinamik zorluk ölçeklendirmesi, 3D savaş mekanikleri, RPG tarzı güçlendirmeler ve yoğun "mermi cehennemi" (bullet hell) anları içerir.

✨ Özellikler

• 3D Ortam: Neon aydınlatmalar ve cyberpunk şehir manzaralarıyla tam sarmal 3D dünya.
• Dinamik Zorluk: Skorunuz arttıkça harita büyür ve düşmanlar daha agresif hale gelir.
• Savaş Sistemi:
  • Düşmanlar: Yakın dövüşçüler, Okçular ve Büyücüler (gelişmiş yapay zeka ile kafayı hedef alırlar).
  • Ateş Etme: Hem FPS hem yukarıdan bakış açısıyla ateş etme mekanikleri.
  • Güçlendirmeler: Seri Ateş, Yaylım Ateşi, Hızlandırma, Can ve Kalkan.
• Kamera Modları: Takip (Chase), FPS ve Kuş Bakışı (Top-Down) modları arasında anlık geçiş.
• Performans Odaklı: Yüzlerce mermiyi kasma olmadan çizmek için InstancedMesh teknolojisi kullanılır.

📂 Proje Yapısı

Kod tabanına ve dosyaların ne işe yaradığına dair detaylı bakış:

cyber-snake-3d/
├── public/              # Statik dosyalar (görseller, oyun ekran görüntüleri)
├── src/
│   ├── components/      # 3D dünya için React bileşenleri
│   │   ├── Bullets.tsx         // Oyuncu mermilerini InstancedMesh kullanarak (performanslı) çizer
│   │   ├── CameraController.tsx // Takip, FPS ve Kuş Bakışı kamera modlarını ve geçişleri yönetir
│   │   ├── Enemies.tsx         // Farklı düşman tiplerini (Savaşçı, Okçu, Büyücü) ve mermilerini çizer
│   │   ├── Environment.tsx     // Cyberpunk şehri, zemin ızgarasını ve neon sınırları oluşturur
│   │   ├── Food.tsx            // Skoru artıran parlayan yemleri çizer
│   │   ├── PowerUps.tsx        // Uçuşan güçlendirme küplerini (Kalkan, Seri Ateş vb.) çizer
│   │   └── Snake.tsx           // Ana karakter. Yılan parçalarını, hareketi ve silah modelini yönetir
│   ├── store/
│   │   └── gameStore.ts        // Oyunun beyni. Tüm durumu (skor, pozisyonlar, savaş mantığı, zorluk seviyesi) Zustand ile yönetir
│   ├── systems/
│   │   └── SoundManager.ts     // Web Audio API kullanan özel ses motoru. Dış ses dosyası gerektirmeden sentetik efektler üretir
│   ├── App.tsx          // Ana giriş noktası. 3D Sahneyi (Canvas), Arayüzü (HUD) ve Girdi Yöneticilerini (Input) kurar
│   └── main.tsx         // React DOM kökü
├── index.html           // Yardımcı HTML dosyası
├── vite.config.ts       // Derleme ve geliştirme sunucusu yapılandırması
└── package.json         // Bağımlılıklar ve komut dosyaları

🎮 Kontroller

• Hareket: W, A, S, D veya Ok Tuşları.
• Ateş Etme: Mouse Sol Tık (İmlecin olduğu yere ateş eder).
• Kamera Değiştirme: V tuşu.

🚀 Kurulum ve Çalıştırma

1. Projeyi klonlayın:

   git clone https://github.com/KULLANICI_ADINIZ/cyber-snake-3d.git
   cd cyber-snake-3d

2. Bağımlılıkları yükleyin:

   npm install

3. Geliştirme Sunucusunu Başlatın:

   npm run dev

4. Yayına Hazırlama (Build):

   npm run build

📜 License / Lisans

Distributed under the MIT License. See LICENSE for more information.

---