A modern WebGL remake of the Battle Zone arcade classic with upgraded art, power-ups, and multi-level gameplay.
You command a third-person tank roaming a textured battlefield surrounded by mountains, cube obstacles, trees, and perimeter walls. Intelligent enemy tanks coordinate attacks, missiles streak across the map, and a real-time radar keeps you aware of the action. Collect power-ups, survive the assault, and clear both levels to win.
- Custom WebGL Engine: Pure WebGL rendering pipeline with Phong lighting, normal handling, and per-material properties.
- Dynamic Battlefield: Procedural obstacles (pyramids, cubes, trees) plus imported OBJ models for tanks and missiles.
- Creative Mode: Toggle (
Shift + 1/!) swaps to high-fidelity textures for terrain, walls, pyramids, and trees. - Power-Ups: Gold cubes grant 5s invulnerability; blue cubes freeze all enemies for 5s. Both appear in-world and on the radar.
- Two-Level Campaign: Level 1 spawns two regular tanks; destroy three to trigger Level 2 with five faster, more aggressive tanks. Clear those five for victory.
- Tank Handling: Acceleration-based movement with strafing, third-person chase camera, crosshair, and responsive controls.
- HUD & Radar: Score, status, level, kill progress, and creative-mode indicator plus a radar mini-map with sweep animation and markers for enemies, player, obstacles, and power-ups.
- Audio & Effects: Radar beeps, firing sounds, explosions, muzzle flashes, and invulnerability visuals enhance feedback.
| Action | Key |
|---|---|
| Move forward / backward | W / S (or ↑ / ↓) |
| Turn | A / D (or ← / →) |
| Strafe | Q (left) / E (right) |
| Fire | Space |
| Reset view | Esc |
| Restart game | R |
| Toggle Creative Mode | Shift + 1 ( ! ) |
Movement uses acceleration, so the tank eases into and out of motion instead of instantly switching speeds.
- Survive & Engage: Track enemy tanks via radar, dodge shots, and destroy them with precise aiming.
- Power-Up Hunt: Collect gold (invulnerability) or blue (enemy freeze) cubes for temporary advantages.
- Level Progression:
- Level 1 → destroy 3 tanks to advance.
- Level 2 → destroy 5 faster, smarter tanks to win.
- Creative Mode (Optional): Toggle at any time for a textured visual pass that highlights ground, walls, trees, and tank models.
- Rendering: Single-pass Phong shading, texture tiling, UV scaling, texture-based trees/pyramids/walls, radar viewport with its own GL context.
- Gameplay Systems: Enemy AI with seeking/random states, collision detection against mountains/cubes/trees/walls, spawn management, level configs, creative-mode toggles, power-up scheduling.
- Input & Movement: Delta-time integration, acceleration/friction for the player tank, bullet physics, missile alignment using vector math.
- UI: HUD overlays (score, status, level, kill count), instructions panel, temporary screen messages for level transitions/power-ups, radar sweep indicator.
| File | Description |
|---|---|
battlezone.html |
Canvas setup, HUD/instructions markup, script loading |
battlezone.css |
Layout, styling for HUD, radar, messages |
battlezone.js |
WebGL setup, shaders, geometry buffers, AI, controls, rendering loops |
gl-matrix*.js |
Matrix/vector math utilities |
pyramid-positions.js, cube-obstacles.js |
Static obstacle placement data |
Asset folders (tank-model, missile) |
OBJ/MTL and textures for imported models |
- Open
battlezone.htmlin a WebGL-capable browser (Chrome, Firefox, Safari, Edge). - Focus the canvas (click once) to ensure keyboard controls register.
- Follow the HUD instructions to move, fire, collect power-ups, and switch modes.
No build step is required; everything runs client-side.
- Tested on macOS using Chrome 118+ and Safari 17+.
- Requires WebGL1 support and ES6-enabled JavaScript engines.
Created for Computer Graphics Program 5.