重新启动画布 JavaScript

Restart canvas javascript

本文关键字：JavaScript 动画 新启      更新时间：2023-09-26

w3schools链接上有一个HTML5游戏教程

我正在尝试在画布下方添加一个按钮以重新启动游戏：

<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（） 不想再次启动游戏。问题出在哪里？

问候

这是我所做的：

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

然后我定义了一个名为 restart 的新函数：

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

它现在应该重新启动，但前作的障碍仍然存在。要解决此问题，您需要在重新启动游戏之前清除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();
}

在这里工作：https://jsfiddle.net/11wrorox/

相关文章：