How not to repeat the random src of the images in jQuery?

Question

I am making a simple memory game in jQuery. I have eight img tags and the 'imgs' array with eight pictures (they double). I want every img have a unique src from the 'imgs' array (so that every img element has its' match). Can anyone help me so that the images don't repeat? I know it could be done in pure JS but I need jQuery... Thank you very much for your time :)

$(document).ready(() => {

    const imgs = ['https://img.icons8.com/color/100/000000/smurf.png',
    'https://img.icons8.com/color/96/000000/cookie-monster.png', 
    'https://img.icons8.com/color/96/000000/chewbacca.png', 
    'https://img.icons8.com/color/96/000000/avatar.png', 
    'https://img.icons8.com/color/100/000000/smurf.png', 
    'https://img.icons8.com/color/96/000000/cookie-monster.png', 
    'https://img.icons8.com/color/96/000000/chewbacca.png', 
    'https://img.icons8.com/color/96/000000/avatar.png'];

 
    $('.card').flip();

    $('img').each((i, item) => {

    $(item).attr('src', function() {
        const imgsCopy = imgs.slice();
        const src = imgsCopy.splice(Math.floor(Math.random() * imgsCopy.length), 1)
        return src
    })
  })
});

body {
    margin: 0 auto;
    text-align: center;
}

#game-container {
    padding: 3% 10%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

.card {
    width: 200px;
    height: 200px;
    margin: 20px 20px;
}

.front {
    background-color: lightblue;
}

.back {
    background-color: lightskyblue;
    box-sizing: border-box;
    padding: 25% 20%;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Memory Game</title>
        <link rel="stylesheet" type="text/css" href="memory.css" />
    </head>
    <body>
        <div id="game-container">
            
        <!--CARD 1-->
        <div class="card">
            <div class="front">

            </div>
            <div class="back">
                <img src="">
            </div>
        </div>
        <!--THE END OF CARD 1-->

        <!--CARD 2-->
        <div class="card">
            <div class="front">

            </div>
            <div class="back">
                <img src="">
            </div>
        </div>
        <!--THE END OF CARD 2-->

        <!--CARD 3-->
        <div class="card">
            <div class="front">

            </div>
            <div class="back">
                <img src="">
            </div>
        </div>
        <!--THE END OF CARD 3-->

        <!--CARD 4-->
        <div class="card">
             <div class="front">
    
            </div>
            <div class="back">
                <img src="">
            </div>
        </div>
        <!--THE END OF CARD 4-->

        <!--CARD 5-->
        <div class="card">
            <div class="front">

            </div>
            <div class="back">
                <img src="">
            </div>
        </div>
        <!--THE END OF CARD 5-->

        <!--CARD 6-->
        <div class="card">
            <div class="front">
       
           </div>
           <div class="back">
                <img src="">
           </div>
        </div>
        <!--THE END OF CARD 6-->
        
        <!--CARD 7-->
        <div class="card">
            <div class="front">

            </div>
            <div class="back">
                <img src="">
            </div>
        </div>
        <!--THE END OF CARD 7-->

        <!--CARD 8-->
        <div class="card">
            <div class="front">
    
           </div>
           <div class="back">
                <img src="">
           </div>
        </div>
        <!--THE END OF CARD 8-->
        </div>

        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
        <script src="memory.js"></script>
    </body>
</html>

Thx a lot for your reply @Barman, could you give me some example how to do that? I try to shuffle the array but I end up having the same img src :( — darius.maximus, Mar 09 '19 at 22:11
https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array — Barmar, Mar 09 '19 at 22:14

score 0 · Accepted Answer · answered Mar 09 '19 at 22:55

OK, I made a slight mistake! I took out the const imgsCopy = imgs.slice(); out of the jQuery 'each' statement and it works fine! :) Thx again for your time!

$(document).ready(() => {

        $('.card').flip();

        const imgs = ['https://img.icons8.com/color/100/000000/smurf.png',
        'https://img.icons8.com/color/96/000000/cookie-monster.png', 
        'https://img.icons8.com/color/96/000000/chewbacca.png', 
        'https://img.icons8.com/color/96/000000/avatar.png', 
        'https://img.icons8.com/color/100/000000/smurf.png', 
        'https://img.icons8.com/color/96/000000/cookie-monster.png', 
        'https://img.icons8.com/color/96/000000/chewbacca.png', 
        'https://img.icons8.com/color/96/000000/avatar.png'];

        const imgsCopy = imgs.slice();


        $('img').each((i, item) => {
            $(item).attr('src', function() {
                const src = imgsCopy.splice(Math.floor(Math.random() * imgsCopy.length), 1)
                return src
            })
          })
    });

How not to repeat the random src of the images in jQuery?

1 Answers1