使用记忆匹配游戏限制尝试

时间:2016-12-19 16:14:19

标签: javascript

我有这个记忆匹配游戏代码,并试图找出如何限制尝试次数为6.你能帮助并指出我正确的方向吗?

(function() {
    var Memory = {
        init: function(cards) {
            this.$game = $(".game");
            this.$modal = $(".modal");
            this.$overlay = $(".modal-overlay");
            this.$restartButton = $("button.restart");
            this.cardsArray = $.merge(cards, cards);
            this.shuffleCards(this.cardsArray);
            this.setup();
        },
        shuffleCards: function(cardsArray) {
            this.$cards = $(this.shuffle(this.cardsArray));
        },
        setup: function() {
            this.html = this.buildHTML();
            this.$game.html(this.html);
            this.$memoryCards = $(".card");
            this.binding();
            this.paused = false;
            this.guess = null;
        },
        binding: function() {
            this.$memoryCards.on("click", this.cardClicked);
            this.$restartButton.on("click", $.proxy(this.reset, this));
        },
        // kinda messy but hey
        cardClicked: function() {
            var _ = Memory;
            var $card = $(this);
            if (!_.paused && !$card.find(".inside").hasClass("matched") && !$card.find(".inside").hasClass("picked")) {
                $card.find(".inside").addClass("picked");
                if (!_.guess) {
                    _.guess = $(this).attr("data-id");
                } else if (_.guess == $(this).attr("data-id") && !$(this).hasClass("picked")) {
                    $(".picked").addClass("matched");
                    _.guess = null;
                } else {
                    _.guess = null;
                    _.paused = true;
                    setTimeout(function() {
                        $(".picked").removeClass("picked");
                        Memory.paused = false;
                    }, 600);
                }
                if ($(".matched").length == $(".card").length) {
                    _.win();
                }
            }
        },
        win: function() {
            this.paused = true;
            setTimeout(function() {
                Memory.showModal();
                Memory.$game.fadeOut();
            }, 1000);
        },
        showModal: function() {
            this.$overlay.show();
            this.$modal.fadeIn("slow");
        },
        hideModal: function() {
            this.$overlay.hide();
            this.$modal.hide();
        },
        reset: function() {
            this.hideModal();
            this.shuffleCards(this.cardsArray);
            this.setup();
            this.$game.show("slow");
        },
        // Testing Algorithm -- Hopefully I got this right.. 
        shuffle: function(array) {
            var counter = array.length,
                temp, index;
            // While there are elements in the array
            while (counter > 0) {
                // Pick a random index
                index = Math.floor(Math.random() * counter);
                // Decrease counter by 1
                counter--;
                // And swap the last element with it
                temp = array[counter];
                array[counter] = array[index];
                array[index] = temp;
            }
            return array;
        },
        buildHTML: function() {
            var frag = '';
            this.$cards.each(function(k, v) {
                frag += '<div class="card" data-id="' + v.id + '"><div class="inside">\
            <div class="front"><img src="' + v.img + '"\
            alt="' + v.name + '" /></div>\
            <div class="back"><img src="http://media.chevrolet.com/content/Pages/promo_tiles/us/chevrolet/news/home/_jcr_content/image1.img.resize.maxw_340.maxh_180.jpg/1442886815536.jpg"\
            alt="Chevy LOGO" /></div></div>\
            </div>';
            });
            return frag;
        }
    };
    var cards = [{
        name: "2017 Chevrolet Silverado 2500HD",
        opacity: "0.5",
        img: "https://cms.kelleybluebookimages.com/content/dam/kbb-editorial/make/chevrolet/silverado-hd/2017/01-2017-chevrolet-silverado-2500hd-duramax.jpg/jcr:content/renditions/cq5dam.web.1280.1280.jpeg",
        id: 1,
    }, {
        name: "2017 Chevrolet Suburban",
        img: "https://i.ytimg.com/vi/ZrYuZloKXYw/maxresdefault.jpg",
        id: 2
    }, {
        name: "2017 Chevrolet Sonic",
        img: "http://media.chevrolet.com/content/dam/Media/images/US/Vehicles/Chevrolet/Cars/Sonic/2017/Product/2017-Chevrolet-Sonic-005.jpg",
        id: 3
    }, {
        name: "2017 Chevrolet Volt",
        img: "http://images.techtimes.com/data/images/full/254611/2017-chevrolet-volt.jpg",
        id: 4
    }, {
        name: "2017 Chevy ss",
        img: "http://images.hgmsites.net/lrg/2016-chevrolet-ss_100527985_l.jpg",
        id: 5
    }, {
        name: "2017 Chevy Tahoe",
        img: "https://carsintrend.com/wp-content/uploads/2016/05/2017-Chevrolet-Tahoe-front.jpg",
        id: 6
    }, {
        name: "2017 Chevrolet Trax",
        img: "https://i.kinja-img.com/gawker-media/image/upload/s--tNBjBsw7--/c_scale,fl_progressive,q_80,w_800/kd4i058ck1jvs7vr9hfp.png",
        id: 7
    }, {
        name: "2017 Chevrolet Spark",
        img: "http://robbinschevy.com/blog/wp-content/uploads/2016/08/2017-chevy-spark-blog_o.jpg",
        id: 8
    }, {
        name: "2017 Chevrolet Malibu",
        img: "https://carsintrend.com/wp-content/uploads/2016/01/2017-chevrolet-malibu-pictures-1.jpg",
        id: 9
    }, {
        name: "2017 Chevrolet Impala",
        img: "https://carsintrend.com/wp-content/uploads/2016/01/2017-Chevrolet-Impala-release-2-1.jpg",
        id: 10
    }, {
        name: "2017 Chevy Cruze",
        img: "https://media.ed.edmunds-media.com/chevrolet/cruze/2017/oem/2017_chevrolet_cruze_4dr-hatchback_premier_fq_oem_1_400.jpg",
        id: 11
    }, {
        name: "2017 Chevy Camaro",
        img: "http://www.chevrolet.com/content/dam/Chevrolet/northamerica/usa/nscwebsite/en/Home/Vehicles/Performance/2017_Camaro/Model_Overview/01_images/2017-chevrolet-camaro-six-mo-masthead-1480x551-01.jpg",
        id: 12
    }, ];
    Memory.init(cards);
})();

1 个答案:

答案 0 :(得分:0)

添加一个变量来计算游戏的猜测(游戏开始时初始化为0);在尝试任何猜测之前检查它;如果猜测错误,请将1添加到该计数器。