JQuery 함수 재실행 - jQuery hamsu jaesilhaeng

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/

asked Nov 26, 2012 at 12:22

3

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.

answered Nov 26, 2012 at 12:45

WuronWuron

315 bronze badges

1

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

answered Nov 26, 2012 at 12:41

11

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.

answered Nov 27, 2012 at 13:06

sMilbzsMilbz

9497 silver badges25 bronze badges