JavaScript - Card Memory Game, card shuffling function

Question

I am trying to build a memory game using javascript and I've been facing some problems. I've designed the HTML, CSS, and now I'm working on the JavaScript portion of the project. I've written a function that assigns randomly generated pictures to the cards from an array that I have storing the picture sources. The problem I am having is that, whenever I do shuffleImages() function, the pictures that appear are not always in even pairs, sometimes it's odd, which is problematic as I must have two pairs of each picture.

The question is: How do I make sure that the images I am assigning are always in even pairs, not odd? Please note that I'm a total beginner to JavaScript, I've only written basic code for 2 weeks now.

Thanks in advance.

HTML/CSS/JavaScript portion of the code below:

var arr = ['backend.PNG', 'backend_cloud.PNG', 'html.PNG', 'css.PNG', 'js.PNG', 'jquery.PNG', 'json.PNG', 'ajax.PNG'];
var count = 0;

function shuffleImages() {
    for (var i = 0; i < arr.length * 2; i++) {
        var rand = Math.floor(Math.random() * arr.length);
        $('#mypictures' + i).attr('src', arr[rand]);
        console.log(rand);
    }
    console.log("DONE");
}

.box {
    padding: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    border: solid 1px #4F5B5F;
    box-shadow: 1px 1px 1px #4F5B5F;
    border-radius: 20px 20px 20px 20px;
    text-align: center;
    font-size: 100px;
    background-color: #4F5B5F;
    width: 150px;
    height: 150px;
}
.container {
    margin-left: 25%;
    margin-top: 2%;
}
.main_body {
    background: -webkit-linear-gradient(left, blue, white);
    background: -o-linear-gradient(right, blue, white);
    background: -moz-linear-gradient(right, blue, white);
    background: linear-gradient(to right, #0BABE2, #0BD5E2, #0BABE2);
}
.game_title {
    margin-left: 27%;
    font-size: 50px;
    font-family: Arial;
    color: #D5EFF8;
    text-shadow: 2px 2px 2px #4F5B5F;
}
.game_score {
    margin-left: 3%;
    font-size: 10px;
    font-family: Arial;
    color: #D5EFF8;
    text-shadow: 2px 2px 2px #4F5B5F;
}
.score {
    margin-left: 5px;
    padding-left: 5px;
    font-size: 15px;
    color: #D5EFF8;
}
#mypictures0,
#mypictures1,
#mypictures2,
#mypictures3,
#mypictures4,
#mypictures5,
#mypictures6,
#mypictures7,
#mypictures8,
#mypictures9,
#mypictures10,
#mypictures11,
#mypictures12,
#mypictures13,
#mypictures14,
#mypictures15 {
    height: 120px;
    width: 120px;
    padding: 15px;
}




     Memory Game Project
         NUMBER OF TRIES LEFT 
         0

xs0 · Accepted Answer

You can first make an array that contains each image twice:

var tiles = [];
for (var i = 0; i < arr.length; i++)
    tiles.push(arr[i], arr[i]);

Then shuffle that array according to How to randomize (shuffle) a JavaScript array?

JavaScript - Card Memory Game, card shuffling function

Answers (1)

Related Questions