Maze Runner (ASCII)

A simple, ASCII-based maze game to demonstrate how to start using progressive enhancement in browser-based games.

by justin_c_rounds

HTML

<script src="https://dl.dropboxusercontent.com/u/625330/modernizr-custom.js"></script>
<div>
        <fieldset>
            <legend>Display mode:</legend>
            <label><input type="radio" class="switch-display" name="switch-display" value="ascii">ASCII</label>
            <label><input type="radio" class="switch-display" name="switch-display" value="simple">Simple</label>
            <label><input type="radio" class="switch-display" name="switch-display" value="enhanced" checked="checked">Enhanced</label>
        </fieldset>
    </div>
    <pre id="maze"></pre>
    <div id="buttons">
        <button id="button-north" class="button">NORTH</button>
        <button id="button-west" class="button">WEST</button>
        <button id="button-east" class="button">EAST</button>
        <button id="button-south" class="button">SOUTH</button>
    </div>

CSS

#maze {
    width: 10em;
    margin: 1em;
    display: inline-block;
}

#buttons {
    text-align: center;
    display: inline-block;
    margin-left: 1em;
}

.button {
    padding: 1em 0.5em;
    background: lightblue;
    display: inline-block;
    width: 5em;
}

#button-north,
#button-south {
    display: block;
    margin: 0 auto;
}

.display-simple .tile,
.display-enhanced .tile {
    color: transparent;
    width: 1em;
    height: 1em;
    float: left;
}

.display-simple .wall {
    background: gray;
}

.display-simple .floor {
    background: darkgray;
}

.display-simple .player {
    background: yellow;
}

.display-simple .goal {
    background: red;
}

.display-simple br,
.display-enhanced br {
    display: none;
}

html.backgroundsize .display-enhanced .tile {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: transparent;
}

html.backgroundsize #maze.display-enhanced {
    color: #ccc;
    text-align: center;
    font-weight: bold;
    background-size: 1em 1em;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAD1BMVEULCwslJSUKCgoVFRUbGxvoRClcAAAAOElEQVQIHWMwhgIGExcXZyB2YDBxdHECYQYTQSADiEFSTiCMYBi5uCiBMIOxkpISCDOgm+NMnjkAAascBi14w+MAAAAASUVORK5CYII=');
}

#buttons {
    vertical-align: top;
    margin-left: 0;
    margin-top: 1em;
}

html.backgroundsize .display-enhanced .wall {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAABGdBTUEAALGPC/xhBQAAAAxQTFRFEQoHb19XMCYgT0E7gu+CdAAAAChJREFUCNdj4GrgamC4Gnc1juH/v///IARQiIsBKHSVAcj7DyGIVAcAvq4tuTilersAAAAASUVORK5CYII=');
}

html.backgroundsize .display-enhanced .goal {
    background-image:...

JavaScript

var map, player = {
    x: 1,
    y: 8
},
    i, maze = document.getElementById('maze'),
    win, playerDirection = 'north';

function mapToHTML(map) {
    var html = '',
        x, y, dictionary = {
            'H': '<span class="tile wall">H</span>',
            '.': '<span class="tile floor">.</span>',
            '@': '<span class="tile player ' + playerDirection + '">@</span>',
            'X': '<span class="tile goal">X</span>'
        };
    for (y = 0; y < map.length; y += 1) {
        for (x = 0; x < map[y].length; x += 1) {
            html += dictionary[map[y][x]];
        }
        html += '<br>';
    }
    return html;
}

function updateMap() {
    var displayMap = [],
        x, y;
    for (y = 0; y < map.length; y += 1) {
        displayMap[y] = displayMap[y] || [];
        for (x = 0; x < map[y].length; x += 1) {
            displayMap[y][x] = map[y][x];
        }
    }
    displayMap[player.y][player.x] = '@';
    for (y = 0; y < displayMap.length; y += 1) {
        displayMap[y] = displayMap[y].join('');
    }
    maze.innerHTML = mapToHTML(displayMap);
}

function playerMove(x, y) {
    var toX = player.x + x,
        toY = player.y + y;
    if (map[toY][toX] === '.' || map[toY][toX] === 'X') {
        player.x = toX;
        player.y = toY;
        updateMap();
        if (document.body.className !== 'ready') {
            // this is a bit kludgey, but if we set the className every time it breaks the animation (at least in safari)
            document.body.className = 'ready';
        }
    }
    if (map[toY][toX] === 'X') {
        maze.innerHTML = 'YOU WIN';
        document.getElementById('buttons').innerHTML = '';
    }
}

function updateDisplay(type) {
    maze.className = 'display-' + type;
}
map = [
    'HHHHHHHHHH',
    'HH......XH',
    'HH.H.H.H.H',
    'HH.HHHHH.H',
    'H........H',
    'HHHHH.H.HH',
    'H...H.H.HH',
    'H.H...H.HH',
    'H.H.HHH.HH',
    'HHHHHHHHHH'
    ];
for (i = 0; i < map.length; i += 1) {
    map[i] =...