About the Project
**Cyber Viper 3D** transforms the nostalgic 2D arcade Snake into an immersive, cyberpunk 3D WebGL experience. Built from scratch using modern web engineering standards, the game features smooth 60/120 FPS sub-grid motion interpolation, dynamic multi-angle cameras, 6 progressive mission stages, synthesizer-powered sound effects, and a responsive glassmorphic cyber HUD.
تم تحويل لعبة الثعبان التقليدية بالكامل إلى تجربة سايبربانك ثلاثية الأبعاد فائقة السلاسة. تم بناء اللعبة باستخدام **React 19** ومحرك **Three.js** مع مؤثرات صوتية إجرائية بدون أي ملفات خارجية، ونظام مراحل وتحديات تدريجية.
---
## ✨ Key Features / المميزات
### 1. 🌌 3D WebGL Graphics Engine (محرك رسوميات ثلاثي الأبعاد)
* **Futuristic Cyber Arena:** Glowing reflective neon floor grid, laser perimeter forcefields, and illuminated corner laser pylons.
* **Dynamic Lighting:** Real-time head-following point light, ambient stadium glows, and reactive emissive materials.
* **Visual Effects:** 3D particle explosions upon eating items and dramatic multi-stage disintegration upon collision.
### 2. 🎯 Mission Stages & Challenges (طور المراحل والتحديات)
* **Stage 1: Cyber Bootcamp (التدريب السيبراني)** – Open arena to master steering and core mechanics.
* **Stage 2: Laser Grid Outpost (حقول الليزر المضيئة)** – Laser pylons guarding the 4 corners.
* **Stage 3: Turbo Overdrive (سباق السرعة الخارق)** – 60-second speed race against the clock!
* **Stage 4: Virus Quarantine (المنطقة الفيروسية)** – Bio-hazard quarantine zone with radioactive viral spores.
* **Stage 5: Dual Labyrinth (المتاهة المزدوجة)** – Tight corridor navigation inspired by the Palestine flag theme.
* **Stage 6: The Cyber Core (قلب النظام السيبراني)** – Final boss arena with defense satellites and golden core overload.
* **3-Star Rating System & Confetti:** Automated performance scoring with victory celebrations.
### 3. ♾️ Classic Endless Mode (الطور اللانهائي المفتوح)
* 4 selectable difficulty levels: **Casual (280ms)**, **Normal (210ms)**, **Turbo (155ms)**, and **Insane (110ms)**.
* Dynamic speed acceleration as the snake grows.
### 4. 🎨 Viper Skins & 3D Food Models (المظاهر والأطعمة ثلاثية الأبعاد)
* **Viper Skins:**
* 💎 *Cyber Neon:* Cyan and electric blue luminescence.
* 🌋 *Magma Flame:* Glowing molten lava and crimson embers.
* ⚡ *Emerald Matrix:* Cyberpunk green matrix energy.
* 👑 *Gold Rush:* Polished metallic gold sheen.
* 🇵🇸 *Palestine Freedom:* Pan-Arab red, green, black, and white design.
* **Food Themes:** Classic 3D Neon Apples, Golden Energy Cores, Glowing Viral Spores, and Palestine Emblems.
### 5. 🎥 4 Dynamic Camera Modes (أوضاع كاميرا متعددة)
* **Isometric:** Classic tactical diagonal perspective.
* **3D Chase Cam:** Smoothly tracks directly behind the snake's head with banking on turns.
* **Perspective:** Dramatic high-angle arena overview.
* **Classic 2D / Top-Down:** Direct birds-eye view for competitive precision.
### 6. 🔊 Procedural Web Audio Engine (محرك صوتي تركيبي)
* Zero-latency sound generation using the native browser **Web Audio API** (no audio asset loading needed).
* Dynamic combo audio scaling: pitch rises with each consecutive food item collected.
* Sound effects for turns, golden bonuses, countdown warnings, game overs, and victory fanfares.
### 7. 📱 Mobile & Touch Optimized (دعم كامل للجوال وشاشات اللمس)
* **Tactile Virtual D-Pad:** Floating cyber directional pad with visual and haptic feedback (`navigator.vibrate`).
* **Full-Screen Swipe Gestures:** Intuitive swipe-to-turn controls with scroll prevention.
* **Automatic Aspect Ratio Zoom:** Smart camera compensation prevents arena side-clipping on narrow mobile screens.
### 8. 🛡️ Safe Spawn & Start-on-Input System (حماية البداية والتحكم)
* **Start-on-Input:** The game never starts without player consent. A clean ready badge appears, allowing the player to observe the map and begin by pressing any key or swiping.
* **Southern Safety Runway:** Snakes spawn with at least 12 clear tiles ahead in every single stage.
* **Spawn Shield:** 2-move initial collision protection preventing accidental immediate death.
Technologies Used
react 19 + Vite
Three.js
Lucide Icon
Canvas Confetti
Modern Vanilla CSS (Glassmorphism, Cyberpunk CSS Variables, Flexbox/Grid)
Web Audio API (Synthesizer)