Question

我正在制作一款有12张卡倒置的游戏。当您点击一张卡片时，它会翻转图像，每张图片中有2张图片，因此12张卡片上总共有6张图片。重点是匹配这些图像。我无法比较img src是否与翻转图像相同，这是我到目前为止所拥有的：

<div class="container">
<div class="row">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="row">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="row">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
</div>
<form>
<input type="button" value="Play again">
</form>

Answer 1

脚本应如下所示：

var lastSelected;
$(document).ready(function(){
    addImg();
    start();
    click();
});

function check(el){
    if($(lastSelected).attr("src") == $(el).find("img").attr("src") && $(lastSelected).hasClass("visible")) {
            // do sth. with $(this)
            alert("gotcha!");
    }
    lastSelected = $(el).find("img");
}

function start(){
    $("div.row div img").addClass("hidden");
};

function click(){
    $("div.row div").each(function(){
        $(this).click(function(){
         if($("img", this).hasClass("hidden")){
            $("img",this).removeClass("hidden");
            $("img",this).addClass("visible");
             check($(this));

         }else if($("img",this).hasClass("visible")){
            $("img",this).removeClass("visible");
            $("img",this).addClass("hidden");
         }

        });

    });

};

function addImg (){

    var images = ["http://efreeman.userworld.com/jQuery/images/cheese.gif","http://efreeman.userworld.com/jQuery/images/eggs.gif","http://efreeman.userworld.com/jQuery/images/kitchen_blender.gif","http://efreeman.userworld.com/jQuery/images/tea.gif","http://efreeman.userworld.com/jQuery/images/kitchen_collander.gif","http://efreeman.userworld.com/jQuery/images/kitchen_teapot.gif"];

var imagesused = [];
$('.container div:not(.row)').each(function() {
    var rand = Math.floor(Math.random() * images.length);
    $(this).append('<img src="' + images[rand] + '"/>');
    if (imagesused.indexOf(images[rand]) != -1) images.splice(rand, 1);
    else imagesused.push(images[rand]);
    console.log(images);

});
}

Answer 2

你应该这样做：

function check(){
    $('img.visible:not(.correct):eq(0)').attr('src') == $('img.visible:not(.correct):eq(1)').attr('src'))){
        $('img.visible:not(.correct)').addClass('correct')
    }
}

因此，如果转换卡片并且两者都相同，则向其添加class，以便下次不会再次检查它们。所以这样你只会检查你刚转过的两张牌。

Answer 3

由于您现在拥有代码，因此需要进行一些重构。但要回答你的直接问题，就是这么简单：

var last;
function click(){
    $("div.row div").each(function(){
         // ..snip..

             // added code
             console.log(last == $("img",this).attr("src"));
             last = $("img",this).attr("src");

我之所以不详细说明原因，是因为我认为你一次只想要两张牌面朝上，所以没有理由在所有可见的卡片中循环。

Answer 4

我在O'reilly School在线http://www.oreillyschool.com

上学习同样的jQuery课程

答案是：http://jsfiddle.net/jmccommas/AhPfV/

要使用的jquery代码

 var lastSelected;
    var score = 0;
    var boxopened = "";
    var imgopened = "";
    var num = 0;
    var moves = 0;
    $(function () {
        $("div.row div img").addClass('hidden');
        addImg();
        click();
        check();
        shuffle();


    });

    function randomFromTo(from, to) {
        return Math.floor(Math.random() * (to - from + 1) + from);
    }

    function shuffle() {
        var children = $("#boxcard").children();
        var child = $("#boxcard div:first-child");

        var array_img = new Array();

        for (i = 0; i < children.length; i++) {
            array_img[i] = $("#" + child.attr("id") + " img").attr("src");
            child = child.next();
        }

        var child = $("#boxcard div:first-child");

        for (z = 0; z < children.length; z++) {
            randIndex = randomFromTo(0, array_img.length - 1);

            // set new image
            $("#" + child.attr("id") + " img").attr("src", array_img[randIndex]);
            array_img.splice(randIndex, 1);

            child = child.next();
        }
    }


    function check(el) {

        if ($(lastSelected).attr("src") == $(el).find("img").attr("src") && $(lastSelected).hasClass("visible")) {
            score = 0 + 2;
            alert("Congradulation! You scored!!" + " " + score + " Points");
        }

        lastSelected = $(el).find("img");
        clearAll();

    }


    function click() {

        var boxes = $(".row img").size();
        $(".row div").click(function () {
            moves++;
            $(".totalmoves").html(moves);
            $(".cover").css({
                "z-index": "9999"
            });
            $(this).children("img").animate({
                "opacity": "1"
            }, function () {
                num++;
                var id1 = $("img.selected").attr("src");
                var id2 = $(this).attr("src");
                $(this).addClass("selected");

                if (num == 2) {
                    num = 0;
                    if (id1 == id2) {
                        $(".selected").removeClass("selected");
                        score = score + 2;
                        alert("Congradulation! You scored!!" + " " + score + " Points");
                        boxes = boxes - 2;
                        if (boxes == 0) {
                            alert("Game Over Your Total Score is :" + score + " Points");
                        }

                        $(".yourscore").html(score);
                    } else {
                        speed = 100;
                        $(".selected").animate({
                            "opacity": "0"
                        }, 400, function () {
                            $(".selected").removeClass("selected");
                            if (score > 1) {
                                score = score - 0.5;
                                $(".yourscore").html(score);
                            }
                        });
                    }
                } else {
                    speed = 100;
                }

                $(this).animate({
                    "padding": "0.1"
                }, speed, function () {
                    $(".cover").css({
                        "z-index": "-9999"
                    });
                });
            });

        });


    };

    // add Random Images
    function addImg() {

        var images = ["http://courses.oreillyschool.com/jquery/QuizzesAndProjects/images/cheese.gif", "http://courses.oreillyschool.com/jquery/QuizzesAndProjects/images/eggs.gif", "http://courses.oreillyschool.com/jquery/QuizzesAndProjects/images/kitchen_blender.gif", "http://courses.oreillyschool.com/jquery/QuizzesAndProjects/images/tea.gif", "http://courses.oreillyschool.com/jquery/QuizzesAndProjects/images/kitchen_collander.gif", "http://courses.oreillyschool.com/jquery/QuizzesAndProjects/images/kitchen_teapot.gif"];

        var imagesused = [];
        $('.container div:not(.row)').each(function () {
            var rand = Math.floor(Math.random() * images.length);
            $(this).append('<img src="' + images[rand] + '"/>');
            if (imagesused.indexOf(images[rand]) != -1) images.splice(rand, 1);
            else imagesused.push(images[rand]);
            console.log(images);

        });
    }
    // Clear the images Button
    var clearAll = function () {
        $(':button').click(function () {
            score = 0;
            $(".yourscore").html(score);
            moves = 0;
            $(".totalmoves").html(moves);
            $(".selected").removeClass("selected");
            $(".row img").animate({
                "opacity": "0"
            }, function () {
                $(".row img").remove();
                addImg();

            });




        });

    };

比较图像src jquery

4 个答案: