獲取隨機圖片，當點擊圖片爲JavaScript

Question

我目前正在學習Javascript，我能夠創建一個簡單的遊戲，形狀和顏色會改變，它會四處移動。我被困在如何輸入圖像...請幫助我！ =（謝謝！=）

這是網站的遊戲，我創建http://sites.codeschool.org.uk/?site=imat3ap0t

我想改變形狀以3張JPG圖片我已經和有它做同樣的事情。我很困難！

function getRandomColor() { 
    var letters = 'ABCDEF'.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();