Filling up a 2D array with random numbers in javascript

Question

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.

Answer 1

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);

Answer 2

Here's a quick example. I've created a function that will take in a width and height parameter and generate the size requested. Also I placed your tile function inside generate ground to keep it private, preventing other script from invoking it.

var ground = generateGround(10, 10); //Simple usage

function generateGround(height, width)
{
  var ground = [];
  for (var y = 0 ; y < height; y++) 
  {
    ground[y] = [];
    for (var x = 0; x < width; x++) 
    {
        ground[y][x] = tile();
    }  
  }
  return ground;

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

http://jsbin.com/sukoyute/1/edit

Answer 3

Try removing the comma from...

ground[[i],[j]] = (Math.random() * 5 | 0) + 6;

...in your 'clean' version. Also, your incrementing 'i' in both for loops:

for (var i = 0 ; i < 15; i++) {
for (var j = 0; j < 9; i++) {

Hopefully these changes make it work for you :)