Reload Page bei JavaScript durch Start Button ersetzen?

... komplette Frage anzeigen

2 Antworten

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.

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von nikolaiki
23.07.2016, 16:41

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.

0

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.

Antwort bewerten Vielen Dank für Deine Bewertung

Was möchtest Du wissen?