在代码中添加 reset/New 游戏按钮

Question

编辑：我在 Sean 的帮助下部分解决了这个问题。我已设法清除包含游戏卡的 DIV 标签并将其从页面中删除。

我现在重新启动游戏时遇到问题。修改后的代码请看下面：

已修订 Javascript：

        var matchingGame = {};

        // all cards used in game
        // additional cards can be added ... see CSS

matchingGame.deck = 
    [
        'card01', 'card01',
        'card02', 'card02',
        'card03', 'card03',
        'card04', 'card04',
        'card05', 'card05',
        'card06', 'card06',
    ];

$(function pageLoad()
    {
        gameStart();
    });

function gameStart()
    {
        // shuffling
        matchingGame.deck.sort(shuffle);

        // This loop generates 12 cards. You can increase or decrease the number of cards created by changing the number of loops.
        for(var i=0;i<11;i++)
            {
                $(".card:first-child").clone().appendTo("#cards");
            }

        // initialize each card
        $("#cards").children().each(function(index)
            {
                // align the cards to each other using card width and card height

                $(this).css({
                    "left" : ($(this).width()  + 20) * (index % 4),
                    "top"  : ($(this).height() + 20) * Math.floor(index / 4)
                });

                // get pattern from shuffled deck
                var pattern = matchingGame.deck.pop();

                //apply pattern to card back
                $(this).find(".back").addClass(pattern);
                $(this).attr("data-pattern",pattern);

                // select card
                $(this).click(selectCard);
            });
    }

function selectCard() 
    {
        // do nothing if two cards flipped
        if ($(".card-flipped").size() > 1)
            {
                return;
            }

        //animate cards
        $(this).addClass("card-flipped");
        if ($(".card-flipped").size() == 2)
            {
                setTimeout(checkPattern,700);
            }
    }

//random number between -0.5 to 0.5
function shuffle()
    {

        return 0.5 - Math.random();
    }

// matched cards
function checkPattern()
    {
        if (matchingPattern())
            {
                $(".card-flipped").removeClass("card-flipped").addClass("card-removed");

                // remove card after match
                $(".card-removed").bind("webkitTransitionEnd", removeMatchedCards); 
            }
        else
            {
                $(".card-flipped").removeClass("card-flipped");
            }
    }

// check pattern

function matchingPattern()
    {
        var cards = $(".card-flipped");
        var pattern = $(cards[0]).data("pattern");
        var anotherPattern = $(cards[1]).data("pattern");
        return (pattern == anotherPattern);
    }

function removeMatchedCards()
    {
        $(".card-removed").remove();
    }

function clearBoard(game)
    {
        //Remove all remaining cards from here (Clean up the DIV's if need be)
        document.getElementById(game).innerHTML = "";
        //document.getElementById(cards).innerHTML = "";
        //document.getElementById(card).innerHTML = "";



    }

function newGame()
    {
        gameStart();
    }

我遇到问题的是 "function newGame()" 区域。清除棋盘功能有效，但是单击清除游戏棋盘按钮后 newGame() 函数将不起作用。我是否缺少一些东西来确保这会清除 div 并在不刷新页面的情况下重新开始游戏？

我知道刷新页面会更容易，但是恕我直言，这是作弊，不会为代码的未来开发留下空间。 iFrame 方法也可以这样说。

已修订 HTML：

<!DOCTYPE html>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Matching Game</title>
    <link rel="stylesheet" href="css/matchgame.css" />
</head>
<body>

<div id="fb-root">Facebook button text</div>

    <script>
        (function(d, s, id) 
            {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
                js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
                fjs.parentNode.insertBefore(js, fjs);
            }

        (document, 'script', 'facebook-jssdk'));
    </script>

    <header id="headerText">
        <h1>Card Matching Game</h1>
    </header>

    <section id="game">
        <div id="cards">
            <div class="card">
                <div class="face front"></div>
                <div class="face back"></div>
            </div> <!-- .card -->
        </div> <!-- #cards -->
    </section> <!-- #game -->

    <footer id="footerText">
        <div id="deadSpace">
             <button onClick="clearBoard('game')">Clear Game Board</button>

             <button onclick="newGame()">New Game</button>

            <!-- <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.evocca.com&amp;layout=button_count&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;" style="overflow:hidden;width:100%;height:80px;" scrolling="no" frameborder="0" allowTransparency="true"></iframe> -->

            <p>Bare Bones Card Matching Game</p>
        </div>
    </footer>

<script src="js/jquery-1.6.min.js"></script>
<script src="js/matchCardGame.js"></script>
</body>
</html>

再次，我只是在一双新的眼睛看到这个之后，看看我在这里缺少什么。我还要再次指出，我不是在直接回答之后，只是朝着正确的方向轻轻一推 :) 谢谢。

Answer 1

这是一个 fiddle。 JS Fiddle Link

您可以尝试添加初始化步骤和清理步骤。这将允许您保持游戏循环，并且 reset/new 游戏按钮会像这样简单地流动：

function initNewGame(){
    // setup game vars and cards
}

function endGame(){
    // clean game vars and remove cards
}

function newOrReset(){
    endGame();
    initNewGame();
}

在代码中添加 reset/New 游戏按钮

Adding a reset/New Game button to code

javascript

button

reset