:: Start
<% /* 0s are walls, 1 are spaces, 2 is the goal. */ var maze = [ [0,0,0,0,0,0,0,0,0,0,0], [0,1,1,1,0,1,1,1,1,1,0], [0,0,0,1,0,0,0,0,0,1,0], [0,1,0,1,1,1,1,1,0,1,0], [0,1,0,0,0,0,0,1,0,1,0], [0,1,1,1,1,1,1,1,0,1,0], [0,0,0,0,0,0,0,1,0,1,0], [0,1,0,1,1,1,1,1,1,1,0], [0,1,0,1,0,0,0,1,0,0,0], [0,1,1,1,0,1,1,1,1,2,0], [0,0,0,0,0,0,0,0,0,0,0] ]; /* Where the player starts. The top left is (0, 0). */ var positionX = 1, positionY = 1; function renderMaze() { /* Transform the maze into ASCII art. */ /* What characters we use to display the maze. */ var displayChars = ['#', '.', 'E']; $('.maze').html(maze.map(function(row, renderY) { return row.reduceRight(function(html, cell, renderX) { if (renderX === positionX && renderY === positionY) { return 'P' + html; } return displayChars[cell] + html; }, '
'); })); } function updateMoves() { /* Enable/disable buttons to move based on what's allowed. We take advantage of the fact that both 0 and undefined (outside the maze) are converted to false by JavaScript by the ! operator. */ $('[data-move="n"]').attr('disabled', !maze[positionY - 1][positionX]); $('[data-move="s"]').attr('disabled', !maze[positionY + 1][positionX]); $('[data-move="e"]').attr('disabled', !maze[positionY][positionX + 1]); $('[data-move="w"]').attr('disabled', !maze[positionY][positionX - 1]); } $(function() { renderMaze(); updateMoves(); /* Change position when the user clicks an appropriate link. We depend on updateMoves() to prevent the user from walking through a wall. */ $('[data-move]').click(function() { var direction = $(this).data('move'); switch (direction) { case 'n': positionY--; break; case 's': positionY++; break; case 'e': positionX++; break; case 'w': positionX--; break; default: throw new Error('Don\'t know how to move ' + direction); } if (maze[positionY][positionX] === 2) { story.show('Exit'); } else { renderMaze(); updateMoves(); } }); }); %> :: Exit You've escaped this fiendish maze!