CODEWITHSUNDEEP
javascripthtml
bean
bean

Reputation: 337

How to make images appear randomly in Javascript?

I need to create a web page with a button that says "start game". When this button is clicked, 5 images I have downloaded (img1.png...img5.png) must appear randomly, one at a time, every half a second. Here is my code so far, any help would be greatly appreciated!

<html>
<head>
  <script>

  var rollImagesSchedule;
  var rollImagesCounter;

  function rollImagesAnimation(){
    rollImagesCounter = 0;
    rollImagesSchedule = setInterval(500);
  }

  function rollImages(){
    var imageValue = Math.floor(Math.random() * 5) + 1;
    var imageFile = "img" + imageValue + ".png";

    var theImage = document.getElementById("display");
    theImage.src = imageFile;

    rollImagesCounter = rollImagesCounter + 1;

    if (rollImagesCounter == 10){
      clearInterval(rollImagesSchedule);
    }
  }
  </script>
</head>
<body>
  <h1>Game</h1>
  <button onClick="rollImagesAnimation()">Start frog game</button>

  <br /><br />

  <img id="display" style='width:200px; height:200px;'>
</body>
</html>

Upvotes: 0

Views: 581

Answers (3)

T&#226;n
T&#226;n

Reputation: 1

I think you're getting stuck with the way to use setInterval.

You can try to create a counter outside setInterval function, and nest all of your works inside of it. And the counter should be checked at the top.

function rollImages(){
  var counter = 0;
  var interval = setInterval(function () {
    if (counter === 10) {
      clearInterval(interval);
      return;
    }
    
    var imageValue = Math.floor(Math.random() * 5) + 1;
    var imageFile = "img" + imageValue + ".png";

    var theImage = document.getElementById("display");
    theImage.src = imageFile;

    counter++;
  }, 500);
}

Then, you can edit the way to catch event rollImages:

<button onClick="rollImages()">Start frog game</button>

Upvotes: 2

sonEtLumiere
sonEtLumiere

Reputation: 4562

You can store the images name files into an array and then setInterval a random number and assign the source of an img html element:

var list = [
  "image1.jpg",
  "image2.jpg",
  "image3.jpg",
];

var i = 0;
function changeImgs() {
  var imageValue = Math.floor(Math.random() * list.length - 1) + 1;
  image.src = list[imageValue];
}

setInterval(function() {
  changeImgs()
}, 2000);

window.onload = changeImgs;
<img id="image" class="size">

Upvotes: 0

贝克街的天才
贝克街的天才

Reputation: 1

My English is not very good, so I might misunderstand your question. Let me answer it according to what I understand.

Your requirement is to randomly display one of the five pictures every 500 milliseconds, right? If so, you can try this idea:

  1. Put the src of 5 pictures into an array
var imageSrcs = ["image1","image2","image3","image4","image5"];
  1. Every 500 milliseconds, execute the following function:
function rollImages(){
          // Randomly generate a random number between 0-4
          int index = Math.floor(Math.random() * 5) + 1;
         
          var theImage = document.getElementById("display");
          // Use random numbers as subscripts and take values from the array
          theImage.src = imageSrcs[index];
}

Upvotes: 0

Related Questions