Restart Leinwand javascript

Question

Es ist ein HTML5-Spiel-Tutorial auf w3schools link

Ich versuche, einen Knopf unterhalb der Leinwand hinzuzufügen, um das Spiel neu zu starten:

<button onmouseup="startGame()">Restart</button> 

und eine klare Funktion für Schleife hinzufügen:

for (i = 0; i < myObstacles.length; i += 1) { 
    if (myGamePiece.crashWith(myObstacles[i])) { 
     myGameArea.stop(); 
     myGameArea.clear(); 
     return; 
    } 
} 

so löscht es die Leinwand.

Das Problem ist die Funktion startGame() will das Spiel nicht noch einmal starten. Wo ist das Problem?

Grüße

Answer 1

Hier ist, was ich getan habe:

<button onmousedown="restart()">Restart</button> 

Und dann definiert ich eine neue Funktion restart genannt:

function restart() { 
    myGameArea.stop(); 
    myGameArea.clear(); 
    startGame(); 
} 

Es sollte nun neu starten, aber die Hindernisse aus dem letzten Spiel (s) bleiben noch. Um dies zu beheben, müssen Sie das Array myObstacles löschen, bevor Sie das Spiel neu starten. Dies ist, wie ich es tat:

function startGame() { 
    myGamePiece = new component(30, 30, "red", 10, 120); 
    myObstacles = []; // it is very important to do this before starting the game 
    myGameArea.start(); 
} 

Arbeiten jsfiddle hier: https://jsfiddle.net/11wrorox/