Populating a two-dimensional array with randomly generated numbers using javascript

Question

Populating a two-dimensional array with randomly generated numbers using javascript

Apologies if this has been asked before, but I couldn't find any previous posts on the topic as I'm still fairly new to this site!

Lately, I've been exploring game development using HTML5 and JavaScript and have gotten into creating tileset maps. I currently have a tileset and a 2D array where I want to assign specific tiles (usually between 6 and 10). I thought it would be neat to create a function that allows the map to randomly select from a small set of similar tiles, rather than assigning a number to each tile in the array.

The method I'm using now works for defining types, but I'm looking for a cleaner solution or an explanation of why my "cleaner" version isn't working.

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()],
    // More rows...
];

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

This is the code I've been using so far, where I have to manually add the 'tile()' function to each element to generate random numbers. What I'd like is something like:

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

This way, I can fill the array without having to individually apply the function to each position. I suspect I might be missing a return statement or something similar, but I'm not entirely sure.

javascript arrays random 2d fill

Answer 1

Answer №1

Your code was on the right track, but there were a couple of errors that needed fixing ;)

Remember to initialize the array before pushing elements into it.
Also, make sure you are incrementing the correct variable in your loop.

Here's the corrected Javascript:

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

If you want a more reusable solution, try this function:

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

Your code was on the right track, but there were a couple of errors that needed fixing ;)

Remember to initialize the array before pushing elements into it.
Also, make sure you are incrementing the correct variable in your loop.

Here's the corrected Javascript:

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

If you want a more reusable solution, try this function:

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 3

Answer №2

Let me show you an example. I've crafted a function that can produce a specified size based on given width and height parameters. Additionally, I enclosed your tile function inside generate ground to maintain privacy, preventing outside scripts from accessing it.

var ground = generateGround(10, 10); //Easy implementation

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 4

Let me show you an example. I've crafted a function that can produce a specified size based on given width and height parameters. Additionally, I enclosed your tile function inside generate ground to maintain privacy, preventing outside scripts from accessing it.

var ground = generateGround(10, 10); //Easy implementation

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 5

Answer №3

Consider eliminating the comma from...

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

...in your revised version. Also, ensure that you are incrementing 'i' correctly in both for loops:

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

These adjustments should help resolve the issues for you :)

Answer 6

Consider eliminating the comma from...

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

...in your revised version. Also, ensure that you are incrementing 'i' correctly in both for loops:

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

These adjustments should help resolve the issues for you :)

Populating a two-dimensional array with randomly generated numbers using javascript

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble with babel-loader, encountering an issue with UglifyJS (ES6) causing errors

Do not use Express.js to serve the index.html file

"Utilizing JavaScript to filter JSON data at a deep nested

Is Socket.io combined with Redis the best architecture for an interactive gaming experience?

Inject some content into the page with the power of jQuery

Function executed many times during click action

Utilizing additional PHP files to handle the AJAX post request and subsequently execute the PHP script

What is the correct method for compiling a list of users?

What is the best way to make text appear as if it is floating in Jade or HTML?

Tips for obtaining the final document in a VueFire query

Obtain the index of the selected item from a dropdown menu

Mandatory press for a function known as a click

Converting JSON to C# object in order to showcase nested array as a string within a grid display

Ways to halt a CSS animation when it reaches the screen boundary

Once the PostgreSQL container is stopped with docker-compose down, the previously used port becomes unavailable for use again

Obtain the row ID from a database by selecting checkboxes

Tips for executing getJSON requests one after the other

What is the process for retrieving the data from the POST request body on the client side?

Restrict access to table records by specifying an array of row identifiers

How can you incorporate a custom button into the controlBar on videoJS in responsive mode?