Как сделать рестарт игры по клику на кнопку (Jquery)

Question

https://jsfiddle.net/Alisa_32/m41nLfz5/2/

<div class="wrapper">
<h2>Memory game</h2>
<hr />
<button id="replay__btn" type="button" name="button" onclick='startPlay()'>Play the game</button>

<div class="card unmatched"></div>
<div class="card unmatched"></div>
<div class="card unmatched"></div>
<div class="card unmatched"></div>
<div class="card unmatched"></div>
<div class="card unmatched"></div>
<div class="card unmatched"></div>
<div class="card unmatched"></div>
<div class="card unmatched"></div>
<div class="card unmatched"></div>
<div class="card unmatched"></div>
<div class="card unmatched"></div>
<div style="display:none" id="modal">
  <h3>Congratulations!!!</h3>
  <p>If you see this message, obvously you won the game. If you woud like to play again, click the button below</p>
  <!-- <button id="replay__btn" type="button" name="button">Play the game</button> -->


</div>

По адресу: игра по типу "Открой все совпадающие карты". Я сделала все, но не соображаю, как сделать рестарт игры. Помогите пожалуйста. Заранее всем спасибо за помощь. Буду признательна за пояснения и комментарии.

Answer 1

Обновить страницу по location.reload();

Answer 2

<button id="replay__btn" type="button" name="button">Play the game</button>

$(document).ready(function() {
    let app = {
        cards: ['&spades;', '&spades;', '&clubs;', '&clubs;', '&hearts;', '&hearts;', '&diams;', '&diams;', '&sung;', '&sung;', '&starf;', '&starf;'],

        init: function() {
            app.shuffle();
        }, //end jf init func

        shuffle: function() {
            let random = 0;
            let temp = 0;
            for (let i = 1; i < app.cards.length; i++) {
                random = Math.round(Math.random() * i);
                temp = app.cards[i];
                app.cards[i] = app.cards[random];
                app.cards[random] = temp;
            }
            console.log(app.cards);
            app.assignCards();
            console.log(`Shuffle arr ${app.cards}`);

        }, //end jf shuffle func

        assignCards: function() {
            $('.card').each(function(index) {
                $(this).data('cardValue', app.cards[index]).html('').addClass('unmatched').removeClass('selected').css({opacity: 1});
            });
            app.clickHandlers();
        }, //end jf assignCards func

        clickHandlers: function() {
            $('.card').on('click', function() {
                $(this).html('<p>' + $(this).data('cardValue') + '</p>').addClass('selected');
                app.checkMatch();
            });
        }, //end jf clickHandlers func

        checkMatch: function() {
            if ($('.selected').length === 2) {
                if ($('.selected').first().data('cardValue') == $('.selected').last().data('cardValue')) {
                    $('.selected').each(function() {
                        $(this).animate({
                            opacity: 0
                        }).removeClass('unmatched');
                    });
                    $('.selected').each(function() {
                        $(this).removeClass('selected');
                    });
                    app.win();
                } else {
                    setTimeout(function() {
                        // alert("jjj")
                        $('.selected').each(function() {
                            $(this).html('').removeClass('selected');
                        });
                    }, 2000);
                }
            }
        }, //end chek funk
        win: function() {
            if ($('.unmatched').length === 0) {
                $('#modal').modal();
            }
        }
    };

    console.log(app);
    app.init();

    function startPlay() {
        app.init();
    }
    
    $('#replay__btn').click(startPlay);

});

БЛОГ НА HUSL

Как сделать рестарт игры по клику на кнопку (Jquery)

Ответы (2 шт):