Skip to content

README.md

Latest commit

 

History

History
130 lines (107 loc) · 4.27 KB

README.md

File metadata and controls

130 lines (107 loc) · 4.27 KB

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.