javascript - Restart a jQuery function - Stack Overflow

In my game I have a startGame() function which initializes all the key functions that start the game. At the beginning, you press the start button to take you to the game. Once the game is plete the restart button appears. When this is clicked it takes you back to the start screen, where the start button is.

Ideally I would like at this point to be able to click the start button for the second time, and a new game appear. The problem is that it brings the old game up. I have tried to use .empty, .queue and .dequeue and reset, but nothing seems to work.

How can I restart all the functions when the restart-button is clicked?

$(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();
});   

Fiddle with script in: /

In my game I have a startGame() function which initializes all the key functions that start the game. At the beginning, you press the start button to take you to the game. Once the game is plete the restart button appears. When this is clicked it takes you back to the start screen, where the start button is.

Ideally I would like at this point to be able to click the start button for the second time, and a new game appear. The problem is that it brings the old game up. I have tried to use .empty, .queue and .dequeue and reset, but nothing seems to work.

How can I restart all the functions when the restart-button is clicked?

$(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();
});   

Fiddle with script in: http://jsfiddle/rVaFs/

• javascript
• jquery
• function

Share Improve this question Follow edited Feb 13, 2014 at 20:00 Peter Mortensen 31.6k2222 gold badges110110 silver badges133133 bronze badges asked Nov 26, 2012 at 12:22 sMilbzsMilbz 95111 gold badge77 silver badges2525 bronze badges 3

• That fiddle doesn’t help, there is no markup. Could you please post relevant code for the startplay() and restartplay() functions? – David Hellsing Commented Nov 26, 2012 at 12:27
• 2 The simplest way is to refresh the page, but if you don't want to you would need to write the code to manually reset everything (all variables and DOM) to its initial state. – Alvin Wong Commented Nov 26, 2012 at 12:28
• No refresh is not an option. Could I write a function called resetGame() and do it all in there? @AlvinWong – sMilbz Commented Nov 26, 2012 at 12:30

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

It will be much easier if you stop using globals: everything not prefixed with var (including functions). If your startplay depends on initial DOM state, and it’s too difficult (or just takes too much time) to rewrite the code, you can just make a copy of that part of DOM before starting game and delete it on finish.

You could use the document.ready callback to reset everything back to it's original state, by naming the callback function:

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

Another thing you have to keep in mind is that you're creating a lot of implied globals, which could cause problems if you were to use the ready callback. To address this, do change these lines: successSound = $("#successSound")[0]; to var successSound = $("#successSound")[0];.

I created a function called resetGame() and cleared the 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 = [];
    pletionNumber = [];
    populationNumber = [];
    gridSize = [];

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

    $('.score').html("0/" + pletionNumber);
    $('.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();
    });
});

I then called it in the restart-btn click event.