What is the best and safest way to run code from an array in Javascript?

Question

So this is most likely the wrong way to do this, but I've been giving some thought to this approach for a while and I can't think of a better way to do it.

I am working on a roguelike game with a friend using Javascript and Canvas for the front end and storing our data (monsters, items, etc) into a MySQL database using PHP.

We have divided our playing field into four separate quadrants. The entire play field is a 20 x 20 square and so we have been coding 10 x 10 dungeon quadrants. The idea is to grab code from an array with dungeon quadrant code within it and somehow execute this code. Currently we have four quadrant functions we are calling which draw the environment objects within those quadrants and give them values, but those are hard coded in the functions. I would like to be able to randomly choose a value from the array and place that code inside those functions instead.

I've heard tell of a mysterious and black magic laden procedure called eval(). Do I need to turn to the dark side or is there a better way?

I'll include a little code so you can see the basic idea.

////Matrix creation / declaration
var coordinates = new Array(mapWidth);
for (var i = 0; i <mapWidth; i++) {
    coordinates[i] = new Array(mapHeight);          
}

//sets array to 0 which is not an object
for (var i=0; i<mapWidth; i++) {
    for (var j=0; j<mapHeight; j++) {
        coordinates[i][j] = 0;
    }
}

function quadrantOneLoader()
{
    var x = 0;
    var y = 0;

    for (var i = 0; i < 10; i++)
    {
        if (i % 2 === 1 && i != 3)
        {
            coordinates[x + i][y + 1] = new environment();
            coordinates[x + i][y + 1].image.src = "images/column.png";
        }
        else if (i % 2 === 1)
        {
            coordinates[x + i][y + 1] = new environment();
            coordinates[x + i][y + 1].image.src = "images/brokenColumn.png";
        }
    }

    for (var i = 0; i < 10; i++)
    {
        if (i % 2 === 0 && i !== 8)
        {
            coordinates[x + i][y + 3] = new environment();
            coordinates[x + i][y + 3].image.src = "images/column.png";
        }
        else if (i % 2 === 0)
        {
            coordinates[x + i][y + 3] = new environment();
            coordinates[x + i][y + 3].image.src = "images/brokenColumn.png";
        }
    }

    for (var i = 0; i < 10; i++)
    {
        if (i % 2 === 0 && i !== 4)
        {
            coordinates[x + i][y + 7] = new environment();
            coordinates[x + i][y + 7].image.src = "images/column.png";
        }
        else if (i % 2 === 0)
        {
            coordinates[x + i][y + 7] = new environment();
            coordinates[x + i][y + 7].image.src = "images/brokenColumn.png";
        }
    }

    for (var i = 0; i < 10; i++)
    {
        if (i % 2 === 1 && i !== 7)
        {
            coordinates[x + i][y + 9] = new environment();
            coordinates[x + i][y + 9].image.src = "images/column.png";
        }
        else if (i % 2 === 1)
        {
            coordinates[x + i][y + 9] = new environment();
            coordinates[x + i][y + 9].image.src = "images/brokenColumn.png";
        }
    }

    coordinates[x + 1][y + 5] = new environment();
    coordinates[x + 1][y + 5].image.src = "images/stocks.png";

    coordinates[x + 4][y + 5] = new environment();
    coordinates[x + 4][y + 5].image.src = "images/candelabra.png";

    coordinates[x + 7][y + 5] = new environment();
    coordinates[x + 7][y + 5].image.src = "images/stocks.png";
}

So basically the code that is inside the quadrantOneLoader() function would be placed inside an array. I want to inject that into this function so it would look more like this:

function quadrantOneLoader()
{
    var x = 0;
    var y = 0;

    quadrants[Math.floor(Math.random()*quadrants.length())];
}

Answer 1

We ended up doing something simple like this:

var dungeonCode = new Array();

dungeonCode[0] = function(/*pass whatever you want here, we chose to pass x and y*/)
{
    //code to place the dungeon tiles here
}

Then to call it all you do is:

dungeonCode[0]();

We ended up making a bunch of these dungeon quadrants and calling them using a random number generator.

I guess the parenthesis tell the interpreter to execute whatever code contained within the array as a function. Neat!

Answer 2

It's hard to see what you're trying to accomplish with eval without seeing some actual code,but a shot in the dark is you could utilize javascript closures to encapsulate the data. You could have an array of functions that return a function that manipulates the data in them and then pass those functions into the function that needs to call on the data;

function quadrantBehaviourBuilderOne(someValOne,someValTwo,someValThree){
    var quadrantBehaviour = function(){
        var something = someValueOne - (someValueTwo * someValThree);
        return something;
    }
    return quadrantBehaviour;
}

var behaviourBuilderArray = [quadrantBehaviourBuilderOne,someOtherBuilder,etc];

function somethingThatWorksWithTheBuilder(someBuiltFunction){
       someBuiltFunction();
}

var trees = 5;
var plants = 10;
var locknessmonsters = 350;

var randomNumber = 0;
var myBuiltBehaviourFunction = behaviourBuilderArray[randomNumber](trees,plants,locknessmonsters);
somethingThatWorksWithTheBuilder(myBuiltBehaviourFunction);