How do I shuffle the images in my memory game?

Question

I'm making a javascript memory game and it's actually working, but I want the images to load in a random order. It's just that I have no idea how to.

This is what it currently looks like:

var easyImages = ["img/bat.jpg", "img/bug.jpg", "img/cat.jpg", "img/dog.jpg",
    "img/bat.jpg", "img/bug.jpg", "img/cat.jpg", "img/dog.jpg"];

var hardImages = ["img/bat.jpg", "img/bug.jpg", "img/cat.jpg", "img/dog.jpg",
    "img/frog.jpg", "img/fly.jpg", "img/bat.jpg", "img/bug.jpg",
    "img/cat.jpg", "img/dog.jpg", "img/frog.jpg", "img/fly.jpg"]

var imagesToShow;

var imagesContainer = document.getElementById("images-container");

var questionMark = "img/memory-bg.jpg";


if (selectedDifficulty == "easy") {
    imagesToShow = easyImages;
}

else if (selectedDifficulty == "hard") {
    imagesToShow = hardImages;
}

imagesContainer.innerHTML = "";

if (imagesToShow !== "") {
    for (var i = 0; i < imagesToShow.length; i++) {
        var img = document.createElement("img");

        img.addEventListener("click", flipImage);

        img.src = questionMark;

        img.dataset.img = imagesToShow[i];

        imagesContainer.appendChild(img);
    }
}

See: http://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle — Matt Burland, Oct 29 '14 at 20:15
JavaScript solution is here: http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array — Kyslik, Oct 29 '14 at 20:16

score 0 · Answer 1 · answered Oct 29 '14 at 20:13

Maybe something like:

var easyImages = ["img/bat.jpg", "img/bug.jpg", "img/cat.jpg", "img/dog.jpg",
"img/bat.jpg", "img/bug.jpg", "img/cat.jpg", "img/dog.jpg"];

var number_of_numbers=10
while(easyImages.length < number_of_numbers){
  var randomnumber=Math.ceil(Math.random()*100)
  var found=false;
  for(var i=0;i<easyImages.length;i++){
    if(easyImages[i]==randomnumber){found=true;break}
  }
  if(!found)easyImages[easyImages.length]=randomnumber;
}

score 0 · Answer 2 · answered Oct 29 '14 at 20:15

You could create another array with the images you want to display, and then use a random number generator to display the randomly generated index of that array, make sure to set the random range to the lenght of the array or else it will return numbers outisde your index. Then remove the image element at that position in the array, leaving you with only the pictures which have not been displayed.

How do I shuffle the images in my memory game?

2 Answers2