javascript - 2D array initilisation speed

Question

I'm making a 2D isometric game where the tile map is held in a 2D array. Here's what a 16*16 map looks like just so you get the idea:

enter image description here

Before the game loop begins the size and contents of the map array must be initialized and I have noticed that this is one of the biggest bottlenecks when loading the program. If the map is 5000*5000 it can take about 7 seconds on my relatively high end computer (which i figure seems pretty slow).

Is this more a problem with the speed of javascript or is my code doing something wildly inefficient?

The array which holds the tile contents is initialized like so:

// Create Array to represent tile contents
mapArray = new Array(mapWidth);
for (var i = 0; i < mapWidth; i++) {
    mapArray[i] = new Array(mapHeight);
    for (var j = 0; j < mapHeight; j++) {
        mapArray[i][j] = new Tile("water", 0, false);
    }
}

and the objects which that array hold is the tile class below:

// Tile class
function Tile(type, height, mouseOver) {
    // Add object properties like this
    this.type = type;
    this.height = height;
    this.mouseOver = mouseOver;
}

Consider that you are loading 5000*5000 = 25,000,000 tile objects into memory. That's a lot! It may make more sense to initialize objects that are local to the current player's location. Think MineCraft, where only the nearest 144x144 area is loaded at any one time. — mellamokb
– mellamokb, Commented May 24, 2014 at 18:10
Hmmm, that is food for thought. Thank you. I suppose exactly what I want to do with the game engine will ultimately determine if the method you describe above is best. For example, if I want to implement some soft of mini-map overview, that would require that the whole map was already initialized in order to view it. — Suipaste
– Suipaste, Commented May 24, 2014 at 18:20

Wex · Accepted Answer · 2014-05-24 18:32:00Z

1

If you're registering individual event listeners to each tile, that could certainly slow down your program. Consider cutting down the number of listeners by only listening to mouseover/mousemove events on the container, and then deriving the tile from the (x, y) coordinates of the mouse.

answered May 24, 2014 at 18:32

Wex

15.7k10 gold badges68 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Suipaste Over a year ago

Thanks, the mouse over variable is actually unused and I'm already doing it how you suggest but I suppose that also means it's a variable which is being declared 25,000,000 times more than it needs to be! I'll remove that...

Collectives™ on Stack Overflow

javascript - 2D array initilisation speed

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related