Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Add items to array based on selection or set number

I’ve been experimenting with a Canvas for the first time and have a small game where obstacles randomly fly from the right to the left and the player on the left can move up and down to dodge them, score points for each dodge and it stores high scores.

I manually need to add obstacles to an array with a for loop to add them to a canvas at random x, y positions:

function ChooseRandom(min, max) { // random generator function
  return Math.random() * (max - min) + min;
}

const obstacles = [ // array of obstacles to create using randomly generated positions
  {
    x: ChooseRandom(500, 2500),
    y: ChooseRandom(0, 500),
    width: 50,
    height: 50
  },
  {
    x: ChooseRandom(500, 2500),
    y: ChooseRandom(0, 500),
    width: 50,
    height: 50
  },
  {
    x: ChooseRandom(500, 2500),
    y: ChooseRandom(0, 500),
    width: 50,
    height: 50
  }
]

for (let i = 0; i < obstacles.length; i++) { // loop creating the obstacles using array
    const obstacle = obstacles[i];

    ctx.fillRect( // create obstacle
      obstacle.x,
      obstacle.y,
      obstacle.width,
      obstacle.height
    );
}

The more items in the array the more difficult it becomes (as there’s more spawning in to avoid). Because each items uses the same code, is there a way to just type/set a number and it could populate the array with that many obstacle items in it?

Obviously this would save on code size but also I was thinking of adding a difficulty selection field, so if easy was selected it would only add maybe 6 obstacles on screen at any one time (6 items in the array), medium 12, hard 24 etc. So if there was away of populating the array with a number of duplicate items that can be generated from different set numbers, it would help in this situation.

Tags:

2

Answers


  1. 0

    I would do it like this:

    n = 6;
const obstacles = [];

for (let i = 0; i < n; i++) {
  const x = ChooseRandom(500, 2500);
  const y = ChooseRandom(0, 500);
  const obstacle = {
      x: x,
      y: y,
      width: 50,
      height: 50
  }
  obstacles.push(obstacle);
}

    You can set n to whatever number of obstacles you want to generate, create an empty obstacles array and populate the array by generating a new obstacle on each iteration of the loop. This does not prevent overlap though.

    Login or Signup to reply.
  2. 0

    You could use Factory function with configuration and some default values to generate your obstacles:

    function ChooseRandom(min, max) {
  return Math.random() * (max - min) + min;
}

function RandomObstacle({
  xMin = 500,
  xMax = 2500,
  yMin = 0,
  yMax = 500,
  w = 50,
  h = 50
} = {}) {
  return {
    x: ChooseRandom(xMin, xMax),
    y: ChooseRandom(yMin, yMax),
    width: w,
    height: h,
  }
}

let n = 3;

let obstacles = [];
for (let i = 0; i < n; i++) {
  // Using default values
  obstacles.push(RandomObstacle());
}
console.log(obstacles);

obstacles = [];
for (let i = 0; i < n; i++) {
  // Using custom configuration to override some of default values
  obstacles.push(RandomObstacle({xMin: 2000, h: 150}));
}
console.log(obstacles);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search