CODEWITHSUNDEEP
javascriptjqueryfunction
sMilbz
sMilbz

Reputation: 951

Restart a jQuery function

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 complete 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.net/rVaFs/

Upvotes: 1

Views: 9186

Answers (3)

sMilbz
sMilbz

Reputation: 951

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 = [];
    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();
    });
});

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

Upvotes: 0

Wuron
Wuron

Reputation: 31

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.

Upvotes: 2

Elias Van Ootegem
Elias Van Ootegem

Reputation: 76395

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];.

Upvotes: 1

Related Questions