Question

尝试创建纸牌游戏，用户访问该页面并点击显示国王或王后的每张卡片。如果第二张卡与第一张卡不匹配，则当用户点击第三张牌时，游戏应该重置。＆＃34;卡＆＃34;从作为背面的背景imgs开始作为div。当页面加载时，脚本随机对卡片阵列进行排序并将其分配给每个div。当用户点击div时，会添加CSS类并且＆＃34;卡面临＆＃34;出现。

我的＆＃34;重置＆＃34;当＆＃34;移动＆gt; 2＆＃34;＆＃34;移动＆gt; 2＆＃34;当它运行时，它应该是未定义的。并点击第一张卡！=第二张卡片点击了。我有点像路障。

$(document).ready(function(){

//our starting array
var cards = ["king", "king", "queen", "queen"]; 

//shuffle function from google 
function shuffle(o){ //v1.0
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};

//shuffles the array 

var counter = 0; 

//runs the reset function on load
reset(); 

//randomly resets the cards 
function reset(){
    cards = shuffle(cards); 
    $(".card").each(function() {
        $(this).addClass(cards[counter]); 
        counter += 1
    });
};

//check if any two cards are tru 
function check(card) {
    if ($(card)[0] == $(card)[1]) {
        return true; 
} else {
    return false; 
}
}; 

var moves = 0; 
//runs check when we make a certain amount of moves 
$(".card").click(function() {
    moves +=1
        $(this).toggleClass("selected"); 

        if (moves > 2 && check($(".selected")) == false){
                reset(); 
            }


 //for each if there is the class king 
 //if this has class king selected

});


//resets the page when we click "reset game" button
$("button").click(function(){
    cards = shuffle(cards)
     $(".card").removeClass("king queen selected"); 
        counter = 0; 
        moves = 0; 
    $(".card").each(function() {
        $(this).addClass(cards[counter]); 
        counter += 1
    });
}); 



})

CSS

.main-box {
     border: 1px solid black; 
     text-align: center;
     margin: 1.5%;
     border-radius: 10px
}

.king.selected {
     background: url("../images/King.png");
}

.queen.selected {
     background: url("../images/Queen.png");
}

.card {
     display: inline-block;
     width: 71px;
     height: 96px;
     margin: 1.5%;
     text-align: center; 
     background: url("../images/back-of-card.png");
}



.button {
     margin: 1.5%;
}

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Your description goes here">
        <meta name="keywords" content="one, two, three">

        <title>Matching Cards Game</title>

        <!-- external CSS link -->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/style.css">


    </head>
    <body>
        <div id="container">
            <header>
                <h1>Matching cards game</h1>
                <div class="main-box">
                    <div class="card"></div>
                    <div class="card"></div>
                    <div class="card"></div>
                    <div class="card"></div>
                        <div>

                            <button class="button reset">Reset game</button>
                            <input type="checkbox" class ="button checkbox" name="cheat-mode" value="true"> Cheat mode
                        </div>
                </div>
            </header>   
            <footer>
                &copy; General Assembly
            </footer>
        </div><!-- #container --> 
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="javascript/scripts.js"></script>
    </body>
</html>

Answer 1

当我运行你的代码时，我没有得到任何“'undefined'不是函数”错误，但我认为你的重置方法应该更像你的按钮点击事件按钮：

function reset() {    
  cards = shuffle(cards)
     $(".card").removeClass("king queen selected"); 
        counter = 0; 
        moves = 0; 
    $(".card").each(function() {
        $(this).addClass(cards[counter]); 
        counter += 1
    });
}

$("button").click(reset);

Answer 2

尝试在定义函数后将初始调用移至reset（）。

//runs the reset function on load
reset(); 

//randomly resets the cards 
function reset(){
    cards = shuffle(cards); 
    $(".card").each(function() {
        $(this).addClass(cards[counter]); 
        counter += 1
    });
};

要

//randomly resets the cards 
function reset(){
    cards = shuffle(cards); 
    $(".card").each(function() {
        $(this).addClass(cards[counter]); 
        counter += 1
    });
};

//runs the reset function on load
reset();

Javascript / JQuery翻转卡片游戏

2 个答案: