Cosmos Cyberpunk - 3D Space Combat Simulator

Cosmos Cyberpunk - 3D Space Combat Simulator

Three.jsJavaScriptWebGLCanvas APIGamepad APIBoid AlgorithmsPhysics SimulationCSS3 AnimationsHTML5

A sophisticated 3D space combat simulator built entirely with vanilla JavaScript and Three.js. This game demonstrates advanced computer science concepts including boid flocking algorithms (with separation, alignment, and cohesion behaviors), quadratic equation solving for ballistic trajectory prediction, and real-time physics simulation. The dual camera system allows seamless switching between first-person flight controls and third-person orbital lock mode, where the camera circles around locked targets while the player's ship remains visible with animated engine glow. The predictive targeting system calculates intercept points by solving the relative velocity equations between shooter and target, accounting for velocity inheritance when projectiles are fired. Combat features include a multi-weapon system (lightning bolts at 80 u/s and red beams at 60 u/s), an afterburner boost with warp speed visual effects, and real-time collision detection across 500+ emoji-based particle sprites. The cyberpunk aesthetic includes scanlines, CRT effects, glitch animations, and a comprehensive HUD with scoring, accuracy tracking, and high score persistence. Full gamepad API integration provides console-quality controls with 15+ button mappings, while maintaining 60 FPS performance through efficient sprite batching and optimized rendering.

Key Features

  • Advanced boid flocking AI with separation, alignment, and cohesion behaviors for 500+ particles
  • Dual camera system: first-person flight controls with banking + 3rd-person orbital lock mode
  • Predictive lead targeting system solving ballistic intercept equations in real-time
  • Physics-based projectile system with velocity inheritance from shooter motion
  • Afterburner boost system with warp speed visual effects and dynamic fuel management
  • Full Xbox/PlayStation gamepad support with 15+ button mappings and adjustable deadzones
  • Cyberpunk HUD with scanlines, CRT effects, chromatic aberration, and glitch animations
  • Combat scoring system with kill tracking, shot accuracy calculation, and high score persistence
  • Dynamic camera banking on turns for immersive flight simulation feel
  • Multi-weapon system: Lightning bolts (80 u/s, 10pt radius) and Red beam (60 u/s, 15pt radius)
  • Visible player ship in orbital mode with animated engine glow and boost effects
  • Real-time particle collision detection with efficient spatial optimization
  • 60 FPS performance optimization with sprite batching and efficient rendering pipeline
  • Responsive controls with keyboard (WASD + Space/Shift), mouse (drag, scroll, click), and gamepad
  • Cross-platform support with mobile-optimized HUD that hides controls on touch devices

Implementation Details

Built with Three.js r128 and vanilla JavaScript, this game demonstrates advanced computer science and game development concepts. The boid flocking system implements Craig Reynolds' classic algorithm with configurable separation, alignment, and cohesion forces, creating emergent swarm behavior from simple rules. The targeting system uses quadratic equations to solve the intercept problem, calculating the exact point where a projectile traveling at constant speed will intersect a moving target - accounting for both the target's velocity and the shooter's own motion (velocity inheritance). The dual camera architecture features smooth lerp-based following for orbital mode, with the right stick controlling spherical coordinates (azimuth and elevation) around the locked target, while the left stick provides camera offset for peeking. Camera banking is achieved through quaternion slerp, rotating the camera based on yaw rate for authentic flight dynamics. The boost system manages fuel depletion and recharge with visual feedback through warp speed lines rendered on a 2D canvas overlay, creating radial motion blur effects. Collision detection uses distance checks optimized with early rejection, processing 500+ sprites while maintaining 60 FPS. The gamepad integration leverages the HTML5 Gamepad API with edge-triggered button detection and adjustable deadzones for analog sticks. The entire game runs client-side with no dependencies beyond Three.js, showcasing proficiency in 3D graphics, physics simulation, input handling, and performance optimization.