单击javascript的图像时获取随机图像

我目前正在学习Javascript，我能够创建一个简单的游戏，在这个游戏中，形状和颜色会发生变化，它会四处移动。我被困在如何输入图像…请帮助我！！=谢谢大家!=

这是我创建的游戏的网站

我想改变形状，以3 jpg图片，我有，并让它做同样的事情。我被卡住了

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split(''); //the numbers&letters are for color codes. split is the string (set of numbers and letters into an array)
    var color = '#'; //color codes start with #
    for (var i = 0; i < 6; i++) {
        color += letters[Math.round(Math.random() * 16)];
    }
    return color;
}

var clickedTime;
var createdTime;
var reactionTime;

function makeBox() {
    var time = Math.random();
    time = time * 5000;

    setTimeout(function () {
        if (Math.random() > 0.5) {
            document.getElementById("box").style.borderRadius = "100px";
        } else {
            document.getElementById("box").style.borderRadius = "0";
        }

        var top = Math.random();
        top = top * 300;
        var left = Math.random();
        left = left * 500;
        document.getElementById("box").style.top = top + "px";
        document.getElementById("box").style.left = left + "px";
        document.getElementById("box").style.backgroundColor = getRandomColor();
        document.getElementById("box").style.display = "block";
        createdTime = Date.now();
    }, time);
}

document.getElementById("box").onclick = function () {
    clickedTime = Date.now();
    reactionTime = (clickedTime - createdTime) / 1000;
    document.getElementById("time").innerHTML = reactionTime;
    document.getElementById("box").style.display = "none";
    makeBox();
}

makeBox();

---

谢谢你们的回复

您需要将函数修改为以下内容：

function getRandomImage() {
    // All of the image options
    // This is very similar to string of characters you have now
    var images = ['path/to/image/1', 'path/to/image/2', 'path/to/image/3']

    // Randomly select one image path
    // By using images.length we don't have to hardcode the length like the "16" you're using, which is good incase the list changes
    var imagePath =  images[Math.floor(Math.random() * images.length)];

    // Return random image path
    return imagePath;
}

然后，您可能希望在文档中的某个位置使用img标记，而不是现在使用的div：

<img id="changing-image"></img>

---

创建一个包含图片名称的数组，并使用Math.randoom选择一个“随机”图片。从计算机的角度来说，并没有什么是真正随机的。之后，你必须设置图片的src属性。如果你只是提供答案，他什么也学不到。我认为最好给他一些提示，让他自己了解它是如何工作的。我想这永远是最好的选择。我试着添加一些注释来解释每一行都在做什么，希望OP能从这些注释中学习。嘿，泰勒，非常感谢你的帮助。我使用了你的代码和我学到的东西，它成功了！伙计，我知道你不回答是什么意思。我真的试着去寻找答案，但是没有用…所以我决定寻求帮助。我在这方面非常新，我希望我能学到更多，并且能够在不需要太多帮助的情况下编写代码。这是我为我的在线课程制作的。我现在唯一的问题是定位问题，所以我现在正在研究这个问题@泰勒：谢谢你！

var image = document.getElementById("changing-image");
image.src = getRandomImage();