Generate random images without repeating these images

Question

I'm working on my first Javascript game but I'm stuck.. I want to create a game which displays images random without repeating them. Underneath the image, I want to give that a random number between 4-10. Here's my code but it's not working, and I have totally no idea what to do.

Long story short: the user has to press START and after that there appears an random image with a random number. I want to show these images just one time.

Any help would be appreciated ;-)

Here's my code:

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+"";

};

Welcome to SO! I think [this](http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array) answers your question. — georg, Jun 11 '14 at 10:11
Use the unset `myArray.splice(key, 1);` to unset the image after it has been delt. This way you won't get duplicates — Déjà vu, Jun 11 '14 at 10:12

score 0 · Answer 1 · answered Jun 11 '14 at 10:13

0

try this

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);
}

NOT TESTED

answered Jun 11 '14 at 10:13

zzlalani

22,960
16
44
73

It's still not working.. It says: Uncaught TypeError: Cannot set property 'innerHTML' of null new.js:55 window.onload Even if I deleted the document.getElementById('submit').innerHTML = "This person deserves a"+giveNumber+""; line – Gijs Jun 11 '14 at 10:39
try `.value` rather of `.innerHTML` – zzlalani Jun 11 '14 at 10:41
It's still the same problem – Gijs Jun 11 '14 at 10:46
show the updated code, and can you please create fiddle for it? – zzlalani Jun 11 '14 at 10:53
Could you find the problem in my code? The other answer doesn't work either :( – Gijs Jun 11 '14 at 12:58

score 0 · Answer 2 · answered Jun 11 '14 at 10:59

The following RandomGenerator class you can use to generate the random images and numbers without repetition. Here is a 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();
}

The code is working, but I only see media/4.jpg in the browser, how can I get the image there? — Gijs, Jun 11 '14 at 11:22
also you can define the generator like this var generator = new RandomeGenerator([....], 20,24); this will give the random numbers between 20 and 24. Also you can have as many images as you want in the array but they should be more or equal to the numbers range. — Qusai Jouda, Jun 11 '14 at 12:32

Generate random images without repeating these images

2 Answers2