在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!