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

在我编辑小提琴时，似乎有人用我的一半解决方案打败了我，但我会发布这个，因为下半部分应该帮助你确保每张卡只发布2张。< / p>

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

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

这样做的目的是删除每个数组项目，有点像从卡片中绘制卡片，确保每个图像只使用两个，并避免“继续尝试直到它工作”的方式。< / p>

Fiddle

Answer 2

Q1。快速解决方案，确保只有两个图像存在，可能是两次推送到您的阵列：

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

然后将其随机化（参见https://stackoverflow.com/a/2450976/3207406获取功能示例）

然后使用类似

的函数按顺序获取图像

 getImage(i)

Q2。关于＆＃34;两次点击＆＃34;，你可以使用一个全局变量：

first_image

如果之前没有显示任何图像，则该值为空。

否则，它将包含当前显示图像的详细信息（如source和id）。如果来源不匹配，那么您可以在一段时间后将这两张图片转回来。

仅随机两次获取相同的图像

2 个答案: