Javascript: Pause/Unpause javascript Tetris game

Question

I have recently started working off a javascript Tetris template and i've got stuck trying to implement a pause feature. I am trying to create a window.onkeydown function so that when a button is clicked the game will pause and also toggle to continue once clicked again.

Here is a snippet of my code

function get(id) {
    return document.getElementById(id);
};

function hide(id) {
    get(id).style.visibility = 'hidden';
};

function show(id) {
    get(id).style.visibility = null;
};

function html(id, html) {
    get(id).innerHTML = html;
};

function timestamp() {
    return new Date().getTime();
};

function random(min, max) {
    return (min + (Math.random() * (max - min)));
};

function randomChoice(choices) {
    return choices[Math.round(random(0, choices.length - 1))];
};

if (!window.requestAnimationFrame) { // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
    window.requestAnimationFrame = window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback, element) {
            window.setTimeout(callback, 1000 / 60);
        }

}

var isPaused = true;

window.requestAnimFrame = (function () {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

function Start() {
    if (isPaused) {
        Update();
    }

    requestAnimFrame(Start);
}

window.onkeydown = function () {
    isPaused = !isPaused; // flips the pause state

};

Can anyone point me in the right direction?

Why do you have two implementations for requesting animation frame? — Ja͢ck, Jun 27 '14 at 11:50
Pausing Javascript execution until button press: http://stackoverflow.com/a/10366406/2618541 — Panayotis, Jun 27 '14 at 11:55

score 1 · Answer 1 · answered Jun 27 '14 at 11:47

1

You would have to keep a reference on the setTimeout. Like,

module.timeout = setTimeout(callback, 1000/60);

So when you flip the isPaused, clear both timeouts and restart them later when you're pausing them.

clearTimeout(module.timeout)

answered Jun 27 '14 at 11:47

Zlatko

18,936
14
70
123

Thanks i've given this a try yet still encountering problems. Am I missing something obvious? My codes here http://snipplr.com/view/74985/tetris-template/ – user3548813 Jun 27 '14 at 13:36
I get a 'can\'t find that snippet'. – Zlatko Jun 27 '14 at 14:21
Here is the repository. https://github.com/jakesgordon/javascript-tetris/blob/master/index.html – user3548813 Jul 01 '14 at 09:51

Javascript: Pause/Unpause javascript Tetris game

1 Answers1