Realtime Strategy Game in JavaScript

demo.mp4

Hobby project of a browser-based RTS game built with vanilla JavaScript and the HTML5 Canvas API. Units (knights) navigate around obstacles using pathfinding and render on an isometric canvas. The project is still in progress.

Features

• Sprite animation — knight heroes and towers use sprite sheet animations with multiple channels (idle, walk, attack) and 32 directional sub-channels (all animation create in Blender)
• Pathfinding — Dijkstra's algorithm on a visibility graph built from obstacle footprints; heroes find shortest paths around towers
• Unit separation — heroes apply a separation force to avoid crowding each other while moving
• Clickable map — click anywhere on the canvas to send all heroes to that location
• Destructible towers — towers lose lives when attacked; hitting zero switches them to a destruction animation

Project Structure

File	Purpose
index.html	Entry point, canvas element
game.js	Game loop, Game, GameMap, Tower, HeroSprite, HexagonFootPrint
canvas.js	IsometricCanvas wrapper around the 2D context
animation.js	Animation — sprite sheet playback with channels and sub-channels
math.js	Vector, Angle, Matrix, Line, Hexagon — all game math

Running Locally

No build step required. Serve the project from any static file server, for example:

npx serve .
# or
python3 -m http.server

Then open http://localhost:3000 (or the port shown) in your browser.

Note: The game uses ES modules (type="module"), so it must be served over HTTP — opening index.html directly as a file:// URL will not work.

How It Works

1. Game loop — setInterval fires at 10 FPS.
2. Map graph — on startup, a visibility graph is built: edges connect tower hexagon footprint vertices to each other, keeping only edges that don't cross any footprint interior.
3. Pathfinding — each hero extends the graph with edges from its current position and target, then runs Dijkstra to find the next waypoint. This happens per each tick for now later will be optimized.
4. Movement — heroes move toward the next waypoint, rotating smoothly, and apply a lateral separation vector when another hero is too close ahead.
5. Rendering — game objects are depth-sorted by y position and drawn back-to-front each tick.