将随机整数值分配给数组项答案

【问题标题】：Assigning a random integer value to an array item将随机整数值分配给数组项
【发布时间】：2018-03-31 00:02:23
【问题描述】：

(HTML5 Canvas, JavaScript) 你好，我有这个数组：

        var chestArray = new Array(9);
        chestArray[0] = "./assets/chest.png";

        var chest = new Image();
        chest.onload = function () {
            ctx.drawImage(chest, 150, 280, 200, 177);
            ctx.drawImage(chest, 320, 280, 200, 177);
            ctx.drawImage(chest, 490, 280, 200, 177);
            ctx.drawImage(chest, 150, 420, 200, 177);
            ctx.drawImage(chest, 320, 420, 200, 177);
            ctx.drawImage(chest, 490, 420, 200, 177);
            ctx.drawImage(chest, 150, 560, 200, 177);
            ctx.drawImage(chest, 320, 560, 200, 177);
            ctx.drawImage(chest, 490, 560, 200, 177);
        };
        chest.src = chestArray[0];

我还有一个按钮，它生成一个 0 到 8 之间的随机数：

    function randomBox() {
        alert('it worked! ' + Math.floor(Math.random() * chestArray.length));
    }

无论生成什么随机数，我都希望它使用正确的箱子执行任务，但首先我需要一种方法将上述数组中的 9 个箱子中的每一个分配给按 0 到 8 排序的数字。什么是最简单的方法是什么？我以为我可以在阵列中单独分配每个箱子，但无论我做错了什么，它都不起作用。任何帮助将不胜感激。

【问题讨论】：

为什么？你在做什么？这当然是 X/Y 问题。您的问题措辞不佳，但我猜您想绘制所有箱子，然后对随机箱子做“某事”，这是正确的吗？
是的。我已经画好了箱子。
你想对随机宝箱做什么？
它将显示一个图像。让我说得更清楚一点，因为我的问题措辞不是很好。我有9个盒子。它们在一个数组中，全部显示并准备就绪。我有一个按钮。我单击按钮，它给了我一个介于 0 到 8 之间的随机数。假设它给我的数字是 5 - 我希望我的程序说好的，那就是 6 号框。我需要一种方法来链接这两个东西，以便然后，我可以让框在发生这种情况时显示图像。
所以你想显示9张图片，随机一张画一张特定的图片，其余的画一张胸部图片？第一步是加载 2 个图像，胸部和这个 other 图像。然后你想阅读 DILP 的答案，将你的 9 个图像对象/箱子放在一个数组中。在绘制图像之前，您需要使用生成的随机整数将数组项的 src 更改为 other 图像（不是胸部）。请参阅我的答案以了解如何为数组中的随机项赋值。

标签： javascript arrays html html5-canvas

【解决方案1】：

通过将项目放入一个数组开始，您将能够在以后引用它们。我不太清楚你要做什么，但这可能会有所帮助：

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.src = "https://mdn.mozillademos.org/files/5395/backdrop.png";
  var chestArr = [
    {image:img,dx:150,dy:280,dWidth:200,dHeight:177},
    {image:img,dx:320,dy:280,dWidth:200,dHeight:177},
    {image:img,dx:490,dy:280,dWidth:200,dHeight:177},
    {image:img,dx:150,dy:420,dWidth:200,dHeight:177},
    {image:img,dx:320,dy:420,dWidth:200,dHeight:177},
    {image:img,dx:490,dy:420,dWidth:200,dHeight:177},
    {image:img,dx:150,dy:560,dWidth:200,dHeight:177},
    {image:img,dx:320,dy:560,dWidth:200,dHeight:177},
    {image:img,dx:490,dy:560,dWidth:200,dHeight:177}
  ];

    chestArr.forEach(function(chest){
      ctx.drawImage(chest.image, chest.dx, chest.dy, chest.dWidth, chest.dHeight);
    });

}

这假设您有一个 "onload=draw()" 并且在您的标记中设置了画布元素。

【讨论】：

您好，感谢您的评论。我已经有一个数组中的项目，我想要做的是当我点击我的按钮时，随机数组项目（在本例中是一个箱子）发生了一些事情。
您的问题表明您没有将箱子分配到数组中。 new Array(9) 在数组中创建 9 个未定义的值，然后将字符串分配给第一项。
箱子在一个数组中，因为我使用 X、Y、宽度、高度值将它们绘制在画布上。他们都在出现。 (9) 可以为随机生成器提供范围。
不，它们不是 in 数组。您正在调用 ctx.drawImage 9 次，代码中的数组包含 8 个 undefined 值和 1 个 string 值。

【解决方案2】：

要为数组项分配值（例如数字），请使用方括号和要为其分配值的项的从零开始的索引。

例如：

const arr = ["foo", "bar", "baz"];
arr[1] = true;
//now arr contains ["foo", true, "baz"];

要将您的箱子分配到一个数组中，请参阅DILP's answer 了解如何执行此操作。

在这里，您可以将true 分配给 9 项数组的随机项：

function randomInteger(max){
  return Math.floor(Math.random()*max);
}
//create an array of undefined values of length 9
const arr = new Array(9);

//assign true to a random array item (do "something" with this random array item)
arr[randomInteger(arr.length)] = true;

console.log(arr);

【讨论】：