DungeonRenderer

A simple JavaScript class for rendering a first person grid dungeon from image atlases generated using the Dungeon Crawler Atlas Generator.

This is by no means the most flexible or optimal way to render a 2D dungeon using an image atlas, but I hope it serves as some inspiration and starting point for making your own 2D dungeon crawler.

Keyboard shortcuts:

Move forward:
W, Arrow Up, Numpad 8
Move backward:
S, Arrow Down, Numpad 5
Turn left:
Q, Arrow Left, Numpad 7
Turn right:
E, Arrow Right, Numpad 9

Files used in this demo:

JavaScript code how to instantiate the DungeonRenderer class.

            
var mapData = [
    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [1,0,0,0,0,0,0,1,0,0,0,1,0,0,0,1],
    [1,0,1,1,1,1,0,1,0,0,0,1,0,1,1,1],
    [1,1,0,0,0,0,0,0,0,1,0,0,0,0,0,1],
    [1,0,0,0,1,0,1,0,1,0,1,0,1,1,0,1],
    [1,0,1,0,1,0,1,1,1,0,1,0,1,0,0,1],
    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
    [1,0,1,0,1,0,0,0,1,1,1,0,0,0,0,1],
    [1,0,0,1,1,0,0,0,1,0,0,0,0,1,0,1],
    [1,0,0,0,0,0,1,0,0,1,0,0,1,1,0,1],
    [1,1,0,1,1,0,1,0,1,1,0,0,0,0,0,1],
    [1,0,0,0,1,0,0,0,0,0,0,1,1,0,1,1],
    [1,0,1,0,1,0,0,1,0,0,0,1,1,0,0,1],
    [1,1,1,0,0,0,1,1,1,0,1,1,0,0,0,1],
    [1,0,0,0,1,0,0,1,0,0,0,0,0,1,0,1],
    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
];

var dungeonRenderer = new DungeonRenderer("container", "./atlas.png", "./atlas.json", mapData);

var lastKeyDown = null;

document.body.onkeydown = function(event) {

    if (lastKeyDown != event.which) {
        switch(event.which) {
            case 37: case 103: case 81: {
                dungeonRenderer.turnLeft();
                lastKeyDown = event.which;
                event.preventDefault();
            } break;
            case 39: case 105: case 69: {
                dungeonRenderer.turnRight();
                lastKeyDown = event.which;
                event.preventDefault();
            } break;
            case 38: case 104: case 87: {
                dungeonRenderer.moveForward();
                lastKeyDown = event.which;
                event.preventDefault();
            } break;
            case 40: case 101: case 83: {
                dungeonRenderer.moveBackward();
                lastKeyDown = event.which;
                event.preventDefault();
            } break;
        }
    }

};

document.body.onkeyup = function(event) {
    if (lastKeyDown == event.which) {
        lastKeyDown = null
    }
};
            
        

dungeoncrawlers.org - Keep calm and crawl dungeons!
dungeon crawlers, rpg, rpg games, retro gaming, retro games
Copyright © 2014-2020. All rights reserved. Disclaimer