我的JS游戏是捉怪物。但是,我对开始按钮有疑问。我已经使用location:reload()将“再次播放”按钮放了。我希望按下开始按钮,时间开始倒计时。
现在时间会在每次页面加载时自动开始。
function loadImages() {
bgImage = new Image();
bgImage.onload = function() {
bgReady = true;
};
bgImage.src = "images/new-bgimage.jpg";
heroImage = new Image();
heroImage.onload = function() {
heroReady = true;
};
heroImage.src = "images/new-superman.png";
monsterImage = new Image();
monsterImage.onload = function() {
monsterReady = true;
};
monsterImage.src = "images/monster.png";
}
// KEYBOARD
function setupKeyboardListeners() {
addEventListener("keydown", function(key) {
keysDown[key.keyCode] = true;
}, false);
addEventListener("keyup", function(key) {
delete keysDown[key.keyCode];
}, false);
}
// SET UP START BUTTON
let myVar;
function setBegin() {
myVar = setTimeout(update(), 3000);
}
let update = function() {
elapsedTime = Math.floor((Date.now() - startTime) / 1000);
if (elapsedTime >= SECONDS_PER_ROUND) {
return;
}
keySet() //moving the hero character
heroMoveOffScreen() //moving the hero character
ifCatchMonster() //moving the monster character randomly when catch
};
var main = function() {
render();
requestAnimationFrame(main);
setBegin();
};
// RUN THE GAME
loadImages()
setupKeyboardListeners()
main()
<button id="startGame" value="Start" onclick="setBegin()">Start</button>
从setBegin()
功能中删除main()
:
var main = function () {
render();
requestAnimationFrame(main);
//setBegin(); ( Don't start immediately)
};