0

我有一个简单的记忆游戏，通过匹配两个字母来获胜。如何添加一个按钮来启动一个计时器，该计时器显示游戏中的某些位置，当您赢得计时器时，计时器停止但显示最佳时间，此外，您可以保持计数以击败您的最佳时间。另外，如何更改我的字母以代替图像？

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

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

$(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);
                }
            });

http://jsfiddle.net/Brannan2/VkKRa/1/

4

1 回答 1

1

要在您的按钮单击函数下方创建一个计时器调用（id是一些全局 js 变量）

function createTimer() {
    id = setInterval(function(){

        var secondEl = document.getElementById('second');
            if (secondEl.value == null || secondEl.value == "") {
                secondEl.value = 0;   
            }

            var seconds = parseInt(secondEl.value) + 1;
            if (seconds == 60) {
                seconds = 0;
                var minuteEl = document.getElementById('minute');
                if (minuteEl.value == null || minuteEl.value == "") {
                    minuteEl.value = 0;   
                }

                var minutes = parseInt(minuteEl.value) + 1;
                if (minutes == 60) {
                    minutes = 0;
                    var hourEl = document.getElementById('hour');
                    if (hourEl.value == null || hourEl.value == "") {
                        hourEl.value = 0;   
                    }

                    hourEl.value = parseInt(hourEl.value) + 1;
                }

                minuteEl.value = minutes;
            }

            secondEl.value = seconds;
    },1000);
}

对于我的示例，我在 html 中创建了三种输入类型，ID 为“小时”、“分钟”和“秒”。您可以根据 UI 需要创建任何其他功能并相应地更新功能。

要停止计时器，只需删除setInterval如下所示的功能

window.clearInterval(id);

停止手表后，您可以使用以下公式轻松计算总时间

var totalTime = (hours * 3600) + (minutes * 60) + seconds;

这将以秒为单位返回总时间。现在要获得最佳时间，我认为您必须使用localStorage这样才能将最佳时间存储在客户端浏览器中，并在用户再次返回玩游戏时参考它。

用图像代替字母，可以有很多方法。例如，您可以css class在元素中添加一个为您设置背景图像的元素，或者您可以直接img在div带有图像位置的标签中使用标签。这完全取决于你。我不确定您为什么要根据当前要求显示图像。

于 2013-10-21T15:27:40.937 回答