Javascript/JQuery翻轉卡遊戲

試圖創建一個紙牌遊戲，用戶訪問該頁面並單擊顯示國王或女王的每張卡片。如果第二張牌與第一張牌不匹配，當用戶點擊第三張牌時，遊戲應該重置。「卡」開始作爲與後面的背景圖像的divs卡。當頁面加載時，腳本隨機分類卡片數組並將其分配給每個div。當用戶點擊div時，CSS類將被添加並顯示「卡片面」。Javascript/JQuery翻轉卡遊戲

我的「重置」功能是未定義的，它應該在「移動> 2」並且第一張卡片被點擊時運行！=第二張卡片被點擊。我有點碰到路障。

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

來源

2015-01-15 jpn

嘗試移動你的初始調用該函數的定義後重置（）。

//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();

來源

2015-01-15 04:13:36 nav

所有函數聲明都將被掛起，並在重置調用之前可用。所以這不是問題。 – JammGamm

當我運行代碼，我沒有得到任何「‘未定義’不是一個函數」的錯誤，但我覺得你的復位方法應該看起來更像是你的按鈕點擊事件按鈕：

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

來源

2015-01-15 04:22:39

Javascript/JQuery翻轉卡遊戲

回答

相關問題