Interactive HTML5 canvas simulation of a radar tower detecting and intercepting incoming drones.
A lightweight browser-based demo showcasing:
- Real-time animation loop
- Steering dynamics & simple interception logic
- Collision detection
- Radar sweep detection mechanics
- Responsive world-to-screen scaling
- Clean separation of simulation and rendering logic
Deployed via GitHub Pages:
https://dnpjr.github.io/drones/
This project simulates a fixed radar tower that:
- Sweeps a detection beam
- Detects incoming drones within range
- Assigns defender drones
- Intercepts targets using basic pursuit dynamics
The goal is not physical realism but to demonstrate:
- Event-driven simulation
- Object lifecycle management
- Deterministic update loop
- Basic game-style architecture in vanilla JavaScript
Language: HTML / CSS / JavaScript
Rendering: HTML5 Canvas (2D context)
Dependencies: None (pure browser implementation)
- World coordinate system
- View transform & responsive scaling
- Radar beam geometry
- Target ownership logic (1 defender per enemy)
- Separation forces
- Collision handling
- HUD overlay
The simulation runs via requestAnimationFrame with a fixed-time step cap.
Open index.html directly in your browser.
python -m http.server 8000