Get same image randomly two times only

Question

I am creating images flip game in jquery. I am having trouble with images. In image flip game we have only two images of the same type. I have 44 img tags and 22 images. I am taking images randomly.

Q1. How to take two images only of the same type?

Q2. If one image is clicked it should be displayed as it is working now but when any other image is clicked then if the sources (src) of both the images are same, both should be hidden forever. If not both should turn over again. Here is my code of the script.

<script>
        var imgSources = new Array();
        var twoImagesOnly = [];
        for(var c = 1; c < 22; c++){
            imgSources.push(c + ".png");
        }
        $('#add').click(function(){
            addElements(44);
            $('#add').attr('disabled', 'true');
        });
        function addElements(times){
            var main = $('#main');
            for(j = 1; j <= times; j++){
                var div = $("<div>");
                var img = $("<img>");
                img.attr('src', getImage());
                img.attr('width', '100');
                img.attr('height', '100');

                img.click(function(event){
                    $(this).slideUp();
                    event.stopPropagation();
                });
                div.click(function(){
                    $(this).children('img').slideDown();
                });
                div.addClass('div');
                div.append(img);
                img.addClass('myimg');
                main.append(div);
                img.slideUp('fast');
            }       
        }
        var counter;
        function getImage(){
            var rand = Math.floor(Math.random() * 22) + 1;
            var str = '';
            if($.inArray(rand, twoImagesOnly) == -1){
                str = rand + '.png';
                twoImagesOnly[counter] = rand;
                counter++; 
            }else{
                 getImage();
            }
                return str;
        }
    </script>

and here JSFiddle

keep an array of 'removed' cards. Check it every time if you need to see if a card 'exists' on the table — cyadvert, Mar 11 '15 at 17:35

Oceanity · Answer 1 · 2015-03-11T17:51:46.647

Seems someone beat me to the punch with half of my solution while I was editing the fiddle, but I'll post this just because the second half should help you a bit with ensuring that only 2 of each card are posted.

First off, to initialize the array, use the following:

for(var c = 1; c < 23; c++){
    imgSources.push(c + ".png");
    imgSources.push(c + ".png");
}

This will iterate 22 times, adding files 1.png through 22.png twice each.

Then, to ensure only two of each image are used:

function getImage(){
    var rand = Math.floor(Math.random() * imgSources.length);
    var str = imgSources[rand];
    imgSources.splice(rand,1);
    return str;
}

What this will do is remove each array item as they are used, sort of like drawing cards from a deck, ensuring that only two of each image are used and avoiding the "keep trying until it works" approach you had.

Fiddle

You should add the part where you push twice the imgSources array — Kaiido, Mar 11 '15 at 17:48

score 1 · Answer 2 · edited May 23 '17 at 11:56

Q1. A quick solution to be sure that exactly two images are present, could be to push twice to your array:

    for(var c = 1; c < 22; c++){
        imgSources.push(c + ".png");
        imgSources.push(c + ".png");
    }

And then randomize it (see https://stackoverflow.com/a/2450976/3207406 for function example)

And then fetch the image in order with a function like

 getImage(i)

Q2. Regarding the "two clicks", you could use one global variable:

first_image

Which will be null if no image was previously shown.

Otherwise, it will contain the details of the currently show image (like source and id). If the sources don't match, then you can turn back the two pictures after some time.

I liked you first part a tidbit. – Hanzallah Afgan Mar 11 '15 at 17:40 — Hanzallah Afgan, Mar 11 '15 at 17:40

Get same image randomly two times only

2 Answers2