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

Question

我目前正在学习 Javascript，我能够创建一个简单的游戏，其中的形状和颜色会发生变化，并且会四处移动。我被困在如何输入图像上......请帮助我! =(谢谢!=)

这是我创建的游戏网站 http://sites.codeschool.org.uk/?site=imat3ap0t

我想将形状更改为我拥有的 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();

谢谢大家的回复!

Answer 1

那么你需要将你的函数修改成这样:

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>

然后您可以使用更多的 javascript 来查找图像并更改其 src 属性:

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