Search code examples
javascriptarraysrandom2dfill

Filling up a 2D array with random numbers in javascript


I'm really sorry if anything like this has been posted here before but I couldn't find anything, I'm kinda new to the site still!

So for a while now I've been learning a bit about game development through html5 and javascript and I stumbled upon making tileset maps, I now have a tileset and an 2D array that I want to put certain tiles in (the number varies between 6 and 10 in this case). I figured it could be a cool function to make the map choose between a small set of similar tiles so I don't have to specifically number every tile in the array(just define the type)

The method I have currently is probably the best for being able to define types but I want something that looks a bit cleaner and/or information to why my "cleaner" version dosen't work.

var ground = [
    [tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile()],
    [tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile()],
    [tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile()],
    [tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile()],
    [tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile()],
    [tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile()],
    [tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile()],
    [tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile()],
    [tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile()]];

function tile() {
    var y = (Math.random() * 5 | 0) + 6;
    return y;
}

This is the code I've been using so far, I have to edit every element of the code with the tile() function to get a random number in each one, what I wanted to have was something like this:

for (var i = 0 ; i < 15; i++) {
    for (var j = 0; j < 9; j++) {
        ground[[i],[j]] = (Math.random() * 5 | 0) + 6;
    }
}

to fill the array without having to add the function to each spot.

I have a feeling that I'm missing a return function or something along those lines but honestly I have no idea.


Solution

  • You were thinking in the right direction but there are some errors in your code ;)

    • You have to initialize the array first before you can push elements into it.
    • And you were counting i++ twice

    Javascript

    var ground = []; // Initialize array
    for (var i = 0 ; i < 15; i++) {
        ground[i] = []; // Initialize inner array
        for (var j = 0; j < 9; j++) { // i++ needs to be j++
            ground[i][j] = (Math.random() * 5 | 0) + 6;
        }
    }
    

    Maybe even better (reusable)

    function createGround(width, height){
        var result = [];
        for (var i = 0 ; i < width; i++) {
            result[i] = [];
            for (var j = 0; j < height; j++) {
                result[i][j] = (Math.random() * 5 | 0) + 6;
            }
        }
        return result;
    }
    // Create a new ground with width = 15 & height = 9
    var ground = createGround(15, 9);