Block Siege | Physics Tower Defense HTML5 Game

Block Siege is a physics-driven tower defense HTML5 game where you build defenses out of real physics blocks instead of placing static towers. Every block has mass, friction, and collision - enemies can knock them down, get crushed by falling debris, or be stopped by a well-built wall.The game combines the strategic depth of tower defense with the unpredictable chaos of physics simulation. Five block types, seven enemy types, four active abilities, a permanent upgrade shop, and 10 campaign waves plus endless survival mode give players deep replayability.Built entirely with vanilla JavaScript, HTML5 Canvas 2D, and the Web Audio API - no frameworks, no build tools required. All graphics are rendered procedurally on canvas and all sound effects are synthesized at runtime, but the game also includes replaceable PNG sprites and MP3 audio files - drop in your own art and sound to reskin the entire game without touching code. The only external dependency is Matter.js, loaded via CDN with a fallback.Features5 Types - Wood, Stone, Metal, Spike, Cannon with unique physics properties7 Enemy Types - Goblin, Orc, Troll, Bat, Archer, Shaman, Boss10 Campaign Waves - Progressive difficulty with boss encounters at waves 5 and 10Endless Survival Mode - Infinite waves for high-score chasing4 Active Abilities - Repair, Barrage, Gold Rush, FortifyPermanent Upgrade Shop - upgrades and ability unlocks via persistent goldReal Physics Engine - Matter.js rigid body simulationProcedural Audio - All sound effects generated at runtime, zero audio files requiredReplaceable Sprites - 57 PNG sprite files; drop in your own art for a full reskinReplaceable Audio - 19 MP3 files (SFX + BGM); swap in your own sounds and musicGraceful Fallback - Missing sprite/audio files silently fall back to procedural versionsBackground Music - BGM loops during build/combat, pauses and resumes with the gameCustom Canvas Renderer - Gradients, shadows, particles, damage numbers, screen shakeUnified Input - Pointer Events API for mouse + touch + stylusMobile Responsive - Works on phones and tablets, touch-action optimizedKeyboard Shortcuts - 1-5 for blocks, Z/X/C/V for abilities, Enter for wave startPersistent Progression - Wallet gold, upgrades, and inventory saved in localStorageBuilt-in Tutorial - Step-by-step guide for new playersIn-Game Settings - Volume slider, mute toggle, difficulty selector, screen shake toggleAnimated Loading Screen - Progress bar while assets initializeFullscreen Support - One-click fullscreen toggleGameplayBuild Phase During the build phase, players spend gold to place physics blocks inside a designated build area. Blocks drop from above and settle with real physics - a poorly supported block will topple. Players must think about weight distribution, structural support, and block placement to create an effective defense.Combat Phase When the player starts a wave, enemies spawn from the left side of the screen and charge toward the castle on the right. Enemies physically collide with blocks - they push, climb, and break through. Blocks can crush enemies when they fall, and cannons auto-fire at the nearest target. The castle takes damage when enemies reach it.Progression Each cleared wave awards a gold bonus. Gold is used to buy blocks during the run and is also added to the player’s persistent wallet. Between runs, players spend wallet gold in the Shop to permanently upgrade block durability and purchase abilities for future runs.Category HTML5 GamesTechnology Vanilla JavaScript, HTML5 Canvas 2D, Web Audio API, CSS3Physics Engine Matter.js v0.20.0 (CDN-loaded with fallback)Input Pointer Events API (mouse + touch + stylus) + KeyboardCanvas Resolution 1280×720 (scales responsively)Audio Replaceable MP3/WAV files + procedural Web Audio fallback. Looping BGM with pause/resume support.Sprites 57 replaceable PNG files + procedural Canvas 2D fallbackStorage localStorage for wallet, upgrades, and inventoryCode Lines ~7,500+ total across all JS filesDependencies Matter.js (CDN, not bundled)Mobile Support Yes - responsive layout, touch-optimized controlsFrameworks None - zero build tools, zero frameworksBrowser Support Chrome 80+, Firefox 80+, Safari 13+, Edge 80+RequirementsA web server (Apache, Nginx, or any static file server) or local HTTP server for development Internet connection on first load (Matter.js CDN - subsequent loads are cached) Modern browser with HTML5 Canvas 2D, Web Audio API, and ES6 support No server-side processing required - fully client-sideCustomization Block Siege is designed to be fully reskinnable without touching game code: