0

2文字を一致させることで勝つ簡単な記憶ゲームがあります. ゲームのどこかを表示するタイマーを開始するボタンを追加するにはどうすればよいですか。勝つとタイマーは停止しますが、ベストタイムを表示します。さらに、ベストタイムを更新するためにカウントを続けることができます。また、文字を画像の代わりに変更するにはどうすればよいですか?

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

私のサンプルでは、​​id が「時」、「分」、「秒」の 3 つの入力タイプを html で作成しました。UI のニーズに基づいて他のものを作成し、それに応じて関数を更新できます。

タイマーを停止するには、setInterval以下に示すように関数を削除するだけです

window.clearInterval(id);

時計を止めたら、以下の式を使用して合計時間を簡単に計算できます

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

これにより、合計時間が秒単位で返されます。ベスト タイムを取得するには、localStorageベスト タイムをクライアント ブラウザーに保存し、後でユーザーがゲームをプレイするために戻ってきたときにそれを参照できるようにする必要があると思います。

文字を画像に置き換えるには、多くの方法があります。たとえば、背景画像を設定する要素に を追加したり、 with 画像の場所でタグをcss class直接使用したりできます。その完全にあなた次第です。なぜ現在の要件で画像を表示したいのかわかりません。imgdiv

于 2013-10-21T15:27:40.937 に答える