生成隨機圖像而不重複這些圖像

我正在處理我的第一個Javascript遊戲，但我卡住了..我想創建一個隨機顯示圖像而不重複它們的遊戲。在圖片下面，我想給出一個4-10之間的隨機數字。這是我的代碼，但它不工作，我完全不知道該怎麼做。生成隨機圖像而不重複這些圖像

長話短說：用戶必須按開始，然後出現隨機數的隨機圖像。我只想一次顯示這些圖像。

任何幫助，將不勝感激;-)

這裏是我的代碼：

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>Deeltoets 3</title> 

     <meta name="description" content="Deeltoets 3"> 
     <meta name="author" content="Gijs van de Wal"> 
     <script src="deeltoets3.js"></script> 
    </head> 

    <body><div id="displayImage"> 
     <h1>The friends checker!</h1> 
     <h2>Who are you real friends?</h2> 
       <p> press start to begin</p> 


     <button id="submit();" name="submit" id="submit" type="submit">Start</button> 
     </div> 
    </body> 
</html>   

Javascript: 

window.onload = function(){ 

    var randomImage = function(){ 
     var myImages = new Array() 
     myImages[1]="media/1.jpg" 
     myImages[2]="media/2.jpg" 
     myImages[3]="media/3.jpg" 
     myImages[4]="media/4.jpg" 

     var i = Math.floor(Math.random() * myImages.length); 
     if (i==0){ 
      i=1; 
     } 
     document.getElementById('displayImage').innerHTML = '<img src="'+myImages[i]+'" border="0">'; 
    } 

    randomImage(); 


    var generateNumber = function(){ 
     return Math.floor(Math.random()* 7)+ 4; 
    } 

    var check = function(){ 
    var generatedNumbers = [], 
    beoordelen = generateNumber(); 
    if() { 
     giveNumber = Math.floor(Math.random()* 7)+ 4; 
    } else { 
     generatedNumbers.push(giveNumber); 
    } 

    document.getElementById('submit').innerHTML = "This person deserves a"+giveNumber+""; 

};

來源

2014-06-11 Gijs

歡迎來到SO！我認爲[這]（http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array）回答你的問題。 – georg

使用未設置的'myArray.splice（key，1）;'在圖像刪除後取消設置。這種方式你不會得到重複 –

試試這個

var generatedNumbers = [], 
giveNumber = 0; 
var check = function(){ 
    do { 
     giveNumber = generateNumber(); 
     if (generatedNumbers.length == 6) { // or 10 what ever is the limit 
      return false; 
      // end the code here since all numbers are consumed 
      // or reset the generatedNumbers array like generatedNumbers = [] 
     } 
    } while (generatedNumbers.indexOf() > -1); 

    generatedNumbers.push(giveNumber); 
}

未測試

來源

2014-06-11 10:13:32 zzlalani

它仍然沒有工作..它說：未捕獲TypeError：無法設置屬性'innerHTML'null new.js：55 window.onload即使我刪除document.getElementById（'submit'） .innerHTML =「這個人值得一個」+ giveNumber +「」;行 – Gijs

嘗試'.value'而不是'.innerHTML' – zzlalani

它仍然是相同的問題 – Gijs

以下RandomGenerator類可用於生成隨機圖像和數字而不重複。這裏是jsFiddle Demo

var RandomGenerator = function (myImages, numbersFrom, numbersTo){ 

    this.numbersFrom = numbersFrom?numbersFrom:4; 
    this.numbersTo = numbersTo?numbersTo:10; 

    this.images = myImages; 
    this.temp = myImages.slice(0); 


    this.nextImage = function(){ 
     if(this.temp.length === 0) return null; 
     var i = Math.floor(Math.random() * this.temp.length); 
     var toReturn = this.temp[i]; 
     this.temp.splice(i,1); 
     return toReturn; 
    }.bind(this); 

    this.reset = function(){ 
     this.temp = this.images.slice(0); 
     this.initializeNumbers(); 
    }.bind(this); 

    this.initializeNumbers = function(){ 
     console.log((this.numbersFrom - this.numbersTo)+1) 
     this.numbers = new Array((this.numbersTo - this.numbersFrom)+1); 
     var i=0; 
     for(i = 0; i< this.numbers.length;i++){ 
      this.numbers[i]=this.numbersFrom+i; 
     } 
    }.bind(this); 



    this.nextNumber = function(){ 
     if(this.numbers.length === 0) return null; 
     var i = Math.floor(Math.random() * this.numbers.length); 
     var toReturn = this.numbers[i]; 
     this.numbers.splice(i,1) 
     return toReturn; 
    }.bind(this); 

    this.next = function(){ 
     return { 
     "image" : this.nextImage(), 
     "number" : this.nextNumber() 
     }; 
    }.bind(this); 

    //initialize the randomNumbers Array. 
    this.initializeNumbers(); 
}

來源

2014-06-11 10:59:23

代碼正在工作，但我只在瀏覽器中看到media/4.jpg，我怎樣才能在那裏得到圖像？ – Gijs

試試這個http://jsfiddle.net/9M5Nh/ 1/ –

也可以像這樣定義生成器var generator = new RandomeGenerator（[....]，20,24）;這將給出20和24之間的隨機數。也可以有任意數量的圖像在數組中，但它們應該大於或等於數字範圍。 –

生成隨機圖像而不重複這些圖像

回答

相關問題