Question

在我的游戏中，我有一个startGame（）函数，它初始化了启动游戏的所有关键功能。开始时，按开始按钮即可进入游戏。游戏完成后，将出现重启按钮。单击此按钮将返回到开始屏幕，开始按钮位于此处。

理想情况下，我希望此时能够第二次点击开始按钮，然后会出现一个新游戏。问题是它带来了旧游戏。我尝试使用.empty，.queue和.dequeue并重置，但似乎没有任何效果。

如何在点击重启按钮时重新启动所有功能？

$(document).ready(function () {

successSound = $("#successSound")[0];
failSound = $("#failSound")[0];
moveSound = $("#moveSound")[0];
hitSound = $("#hitSound")[0];
missSound = $("#missSound")[0];
hintSound = $("#hintSound")[0];
hintPic = $("#hintPic")[0];
hintPicTitle = $("#hintPicTitle")[0];
bgMusic = $('#audio-bg')[0];

newGame();

//Click event to start the game
$(".start-btn-wrapper").click(function () {
    startplay();

});
//Click event to restart the game
$(".restart-btn").click(function () {
    restartplay();
});

在http://jsfiddle.net/rVaFs/

中填写脚本

Answer 1

如果你停止使用全局变量会更容易：一切都没有以var为前缀（包括函数）。如果您的startplay依赖于初始DOM状态，并且重写代码太困难（或者只是花费太多时间），您可以在开始游戏之前复制DOM的那部分并在完成时删除它。

Answer 2

你可以使用document.ready回调通过命名回调函数将所有内容重置回原始状态：

$(document).ready(function reset()
{
    //your code here
    //note, you must ensure event handlers are unbound:
    $('#reset').unbind('click').bind('click',reset);//<-- call main callback
});

您必须记住的另一件事是您正在创建很多隐含的全局变量，如果您使用ready回调，这可能会导致问题。要解决此问题，请更改以下行：successSound = $("#successSound")[0];至var successSound = $("#successSound")[0];。

Answer 3

我创建了一个名为resetGame()的函数并清除了DOM：

function resetGame() {
    $(document).ready();
    $('.table-container').empty();
    $('.reveal-wrapper').empty();
    $('.helper').removeClass('inactive');
    $('.tiles-wrapper').removeClass('active');
    $('.hint-container').removeClass('active');
    $('td').addClass('highlight-problem');
    $('.game').removeClass("active").removeClass('game-over').addClass('standby').addClass('transition');
    $('.score').html("");
    $(".next-question").removeClass('move-down');
    $('.reveal-wrapper').removeClass('image' + randomNumber);
    $(bgMusic).unbind();
    score.right = 0;
    score.wrong = 0;
}

function newGame() {
    randomWord = [];
    listOfWords = [];
    attemptNumber = [];
    completionNumber = [];
    populationNumber = [];
    gridSize = [];

    createGrid();
    backGroundImage();
    dragEvent();
    nextQuestion();
    closeMessage();
    replaySound();

    $('.score').html("0/" + completionNumber);
    $('.game').removeClass("standby").addClass('active').addClass('transition');

    $(bgMusic).on('timeupdate', function () {
        var vol = 1,
            interval = 250;
        if (bgMusic.volume == 1) {
            var intervalID = setInterval(function () {
                if (vol > 0) {
                    vol -= 0.05;
                    bgMusic.volume = vol.toFixed(2);
                } else {
                    clearInterval(intervalID);
                }
            }, interval);
        }
    });
}

$(document).ready(function () {
    successSound = $("#successSound")[0];
    failSound = $("#failSound")[0];
    moveSound = $("#moveSound")[0];
    hitSound = $("#hitSound")[0];
    missSound = $("#missSound")[0];
    hintSound = $("#hintSound")[0];
    hintPic = $("#hintPic")[0];
    hintPicTitle = $("#hintPicTitle")[0];
    bgMusic = $('#audio-bg')[0];

    backGroundSound();
    playBackGroundSound();
    keyPress();

    $(".start-btn-wrapper").click(function () {
        newGame();
    });
    $(".restart-btn").click(function () {
        resetGame();
    });
});

然后我在restart-btn点击事件中调用它。

重启jQuery函数

3 个答案: