Как добавить кнопку для отображения таймера при нажатии

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/

  • 0
    таймер с объектом js Date() и setInterval() . В лучшие времена вам нужно некоторое бэкэнд-программирование, такое как php или что-то подобное, в идеале с базой данных (или вы можете записать это в текстовый файл или что-то, если вы хотите что-то быстрое и грязное xD)
  • 0
    спасибо, спасибо. Я не использую php. Может быть пример?
Показать ещё 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 с идентификаторами "час", "минута" и "секунда". Вы можете создать любой другой на основе потребностей пользовательского интерфейса и функции обновления соответственно.

Чтобы остановить таймер, просто удалите функцию setInterval как показано ниже

window.clearInterval(id);

Как только вы остановите часы, вы можете легко вычислить общее количество раз, используя приведенную ниже формулу

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

Это вернет общее время в секундах. Теперь, чтобы получить лучшие времена, я думаю, вам нужно использовать localStorage чтобы вы могли хранить лучшие времена в клиентском браузере и ссылаться на него позже всякий раз, когда пользователь снова возвращается к игре.

Чтобы заменить букву изображениями, может быть много способов. Например, вы можете добавить css class к элементу, который будет устанавливать фоновое изображение для вас, или вы можете напрямую использовать тег img в своем div с расположением изображения. Это полностью зависит от вас. Я не уверен, но почему вы хотите показать изображение с вашим текущим требованием.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню