Ich habe ein Spiel entwickelt und verwende dort die Funktion "requestAnimationFrame();":
Das Spiel soll per Druck auf die Leertaste auch pausierbar sein:
Die Funktion gameOver.showPause() sieht so aus:
Bei Click auf die Buttons wird das Spiel entweder fortgesetzt (yes) oder abgebrochen (no):
Das Problem: wenn ich die Leertaste drücke pausiert das spiel zwar und das Pause-Div (this.spielfeld.rules) wird angezeigt. Lasse ich die Leertaste aber wieder los, wird das Spiel automatisch fortgesetzt. Ich komme also gar nie dazu, auf einen der Buttons zu drücken. Mit jeder anderen Taste (z.B. Shift) funktioniert es problemlos. Woran kann das liegen?
PS: die Funktion setFocus() setzt den Fokus bei Drücken der Pfeiltasten Links-Rechts auf den linken, bzw. rechten Button. Das Spiel so schlussendlich ohne Maus spielbar sein.
PHP-Code:
function defineAnimationFrame(_this) {
var loopWrapper = function() {
_this.loop.call(_this);
if (_this.isRunning) {
_this._loopHandle = window.requestAnimationFrame(loopWrapper);
}
};
this._loopHandle = window.requestAnimationFrame(loopWrapper);
}
PHP-Code:
function keyDownEvent(e) {
if (e.key === ' ') {
// Spiel pausieren
var gameOver = new spiel.GameOver(this.spielfeld, this.spielfeld.figures, null, null, null);
gameOver.showPause();
}
}
PHP-Code:
function showPause() {
this.spielfeld.isRunning = false;
window.addEventListener('keydown', this.setFocus, false);
var msgPause = '<p style="color:lawngreen"><u>Pause!</u></p><p>Weiterspielen?</p>';
this.spielfeld.rules[this.figures[0].no].innerHTML = msgPause;
document.body.appendChild(this.spielfeld.rules[this.snakes[0].no]);
// Buttons 'Klar!' und 'Keine Lust' einfügen
var buttonYes = document.createElement('button');
var buttonNo = document.createElement('button');
buttonYes.classList.add('buttonPause');
buttonYes.setAttribute('id', 'yes');
buttonNo.classList.add('buttonPause');
buttonNo.setAttribute('id', 'no');
buttonYes.innerHTML = 'Klar!';
buttonNo.innerHTML = 'Keine Lust!';
buttonYes.addEventListener('click', this.resumeGame, false);
buttonNo.addEventListener('click', this.resumeGame, false);
this.spielfeld.rules[this.figures[0].no].appendChild(buttonYes);
this.spielfeld.rules[this.figures[0].no].appendChild(buttonNo);
buttonYes.focus();
}
PHP-Code:
function clickEvent(el) {
if (el.currentTarget.innerHTML.includes('Klar!')) {
window.removeEventListener('keydown', this.eventhandler);
document.body.removeChild(this.spielfeld.rules[this.figures[0].no]);
this.spielfeld.defineAnimationFrame(this.spielfeld);
this.spielfeld.isRunning = true;
} else if (el.currentTarget.innerHTML.includes('Keine Lust!')) {
document.location.reload();
}
}
PS: die Funktion setFocus() setzt den Fokus bei Drücken der Pfeiltasten Links-Rechts auf den linken, bzw. rechten Button. Das Spiel so schlussendlich ohne Maus spielbar sein.
Kommentar