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>' }; 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 = ''; } } 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] = map[i].split(''); } document.getElementById('button-north').onclick = function () { playerMove(0, -1); }; document.getElementById('button-south').onclick = function () { playerMove(0, 1); }; document.getElementById('button-east').onclick = function () { playerMove(1, 0); }; document.getElementById('button-west').onclick = function () { playerMove(-1, 0); }; updateMap();
<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>
#maze { width: 10em; margin: 1em; } #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; } .tile { width: 1em; height: 1em; float: left; } .wall { color: gray; background: gray; } .floor { color: darkgray; background: darkgray; } .player { color: yellow; background: yellow; } .goal { color: red; background: red; } br { display: none; }