Tank Battle Arena

Top-down tank shooter built with HTML5 Canvas, CSS, and modular vanilla JavaScript. The project runs without a build step and is organized into focused runtime modules for config, input, entities, rendering, UI, and game flow.

Overview

You control a player tank in an arena survival loop:

• survive increasingly harder waves
• fight enemy archetypes with different behavior
• clear boss waves every 4 rounds
• use missile and shield skills to stabilize difficult fights
• pick 1 of 3 upgrades between waves to shape the run

Current Features

• 3 difficulty levels with separate high score storage
• Score-based tank progression (Lv1 -> Lv3) with different visuals and fire patterns
• Wave system with preparation phase, combat phase, and boss waves
• Enemy archetypes:
  • Rusher: fast pressure unit
  • Gunner: ranged strafing unit
  • Tank: slow heavy bruiser
  • Boss: multi-shot elite that appears every 4 waves
• Interactive map elements:
  • destructible crates that block movement
  • explosive barrels with chain-reaction damage
  • oil spills that slow tanks moving through them
• Between-wave upgrade draft with 3 random choices
• Loot system: HP, Speed, Damage, Missile
• Active skills:
  • Missile: area-damage explosive shot
  • Shield: timed protection with cooldown
• Pause, restart confirmation, and game-over report flow
• Custom key binding settings for Missile and Shield
• Dynamic controls hint that updates when key bindings change
• Local storage persistence for high scores and key bindings

Controls

Action	Default
Move	WASD or Arrow Keys
Shoot	Space
Aim	Mouse
Missile	F
Shield	G
Pause / Resume	P
Restart prompt	R
Upgrade choice	1 / 2 / 3
Open settings	bottom-left settings button

Notes:

• Missile can be rebound to Mouse Left in the settings modal.
• When Missile is bound to Mouse Left, normal shooting remains on Space.

Run Locally

No install step is required.

Option 1: Open directly

Open index.html in a browser.

Option 2: Run a local static server (recommended)

python -m http.server 8080

Then open http://localhost:8080.

Project Structure

.
|-- index.html
|-- README.md
|-- src
|   |-- css
|   |   `-- style.css
|   `-- js
|       |-- config.js
|       |-- entities.js
|       |-- game.js
|       |-- input.js
|       |-- render.js
|       `-- ui.js
|-- public
|   `-- assets
|       |-- custom-icons
|       |-- kenney_board-game-icons
|       |-- kenney_top-down-tanks-redux
|       `-- tank-pack
`-- Effects_v05_Publish.psd

Module Guide

• src/js/config.js: constants, asset paths, storage keys, shared helpers, enemy archetypes, upgrade pool
• src/js/entities.js: runtime state factories, player/enemy/bullet/loot logic, map obstacles, wave planning, upgrades
• src/js/render.js: asset loading, background generation, obstacle/tank/effect rendering
• src/js/input.js: keyboard, mouse, modal handling, key rebinding
• src/js/ui.js: DOM references, HUD updates, upgrade modal rendering, dynamic hint text
• src/js/game.js: boot flow, reset logic, main loop, wave progression, game-over handling

Main Tuning Points

If you want to rebalance or extend the game, these are the main places to touch:

• src/js/config.js
  • LEVELS: difficulty tuning
  • ENEMY_ARCHETYPES: enemy roles and combat profile
  • UPGRADE_POOL: between-wave upgrade choices
  • ASSET_PATHS: sprite/icon mapping
• src/js/entities.js
  • createPlayer(): base player stats
  • createMapObstacles(): arena layout and interactive props
  • createWavePlan(): wave pacing and boss insertion
  • applyUpgrade(): how upgrades affect the run
• src/js/game.js
  • prepareWave(): wave setup flow
  • spawnWaveEnemies(): spawn pacing
  • updateRun(): high-level game progression

Assets and Credits

• Tank and environment sprites: Kenney
• Board game icons: Kenney
• Custom missile and shield icons: local project assets in public/assets/custom-icons

License Notes

Included Kenney asset packs are distributed with their own license files in the asset directories. Check those files before redistributing the raw asset packs outside this project.