Question

我正在开发我的第一个Javascript游戏但是我被卡住了...我想创建一个随机显示图像而不重复它们的游戏。在图像下方，我想在4-10之间给出一个随机数。这是我的代码，但它不起作用，我完全不知道该怎么做。

长话短说：用户必须按START键，然后会出现一个带有随机数的随机图像。我想只展示一次这些图像。

任何帮助将不胜感激; - ）

这是我的代码：

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

};

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

未经过测试

Answer 2

以下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();
}

生成随机图像而不重复这些图像

2 个答案: