Back to Portfolio

CYBER VIPER 3D

games
CYBER VIPER 3D - Slide 1
CYBER VIPER 3D - Slide 2
CYBER VIPER 3D - Slide 3
CYBER VIPER 3D - Slide 4

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)