Question

我有一个简单的记忆游戏，由JS，JQuery和XHTML组成。我需要帮助添加带有计时器的启动按钮。反过来，这显示了击败的最佳时间。另外，如何用图像替换数组中的字母？为了更好地理解，我有JsFiddled我的代码。

HTML

  <title>Memory</title>
    </head>
    <body>
        <div id="container">
            <div id="header">
                Memory!
            </div>
            <div id="content">
                <table id="gameBoard">
                    <tbody>                 
                    </tbody>
                </table>
                <button id="playAgain">Play Again</button>
            </div>
        </div>

JS：

$(function() {
                var cards = [
                    { id: 1, matchesId: 2, content: "A" },
                    { id: 2, matchesId: 1, content: "A" },
                    { id: 3, matchesId: 4, content: "B" },
                    { id: 4, matchesId: 3, content: "B" },
                    { id: 5, matchesId: 6, content: "C" },
                    { id: 6, matchesId: 5, content: "C" },
                    { id: 7, matchesId: 8, content: "D" },
                    { id: 8, matchesId: 7, content: "D" },
                    { id: 9, matchesId: 10, content: "E" },
                    { id: 10, matchesId: 9, content: "E" },
                    { id: 11, matchesId: 12, content: "F" },
                    { id: 12, matchesId: 11, content: "F" }
                ];
                var shuffledCards = [];
                var cardToMatchElement;

                setupGame();

                $("#playAgain").click(function() {
                    setupGame();
                });

                function setupGame() {
                    cardToMatchElement = null;
                    shuffleCards();
                    dealCards();
                }

                function shuffleCards() {
                    shuffledCards = [];
                    for(var i = 0; i < cards.length; i++) {
                        var randomCardIndex = getRandomCardIndex();
                        while($.inArray(randomCardIndex,shuffledCards) != -1) {
                            randomCardIndex = getRandomCardIndex();
                        }
                        shuffledCards.push(randomCardIndex);
                    }
                }

                function getRandomCardIndex() {
                    return Math.floor((Math.random() * cards.length));
                }

                function dealCards() {
                    setupGameBoard();
                    attachCardEvents();
                }

                function attachCardEvents() {
                    $(".card").click(function() {
                        var selectedCardElement = $(this);
                        var selectedCard = getCardFromElement(selectedCardElement);
                        flipCard(selectedCardElement, selectedCard);

                        if(cardToMatchElement) {
                            var cardToMatch = getCardFromElement(cardToMatchElement);
                            if(cardToMatch.matchesId == selectedCard.id) {
                                selectedCardElement.off();
                                cardToMatchElement.off();
                                cardToMatchElement = null;
                            }
                            else {
                                $.blockUI({ message: "", overlayCSS : { backgroundColor: '#fff', cursor:'normal', opacity:0.5 } });
                                setTimeout(function() {
                                    flipCard(selectedCardElement, selectedCard);
                                    flipCard(cardToMatchElement, cardToMatch);
                                    cardToMatchElement = null;
                                    $.unblockUI();
                                },1000);
                            }
                        }
                        else {
                            cardToMatchElement = selectedCardElement;
                        }
                    });             
                }


                function getCardFromElement(cardElement) {
                    return cards[cardElement.attr("data-cardindex")];
                }

                function flipCard(cardElement, card) {
                    if(cardElement.hasClass("down")) {
                        cardElement.removeClass("down").addClass("up");
                        cardElement.html(card.content); 
                    }
                    else {
                        cardElement.removeClass("up").addClass("down");
                        cardElement.html("");
                    }                                               
                }

                function setupGameBoard() {
                    var numberColumns = 4;
                    var tableBody = "";
                    var tableRow = "<tr>";
                    $.each(shuffledCards, function(index, card) {                       
                        tableRow += "<td><div class='card down' data-cardindex='" + shuffledCards[index] + "'>&nbsp</div></td>";
                        if(index > 0 && (index + 1) % numberColumns == 0) {
                            tableRow += "</tr>";
                            if(index < cards.length - 1) {
                                tableRow += "<tr>";
                            }
                        }

                        if(index == cards.length - 1 && (index + 1) % numberColumns != 0) {
                            tableRow += "</tr>";
                        }                       
                        tableBody += tableRow;
                        tableRow = "";
                    });

                    $("#gameBoard tbody").html(tableBody);
                }
            });

CSS

body {
    font-family:copperplate;
    font-size: 0.9em;
    background-color:#ccc;  
}

html, body {
    margin:0;
    padding:0;
    height:100%;
}

#container {
    width:950px;
    min-width:950px;
    background-color:#fff;
    margin:0 auto;
    min-height:100%;
}

#header {
    font-size:4em;
    line-height:95px;
    text-align:center;
    border-bottom:1px solid #000;
}

#content {
    clear:both;
    border-top:1px solid #000;
    padding-top:5px;
    padding:10px;
    text-align:center;
}

h1 {
    text-transform: capitalize;
}

#gameBoard {
    margin-left:auto;
    margin-right:auto;
    margin-bottom:25px;
}

.card {
    width:100px;
    height:100px;
    border:1px solid #000;
    cursor: pointer;
}

.down {
    background-color: #E8DD5B;  
}

.up {
    background-color: #ccc;
    line-height: 100px;
    text-align:center;
    font-size:5em;
}

button {
    font-size:2em;
    padding:5px;
    background-color:#E97A54;
}

如何在游戏中添加图像和计时器？

0 个答案: