Jungle Strike is a high performance, browser based First Person Shooter (FPS) that combines the immersive power of A Frame with the creative intelligence of the Google Gemini API. Survive a relentless onslaught of geometric hostiles in a dynamically evolving 3D world.
Jungle.Strike.mp4
- Procedural Mission Environments: Toggle between "Green Hell" (Jungle) and "Dust Storm" (Desert), each with unique color palettes and environmental props.
- Dynamic World Engine:
- Day/Night Cycle: A fully functional 24-hour clock that shifts the sun position, sky colors, and ambient light intensity.
- Weather System: Real-time atmospheric effects including clear weather, torrential rain, and snow, affecting visibility and atmosphere.
- Advanced Arsenal & Combat:
- Six distinct weapon classes (Pistol, Rifle, SMG, Machine Gun, Shotgun, and Flamethrower) with unique damage, recoil, and spread characteristics.
- Fully synthesized Web Audio sound effects for every shot and explosion.
- Throwable grenades with physics-based arcs and area-of-effect damage.
- Aggressive AI Entities: Enemies utilize advanced seeking logic to actively track and attack the player, featuring lunge animations and cooldown-based melee strikes.
- Tactical Vehicle Interaction: A driveable Jeep with realistic physics, functional headlights for night missions, and the ability to run over enemies.
- Smart HUD & Radar: A real-time mini-map tracking enemy positions, points of interest, and environmental hazards.
- AI-Driven Narrative: Contextual encouragement and mission flavor text generated by Gemini 3 Flash.
| Action | Control |
|---|---|
| Movement | W A S D |
| Aim | Mouse (Pointer Lock) |
| Shoot | Left Click |
| Grenade Throw | G |
| Enter/Exit Vehicle | E |
| Buy Grenades | Y (When near Ammo Crate) |
| Switch Weapon | Mouse Wheel |
| Menu / Release Mouse | ESC |
- Core Framework: React 19 for state management and UI components.
- 3D Engine: A-Frame 1.4.2 (Built on Three.js) utilizing an Entity-Component System (ECS).
- Physics: Cannon.js via the aframe-physics-system for realistic collisions and gravity.
- Artificial Intelligence: @google/genai (Gemini 3 Flash Preview) for dynamic content generation.
- Styling: Tailwind CSS for the tactical HUD and menu interfaces.
- Audio: Web Audio API for procedural sound synthesis (no external audio files required).
- Prerequisites: Ensure you have a modern web browser (Chrome or Edge recommended) that supports WebGL and the Pointer Lock API.
- Environment: The game requires a Google Gemini API Key to be available in the environment as
process.env.API_KEY. - Execution:
- Simply open the
index.htmlfile in your local development environment. - The application is configured as an ES6 module project and will automatically load the
index.tsxentry point.
- Simply open the
- Initial Setup:
- Click "Initiate Mission" from the main menu.
- Click anywhere on the 3D scene to lock your cursor and begin combat.
- Firstly run "npm install" and "npm run dev" on vscode terminal.
-
Game Start UI
-
Green Hell (Mission 1)
-
Green Hell Snowing
-
Dust Strom (Mission 2)
-
Game Over UI
App.tsx: The "Brain" of the game. Handles A-Frame component registration for AI behavior, weapon controllers, and world state.components/HUD.tsx: Manages the complex 2D tactical overlay, including the SVG-based radar and vitality bars.components/Menu.tsx: A glassmorphic React interface for mission configuration and loadout management.types.ts: Strictly typed interfaces ensuring consistent state across the physics engine and UI.