我正在制作一个非常简单的html5画布游戏。我希望这样做,以便当玩家失去所有3个生命时游戏重置。
我以为我可以做一个while循环,它总是检查Lives === 0然后运行一个函数但是这会破坏游戏并且没有任何东西出现在画布上。
这是我的代码。
var lives = 3;
while (lives <= 0) {
var fullReset = function () {
// Throw the monster somewhere on the screen randomly
monster.x = 1 + (Math.random() * (canvas.width - 64));
monster.y = 1 + (Math.random() * (canvas.height - 64));
monster2.x = 1 + (Math.random() * (canvas.width - 100));
monster2.y = 1 + (Math.random() * (canvas.height - 100));
// player start again
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
//score resets
monstersCaught() = 0;
lives() = 3;
}
fullReset();
}
答案 0 :(得分:2)
我认为您的方法存在概念性错误。您从3个生命开始(在您的示例中缺少初始化)。然后,每当怪物攻击时,你将生命减少一个并检查新值。当新值为零时,则是时候重置游戏了。
因此,你的循环应该只处理移动你的对象,而你会在怪物攻击并触发上述逻辑时触发事件。
答案 1 :(得分:1)
function gameLoop() {
var lives = 3;
if(lives <= 0) {
var fullReset = function () {
// Throw the monster somewhere on the screen randomly
monster.x = 1 + (Math.random() * (canvas.width - 64));
monster.y = 1 + (Math.random() * (canvas.height - 64));
monster2.x = 1 + (Math.random() * (canvas.width - 100));
monster2.y = 1 + (Math.random() * (canvas.height - 100));
// player start again
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
//score resets
monstersCaught() = 0;
lives() = 3;
}
fullReset();
}
requestAnimationFrame(gameLoop);
}
你是否尝试过requestAnimationFrame()这样你甚至可能不依赖于while循环并且每次都改变对象的位置来反复绘制画布。
答案 2 :(得分:1)
这不是解决问题的非常实用的方法。
我会使用OnEvent触发器处理它,例如当怪物攻击或玩家接触怪物时