Frage von Katky, 27

Reload Page bei JavaScript durch Start Button ersetzen?

Ich habe mit Hilfe eines Tutorials ein kleines Game mit JavaScript gemacht. (Game hier: http://katharina.tschirky.ch/news.html#today ) und wie man vielleicht merkt reloaded das game falls man gewinnt oder verliert. Ich find das etwas nervig und bin jetzt am versuchen dem Button der bereits existiert die Funktion hinzuzufügen, dass es das game reloaded. Leider bin ich ziemlich ahnungslos, da ich mit JavaScript noch nicht sehr vertraut bin. Kann mir jemand gute Vorgehensweisen geben? Oder mich zumindest auf die richtige Bahn bringen, damit ich weiss wie anfangen.

Antwort
von nikolaiki, 8

Das Problem Nr. 1 ist, dass das Programm einfach weiterläuft, nachdem die Meldung erscheint. Das sieht man ganz gut weil lives-1 angezeigt wird, bis der 

document.location.reload();

Befehl schliesslich greift. Um das Programm zu stoppen, muss stattdessen

clearInterval();

erfolgen.

Daraus ergeben sich aber weitere Probleme:

a) der Button Start Game ist noch ohne Funktion, daher

<button id="reload" onClick="document.location.reload();">Start Game!</button>

b) wenn man die Meldung "du gewinnst" geklickt hat, dann sieht man nur noch einen nackten Ball in der Ecke und einen oder keinen Mauerstein oben (weil man ja alle weggeräumt hat). Das ist auch nicht so hübsch. Also muss man überlegen, ob man das Spielfeld vielleicht  wieder aufbaut oder was anderes hinschreibt.

Kommentar von nikolaiki ,

Korrektur:

Der Befehl 
requestAnimationFrame(animate,elem); 

wird gestoppt mit 
cancelAnimationFrame(); oder cancelAnimationFrame(id); 

der oben angegebene Befehl clearIntervall(); funktioniert in der Praxis allerdings meistens auch.

Antwort
von pastweights, 12

Hallo Katharina,

Derzeit wird in deinem Script bei Gewinn oder Niederlage der Befehl

document.location.reload();

ausgeführt, welcher die komplette Seite neu lädt.

Stattdessen, solltest du eine eigene reload Funktion schreiben, welche du stattdessen mit reload() aufrufen kannst und auch zum Button per onclick="reload()" hinzufügen könntest.

Diese Reload Funktion muss nun deine Bricks, Leben und den Score, die Position des Panels und den Ball zurücksetzen.

Hier ein Pseudocode-Beispiel:

function reload () {
bricks = []; paddleX = (canvas.width-paddleWidth)/2; score = 0; lives = 3;

Natürlich musst du das Grid auch wieder neu generieren und schließlich die draw() Funktion aufrufen:

for(var c = 0; c < brickColumnCount; c++) {bricks[c] = []; for(var r = 0; r < brickRowCount; r++) { bricks[c][r] = { x: 0, y: 0, status: 1 };}}
draw();
}

Ich hoffe ich konnte dir helfen. Wenn du weitere Fragen hast melde dich einfach per Privatnachricht bei mir.

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten