How Do I Make My Game Work? ELI5

Question

I'm trying to make a game that displays a sequence of images depending on the number the user puts in a input box. I want it to show a random image from an array of my images for however many times the user set it to show it.

Here's my JavaScript:

var numLeaves = 0;
var numSeq = ["1.jpg","2.png","3.jpg","4.jpg","5.png","6.jpg","7.jpg","8.jpg","9.jpg","0.jpg"];

function startGame() {

  while (1 < 10) {
    randomNum = Math.floor((Math.random() * numSeq.length));

    if (randomNum === 0) {
      numLeaves = 1;
    } else if (randomNum == 1) {
      numLeaves = 2;
    } else if (randomNum == 2) {
      numLeaves = 3;
    } else if (randomNum == 3) {
      numLeaves = 4;
    } else if (randomNum == 4) {
      numLeaves = 5;
    } else if (randomNum == 5) {
      numLeaves = 6;
    } else if (randomNum == 6) {
      numLeaves = 7;
    } else if (randomNum == 7) {
      numLeaves = 8;
    } else if (randomNum == 8) {
      numLeaves = 9;
    } else if (randomNum == 9) {
      numLeaves = 0;
    }

    document.getElementById("picture").src = numSeq[randomNum];
    setInterval(function(){document.getElementById("picture").src = ""}, 1500);
    i++;
  }


}

function submitInput() {
  if (document.getElementById("leaveGuess").value == numLeaves) {
    document.getElementById("result").innerHTML = "Correct!";
  }
  else
  {
    document.getElementById("result").innerHTML = "Incorrect... There were " + numLeaves + " leaves on the shamrock";
  }

}

And here's my HTML:

<!DOCTYPE html>

<html>

  <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="rep.css">
    <script type="text/javascript" src="rep.js"></script>
  </head>


  <body>
    <div id="test"></div>

    <div id="content">

      <div id="title" class="center">
        <h1>Repetitive</h1>
        <p>Created by Daniel Hancock</p>
        <h2>Instructions:</h2>
        <p>In under one second memorize the amount of leaves on the shamrock. <br> After one second, you will be asked to enter the number of leaves that you saw on the shamrock.</p>
        <label for="numSequence"><strong>Length:</strong></label>
        <input id="numSequence"> <br>
        <button onclick="startGame()" id="startButton">New</button>
      </div>

      <div id="display" class="center">
        <img src="" id="picture" width="215" height="215">
        <div id="guessing" class="center">
          <input id="leaveGuess">
          <button onclick="submitInput()">Submit</button>
          <p id="result"></p>
        </div>
      </div>

    </div>
  </body>

</html>

Explain it to me like I'm a five year old.

Answer 1

I didn't understand your problem but i found some problems in the code:

1) you didn't declare the numLeaves as global variable (maybe) and you update him 10 times in the while without use him.

2) set var i = 0; at the start of startGame function or the better solution is using for instead while

3) why you did randomNum === 0 instead randomNum == 0?

tip: you can write numLeaves = (randomNum + 1) % 10; instead of the 10 if commands

Answer 2

I can see one major problem here - you have not declared i anywhere. In your while loop you have the condition set to (1 < 10) which will always be true.

I would recommend changing it to use a for loop like this:

for (int i=0; i<10; i++)
{
    randomNum = Math.floor((Math.random() * numSeq.length));

    if (randomNum == 9)
    {
        numLeaves = 0;
    }
    else
    {
        numLeaves = randomNum + 1;
    }

    document.getElementById("picture").src = numSeq[randomNum];
    setInterval(function(){document.getElementById("picture").src = ""}, 1500);
}

Hope this helps.

How Do I Make My Game Work? ELI5

Question

2 answers

solution1
0 2015-03-12 16:26:21

solution2
0 2015-03-12 17:12:48

How Do I Make My Game Work? ELI5

Question

2 answers

solution1 0 2015-03-12 16:26:21

solution2 0 2015-03-12 17:12:48

solution1
0 2015-03-12 16:26:21

solution2
0 2015-03-12 17:12:48