Adventure · Action RPG
Diablo JavaScript
An open-source isometric dungeon crawler built on HTML5 canvas that ports real Diablo II level and monster data: click the floor to walk, click a foe to swing.
Overview
Click a square of dungeon floor and the barbarian walks there; click a monster and he swings. That single-button loop is the whole engine of diablo-js, a 2012 HTML5-canvas experiment by developer mitallast that strips the action-RPG down to its isometric skeleton and ships it as roughly seven hundred lines of vanilla JavaScript, released under the MIT licence. What lifts it above a tech demo is its data: the bundled dttool extracts real map tiles, wall orientations, and monster sprite sheets straight from Diablo II's own file format, so the dungeon you wander is an authentic level pulled from the original game rather than a look-alike sketch. The hero is a Barbarian with a thousand-hit-point vitality orb drawn in the corner, a ten-slot belt of restorative potions along the bottom, and a critical-strike roll tucked into every swing. It appeals to action-RPG fans, Blizzard nostalgics, and anyone curious enough to read the source of a working isometric renderer.
How to Play
The objective is to clear the dungeon monsters without letting your vitality orb run dry. Move by clicking any walkable floor tile and the barbarian walks to that point; attack by clicking a monster inside the central interaction zone, which triggers an automatic swing and damage roll. Press Tab to toggle a full map overlay of the level. Healing potions sit in a ten-slot belt, and pressing the digit keys 1 through 9 and then 0 drinks the potion in the matching slot, restoring health and emptying that slot. A red arc in the lower-left orb tracks vitality, and monster health bars float above their sprites.
Tips & Strategy
Treat the critical-strike chance as your real damage engine: the Barbarian's swing has a forty-percent chance to land for four times the base value, so sustained engagements favour you on average even when an individual hit looks weak. Kite mobs instead of tanking the whole pack, because the three aggressive monster types drift toward you once you enter their radius and will pile on if you stand still; click a tile a few steps back, let them string out, then click the lead foe to finish it in isolation. Watch the vitality orb before it empties — regeneration ticks a small amount every couple of seconds, but a surround outpaces it, so drink a belt potion early with keys 1 through 0 rather than hoarding them. Tap Tab whenever the layout turns confusing, since the extracted Diablo II walls read as a maze and the map overlay reveals which arches actually connect. Click potions lying on the ground to bank them into the first free belt slot before pressing deeper into the level.
Controls
- Keyboard
- Tab — toggle full-screen map overlay1-9 then 0 — drink the potion in the matching belt slot
- Mouse
- Click a floor tile to walk there; click a monster in the central zone to attack; click a ground potion to bank it into the belt
Features
- Isometric tile renderer on HTML5 canvas in roughly 700 lines of vanilla JavaScript
- Authentic Diablo II level, wall, and monster sprite data extracted via the bundled dttool
- Barbarian hero with 1000 HP, a 40% critical-strike chance, and a 4x crit multiplier
- Ten-slot potion belt with hotkey drinking on keys 1 through 0
- Aggressive monster AI that paths toward the hero and swarms at close range
- Red vitality orb and a Tab-toggle full map overlay of the level