CODEWITHSUNDEEP
javascriptjqueryhtmlcss
jpn
jpn

Reputation: 273

Javascript/JQuery flipping card game

Trying to create a card game where users visit the page and click on each card displaying either a king or queen. If the second card doesn't match the first card, when a user clicks on the third card the game should reset. The "cards" start as divs with background imgs that are the back of cards. When the page loads, the script randomly sorts the cards array and assigns it to each of the divs. When a user clicks on a div, the CSS class is added and the "card face" appears.

My "reset" function is coming up as undefined while it should be running when "moves>2" and the first card clicked != the second card clicked. I've kind of hit a road block. 

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

Upvotes: 0

Views: 2226

Answers (2)

Michael Dowd
Michael Dowd

Reputation: 231

When I run your code I don't get any "'undefined' is not a function" errors, but I think your reset method should look more like what your button click event button does:

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

Upvotes: 2

nav
nav

Reputation: 47

Try moving your initial call to reset() after the definition of the function.

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

TO

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

Upvotes: 0

Related Questions