MAZE RUNNER

by Daniel Hall

HTML

<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;
}
#buttons {
    text-align: center;
    display: inline-block;
    margin-left: 1em;
}
.button {
    padding: 1em 0.5em;

JavaScript

var map, player = { x: 1, y: 8 }, i, maze = document.getElementById('maze'), win;
function mapToHTML(map) {
    var html = '', x, y, dictionary = {
        'H': '<span class="tile wall">H</span>',
        '.': '<span class="tile floor">.</span>',
        '@': '<span class="tile player">@</span>',
        'X': '<span class="tile goal">X</span>',
				'Y': '<span class="tile top">Y</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 (map[toY][toX] === 'X') {
        maze.innerHTML = 'YOU WIN';
        document.getElementById('buttons').innerHTML = 'YYYY';
    }
}
map = [
    'HHHHHHHHYHHHHHHXH',
    'HHH.HHHHHHHHHHHHH',
    'HHHHHHHH...HHHHHH',
    'H..HHHHHHH.HHHHHH',
    'HHHH..HHHH.......',
    'HH......HHHHHH.HH',
    'HH.H.H.H.HHHHH.HHH',
    'HH.HHHHH.HHHHH.HH',
    'H........H......',
    'HHHHH.H.HHH.HHHH',
    'H...H.H.HH......',
    'H.H...H.HHHHHHH.',
    'HHH.HHH.HHHHHHH.',
    'HHHXHHH.........',
    ];
for (i = 0; i < map.length; i += 1) {
    map[i] = map[i].split('');
}
document.getElementById('button-north').onclick = function () {
    playerMove(0, -1);
};
document.getElementById('button-south').onclick = function () {
    playerMove(0,...