Question

编辑：我已经用肖恩的帮助部分解决了这个问题。我已设法清除持有游戏卡的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();
    }

使用＆＃34;功能newGame（）＆＃34;我遇到麻烦的地区。清除Board功能，但newGame（）函数在单击清除游戏板按钮后不起作用。这里有什么东西我不知道这样可以确保清除div并重新开始游戏而不进行页面刷新吗？

我知道通过页面刷新会更容易，但是，imho，是在作弊，并且不会为将来开发代码留下空间。对于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

这是一个小提琴。 JS Fiddle Link

您可以尝试添加初始化步骤和清理步骤。这将允许你维持游戏循环，重置/新游戏按钮将简单地流动：

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

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

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

添加重置/新游戏按钮代码

1 个答案: