曾经从事此版本的“ hack鼠”游戏。当前版本here和代码如下。
问题与startGame()函数更接近底部。从某种意义上说,当我每次按下该按钮时,console.log计时器都可以正确地从10倒数计时。但是,在第一次之后,它将尝试说“ Times Up”,并且当前计时器号与同一时间相同。
我想念什么?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Whack A Mole!</title>
<link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>Whack-a-mole! <span class="score">0</span></h1>
<button class=button onClick="startGame()">Start!</button>
<div class="game">
<div class="hole hole1">
<div class="mole"></div>
</div>
<div class="hole hole2">
<div class="mole"></div>
</div>
<div class="hole hole3">
<div class="mole"></div>
</div>
<div class="hole hole4">
<div class="mole"></div>
</div>
<div class="hole hole5">
<div class="mole"></div>
</div>
<div class="hole hole6">
<div class="mole"></div>
</div>
</div>
<h2 class="timer"> Countdown: <span id="countDown"> 10</span></h2>
<script>
const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');
const countDown = document.getElementById('countDown');
let lastHole;
let score = 0;
function randomTime(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
function randomHole(holes) {
const idx = Math.floor(Math.random() * holes.length);
const hole = holes[idx];
if (hole === lastHole) {
return randomHole(holes);
}
lastHole = hole
return hole;
}
function peep() {
const time = randomTime(200, 1000);
const hole = randomHole(holes);
hole.classList.add('up');
setTimeout(() => {
hole.classList.remove('up');
if (!timeUp) peep();
}, time);
}
function startGame() {
scoreBoard.innerHTML = 0;
timeUp = false;
score = 0;
let timer = 10;
peep();
setTimeout(() => timeUp = true, 10000)
var timeOut = setInterval(function () {
timer--;
if (timer > 0) {
countDown.classList.remove('timeUp')
countDown.innerHTML = timer;
} else {
countDown.innerHTML = "Times up!";
countDown.classList.add('timeUp');
return;
}
console.log(timer);
}, 1000);
}
function bonk(e) {
if (!e.isTrusted) return; //cheater without clicking
score++;
this.classList.remove('up');
scoreBoard.textContent = score;
}
moles.forEach(mole => mole.addEventListener('click', bonk));
</script>
</body>
</html>
答案 0 :(得分:4)
每次调用startGame()
时,您都在创建另一个间隔,但是从不删除上一个间隔。您最终会同时运行多个时间间隔-他们的一些计时器是完整的,而最近的计时器则没有,因此它们最终会发生冲突并来回更改文本。
只需将return
替换为clearInterval(timeOut)
:
var timeOut = setInterval(function () {
timer--;
if (timer > 0) {
countDown.classList.remove('timeUp')
countDown.innerHTML = timer;
} else {
countDown.innerHTML = "Times up!";
countDown.classList.add('timeUp');
clearInterval(timeOut);
}
console.log(timer);
, 1000);
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Whack A Mole!</title>
<link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>Whack-a-mole! <span class="score">0</span></h1>
<button class=button onClick="startGame()">Start!</button>
<div class="game">
<div class="hole hole1">
<div class="mole"></div>
</div>
<div class="hole hole2">
<div class="mole"></div>
</div>
<div class="hole hole3">
<div class="mole"></div>
</div>
<div class="hole hole4">
<div class="mole"></div>
</div>
<div class="hole hole5">
<div class="mole"></div>
</div>
<div class="hole hole6">
<div class="mole"></div>
</div>
</div>
<h2 class="timer"> Countdown: <span id="countDown"> 10</span></h2>
<script>
const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');
const countDown = document.getElementById('countDown');
let lastHole;
let score = 0;
function randomTime(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
function randomHole(holes) {
const idx = Math.floor(Math.random() * holes.length);
const hole = holes[idx];
if (hole === lastHole) {
return randomHole(holes);
}
lastHole = hole
return hole;
}
function peep() {
const time = randomTime(200, 1000);
const hole = randomHole(holes);
hole.classList.add('up');
setTimeout(() => {
hole.classList.remove('up');
if (!timeUp) peep();
}, time);
}
function startGame() {
scoreBoard.innerHTML = 0;
timeUp = false;
score = 0;
let timer = 10;
peep();
setTimeout(() => timeUp = true, 10000)
var timeOut = setInterval(function() {
timer--;
if (timer > 0) {
countDown.classList.remove('timeUp')
countDown.innerHTML = timer;
} else {
countDown.innerHTML = "Times up!";
countDown.classList.add('timeUp');
clearInterval(timeOut);
}
console.log(timer);
}, 1000);
}
function bonk(e) {
if (!e.isTrusted) return; //cheater without clicking
score++;
this.classList.remove('up');
scoreBoard.textContent = score;
}
moles.forEach(mole => mole.addEventListener('click', bonk));
</script>
</body>
</html>