如何在HTML5 Canvas+JavaScript场景中为数组元素分配随机整数值

Hey there! Let's tackle how to assign random integers to your chestArray elements. Here are a few straightforward approaches tailored to your Canvas/JavaScript development setup:

If you want to fill the entire 9-length array with random integers right away, you can use a combination of fill() and map():

// Generate random integers between 0 and 100 (adjust the range as needed)
var chestArray = new Array(9).fill(0).map(() => Math.floor(Math.random() * 101));

• fill(0) first populates the array with placeholder values
• map() replaces each placeholder with a random integer
• To generate integers between a custom min and max, use this formula instead:

  Math.floor(Math.random() * (max - min + 1)) + min
  

If you prefer more granular control (like setting different ranges for specific elements), a for loop works perfectly:

var chestArray = new Array(9);
// Fill each index with a random integer between 1 and 5 (example range)
for (let i = 0; i < chestArray.length; i++) {
  chestArray[i] = Math.floor(Math.random() * 5) + 1;
}

Since you're drawing multiple chests, you can pair the random array with a loop to simplify your repeated drawImage calls:

var chestArray = new Array(9).fill(0).map(() => Math.floor(Math.random() * 3)); // 0=closed, 1=opened, 2=claimed
var chest = new Image();
chest.src = "./assets/chest.png";
// Optional: Load an opened chest image if needed
// var openedChest = new Image();
// openedChest.src = "./assets/chest-opened.png";

chest.onload = function () {
  // Store all chest positions in an array for easier looping
  const chestPositions = [
    [150, 280], [320, 280], [490, 280],
    [150, 420], [320, 420], [490, 420],
    [150, 560], [320, 560], [490, 560]
  ];

  chestPositions.forEach((pos, index) => {
    const [x, y] = pos;
    // Draw base chest, or switch image based on random value
    if (chestArray[index] === 1) {
      // ctx.drawImage(openedChest, x, y, 200, 177);
    } else {
      ctx.drawImage(chest, x, y, 200, 177);
    }
  });
};

内容的提问来源于stack exchange，提问作者kelso