"Moving through a 'dungeon": Snowman (1.3.0)

Summary

"Moving through a 'dungeon'" creates a multidimensional array. Movement positions are then tracked through X and Y variables for a grid system. Each movement subtracts or adds to its cooresponding X or Y position and is compared to those same positions within the array. Different directions are shown if movement is possible in that direction.

Live Example

Download: Live Example

Twee Code

:: Start
<div class="maze"></div>

<button type="button" data-move="n">North</button>
<button type="button" data-move="s">South</button>
<button type="button" data-move="e">East</button>
<button type="button" data-move="w">West</button>

<%
/* 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;
        }, '<br>');
    }));
}

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!

Download: Twee Code

Setting and Showing Variables, Conditional Statements

results matching ""

    No results matching ""