Tank Arena Game — HTML Canvas Top-Down Shooter in JS

Top-down tank battles are a classic because the rules are instantly readable: drive, aim, shoot, use cover. This snippet builds a complete, polished one on a single HTML5 <canvas>: a destructible arena, free 360° aiming, shells that ricochet, four enemy types that navigate around walls and lead their shots, power-ups, a boss every fifth wave, combo scoring, synthesized sound and mouse, keyboard or twin-stick touch input.

Drive, aim and fire independently

The tank has a hull and a turret that rotate separately, like a real twin-stick game. WASD or the arrow keys (or the left stick) drive the hull, which turns smoothly toward the direction of travel with angDiff, a shortest-angle helper that avoids spinning the long way round. The turret eases toward the mouse position, the right stick, or the hull direction if no aim input exists, so the game is playable with a keyboard alone. A dashed laser sight is raycast from the barrel to the first wall, which shows exactly where a ricochet will start.

A tile arena that is fair and destructible

The map is a 16×16 grid with steel (indestructible), brick (three hits, with cracks that grow as it takes damage) and crates (one hit, 60% chance of a power-up). Every wave generates a new layout on the left half and mirrors it, so neither side has an advantage, then a flood fill checks that every enemy spawn can still reach the player and regenerates the map if steel has walled anything off. Movement collision is circle-versus-rectangle using the nearest point on each tile, resolved one axis at a time so tanks slide along walls instead of sticking.

Shells that ricochet, with sub-stepping

Shells move in sub-steps of about 4 px so a fast bullet can never tunnel through a wall. When a shell enters a solid tile the code compares the previous and current tile coordinates to decide which axis to flip, so it bounces off steel and the arena edge exactly once; hitting a brick damages it and ends the shell. Opposing shells cancel each other on contact, and friendly fire is off. Each shell draws a short fading trail and a glow.

Enemies that find their way

Scouts are fast and fragile, gunners are balanced, heavies carry five hits and fire two-shell bursts, and the boss fires a five-shell fan. Every tank runs the same loop. If it has a clear line (a raycast through the grid) it holds a preferred range, closing in when far, backing off when near and strafing in between. If the player is hidden it follows a breadth-first flow field, a distance map from the player's tile that is rebuilt every 0.35 seconds or when a wall breaks, always stepping to the neighbour with the lowest distance. Shots lead the target using distance / bulletSpeed and the player's velocity, fire only when the barrel is within about 20° of the target, and a small stuck detector nudges a tank that stops making progress.

Waves, power-ups and combos

Waves are generated from a formula (more gunners, then scouts, then heavies, and a boss on every fifth wave) and enemies are released through a spawn queue with a short warning ring, capped at six alive at a time. Power-ups drop from some kills and crates: repair, rapid fire, shield and triple spread. Kills within three seconds of each other build a combo multiplier up to x4.

Juice, sound and mobile support

Tracks, scorch marks and brick rubble are painted onto a persistent off-screen ground canvas instead of being redrawn, so they cost almost nothing. Muzzle flashes, sparks, smoke, shockwave rings, screen shake and a red hit flash sell every impact. Sound effects are synthesized with the Web Audio API, with a saved mute toggle, and the game pauses on blur or a hidden tab. Touch players get two on-screen sticks built from Pointer Events, with the aim stick firing automatically while it is pushed. The canvas is scaled by devicePixelRatio for sharp lines, and prefers-reduced-motion disables screen shake. For more canvas games see the Dodge the falling blocks game and the Asteroids Blaster game.