重新啓動畫布的JavaScript

Question

有上W3Schools的一個HTML5遊戲教程link

我想添加的畫布下方的按鈕，重新啓動遊戲：

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

，並添加一個明確的函數for循環：

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

因此清除畫布。

問題是函數startGame（）不想再次啓動遊戲。 問題在哪裏？

問候

Answer 1

這裏就是我所做的：

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

然後我定義了一個新的函數調用restart：

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

現在應該重新啓動，但是從以往的遊戲的障礙（s）仍然存在。要解決這個問題，你需要在重新開始遊戲之前清除myObstacles陣列。這是我做的：

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

在這裏工作的jsfiddle：https://jsfiddle.net/11wrorox/