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.

Features

• 5 Block Types — Wood, Stone, Metal, Spike, Cannon with unique physics properties
• 7 Enemy Types — Goblin, Orc, Troll, Bat, Archer, Shaman, Boss
• 10 Campaign Waves — Progressive difficulty with boss encounters at waves 5 and 10
• Endless Survival Mode — Infinite waves for high-score chasing
• 4 Active Abilities — Repair, Barrage, Gold Rush, Fortify
• Permanent Upgrade Shop — Block upgrades and ability unlocks via persistent gold
• Real Physics Engine — Matter.js rigid body simulation
• Procedural Audio — All sound effects generated at runtime, zero audio files required
• Replaceable Sprites — 57 PNG sprite files; drop in your own art for a full reskin
• Replaceable Audio — 19 MP3 files (SFX + BGM); swap in your own sounds and music
• Graceful Fallback — Missing sprite/audio files silently fall back to procedural versions
• Background Music — BGM loops during build/combat, pauses and resumes with the game
• Custom Canvas Renderer — Gradients, shadows, particles, damage numbers, screen shake
• Unified Input — Pointer Events API for mouse + touch + stylus
• Mobile Responsive — Works on phones and tablets, touch-action optimized
• Keyboard Shortcuts — 1–5 for blocks, Z/X/C/V for abilities, Enter for wave start
• Persistent Progression — Wallet gold, upgrades, and inventory saved in localStorage
• Built-in Tutorial — Step-by-step guide for new players
• In-Game Settings — Volume slider, mute toggle, difficulty selector, screen shake toggle
• Animated Loading Screen — Progress bar while assets initialize
• Fullscreen Support — One-click fullscreen toggle

Gameplay

Build 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.

Block Types

Enemy Types

Technical Details

Requirements

• A 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-side

Customization

Block Siege is designed to be fully reskinnable without touching game code:

Replace Sprites (PNG)

Drop PNG files into Assets/sprites/ with matching filenames to replace any block, enemy, projectile, castle, or icon graphic. 57 sprite files are included. If a file is missing, the game silently falls back to the original Canvas 2D procedural rendering — no code changes needed.

Replace Audio (MP3)

Drop MP3 (or WAV/OGG) files into Assets/audio/ with matching filenames to replace any sound effect or background music. 19 audio files are included (18 SFX + 1 looping BGM). If a file is missing, the game falls back to procedural Web Audio synthesis.

Adjust Balance (config.js)

All game parameters are centralized in config.js, separate from game logic:

• Difficulty — Three profiles (Easy/Normal/Hard) controlling enemy HP, damage, and gold multipliers
• Blocks — Change costs, HP, physics properties per block type
• Enemies — Modify HP, damage, speed, and gold reward per enemy type
• Waves — Edit the WAVES array to change enemy counts and progression
• Economy — Starting gold, castle HP, sell refund ratio, wave bonuses
• Abilities — Cost, effect values, keyboard shortcuts

Change Visuals

• Colors & Layout — CSS variables in style.css
• Branding — Game title, subtitle, credit line in index.html
• Icons — SVG strings in icons.js, or replace via Assets/sprites/

Support

If you have any questions, run into an issue, or need customization assistance, feel free to reach out via the CodeCanyon comments section or contact the author directly: