javascript - 仅随机获取相同图像两次

Question

我正在用 jquery 创建图像翻转游戏。我在处理图像时遇到问题。在图像翻转游戏中，我们只有两张相同类型的图像。我有 44 个 img 标签和 22 个图像。我正在随机拍摄图像。

Q1.如何只拍两张相同类型的图片？

Q2. 如果点击一张图片，它应该显示为现在正在工作，但是当点击任何其他图片时，如果两张图片的来源 (src) 相同，则两者都应该是永远隐藏。如果不是，两者都应该再翻过来。这是我的脚本代码。

<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>

这里JSFiddle

Answer 1

当我编辑 fiddle 时，似乎有人用我的一半解决方案抢先一步，但我会发布这个只是因为后半部分应该有助于确保每张卡片中只发布 2 张。

首先，要初始化数组，请使用以下命令:

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

这将迭代 22 次，每次添加文件 1.png 到 22.png 两次。

然后，为了确保每个图像只使用两个:

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

这将做的是在使用时删除每个数组项，有点像从一副牌中抽牌，确保每个图像只使用两个，并避免您采用的“不断尝试直到它起作用”的方法。

Fiddle