重置html5画布游戏

时间:2013-03-17 19:29:50

标签: html5 canvas reset

此刻我目前有一个游戏可以吸引小行星和背景,得分等等,一旦船撞到小行星,它就会让用户进入游戏画面,当他们再次点击游戏按钮时我希望游戏重置而不是从它刚刚击中小行星时开始。

function playGame() {
clearCtxMenu();
clearCtxGameOver();
drawBg();
startLoop();
score = 0;
document.addEventListener('keydown',checkKeyDown,false);
document.addEventListener('keyup',checkKeyUp,false);
}

这会将所有内容加载到游戏中并清除菜单/游戏结果屏幕中的图像。

function gameOver() {
stopLoop();
drawPlayAgain();
drawMenu();
ctxGameOver.fillText("Score: " + score, 320, 160);
ctxGameOver.fillText("Highscore: " + highScore, 300, 180);
}

游戏结束时,小行星被击中时调用。

我设置了一旦你再次点击播放按钮它会调用pl​​ayGame函数,但是我希望它从头开始而不是刚刚完成的位置。

2 个答案:

答案 0 :(得分:0)

对于在问题之后的任何人,我只是清空了数组,例如ArrayName = [];

答案 1 :(得分:0)

要更清楚一些(因为我还没有发表评论):

在这里的w3c学校游戏教程(http://www.w3schools.com/graphics/game_intro.asp)中,我有一个关于如何在单页应用程序中重置游戏的问题,并发现了这个问题。上面的答案是正确的,但对我来说,我并没有完全理解这一点,以及“啊哈哈”。一点点的时刻。

因此,通过一个例子,它可以帮助其他人了解修复的位置。请查看以下代码:

var myGamePiece;
var myObstacles = [];
var myScore;

function startGame() {
    myGamePiece = new component(30, 30, "red", 10, 120);
    myGamePiece.gravity = 0.05;
    myScore = new component("30px", "Consolas", "black", 280, 40, "text");
    myGameArea.start();
 }

该行" var myObstacles = [];"保持障碍物的位置,如果重置,游戏将不得不制作新的障碍物。因此'重置'游戏。其余部分由教程中的代码处理。

希望这有助于某人。