Предотвращение двойного щелчка в JS для браузерной игры с помощью Django 2.2
У меня есть проблема, когда для инициирования функций требуется дважды нажать на кнопку. Кроме того, что первый щелчок инициирует gameOver(), второй щелчок снова инициирует gameOver(). Но требуется два щелчка, чтобы инициировать showGame() и hideStartBtn() Поэтому в конце таймера выскакивает два предупреждения, так как он зацикливается дважды.
Вопрос в том, как я могу предотвратить двойной щелчок и активировать все функции одним щелчком?
JS - сниппет
function showGame() {
var game = document.getElementById("the-game");
if (game.style.display === "none") {
game.style.display = "block";
} else {
game.style.display = "none";
}
};
function hideStartBtn() {
var StartBtn = document.getElementById("game-btn");
if (StartBtn.style.display === "block") {
StartBtn.style.display = "none";
} else {
StartBtn.style.display = "block";
}
};
var killCount = 0;
function kill_1() {
var killBtn = document.getElementById("kill-1")
if (killBtn.style.display === "block") {
killBtn.style.display = "none";
killCount ++;
} else {
killBtn.style.display = "block";
}
};
//This function repeats kill_1 - kill_7
function kill_7() {
var killBtn = document.getElementById("kill-7")
if (killBtn.style.display === "block") {
killBtn.style.display = "none";
killCount ++;
} else {
killBtn.style.display = "block";
};
};
function gameOver() {
var timeLeft = 10;
var timerId = setInterval(countdown, 10000);
var killGame = document.getElementById("the-game")
function endGame(){
if (killGame.style.display === "none"){
killGame.style.display = "none";
console.log("game ends here won")
} else {
console.log("game ends here lost")
killGame.style.display = "none"
}
}
function countdown() {
console.log("time left:"+timeLeft)
if (timeLeft == 0 || killCount !==7) {
clearTimeout(timerId);
timeLeft--;
console.log("time left"+timeLeft)
alert("YOU LOOSE!!!!");
return endGame();
} else {
clearTimeout(timerId);
timeLeft--;
console.log("time left"+timeLeft)
alert("YOU WON!!!!");
return endGame();
}
}
};
HTML - сниппет
<!DOCTYPE html>
<html lang="en">
<head>
{%load static%}
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="{% static 'js/game.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/index.css' %}">
<title>Browser Game</title>
</head>
<body>
<div class="gif-set-2">
<img id="fish-gif"src="{% static 'img/animated-fish-mopping.gif' %}" alt="">
<img id="floor-sign"src="{% static 'img/wavy-floor.gif' %}" alt="">
</div>
<button id="game-btn" onclick="hideStartBtn(), showGame(), gameOver()" >Tap to Clean</button>
<div id="the-game" class="game">
<button class="kill-btn" id="kill-1" onclick="kill_1()" ><img class="splatter" id="splat-1" src="{% static 'img/splat-1.png' %}" alt="splat"></button>
<button class="kill-btn" id="kill-2" onclick="kill_2()" ><img class="splatter" id="splat-2" src="{% static 'img/splat-1.png' %}" alt="splat"></button>
<button class="kill-btn" id="kill-3" onclick="kill_3()" ><img class="splatter" id="splat-3" src="{% static 'img/splat-1.png' %}" alt="splat"></button>
<button class="kill-btn" id="kill-4" onclick="kill_4()" ><img class="splatter" id="splat-4" src="{% static 'img/splat-1.png' %}" alt="splat"></button>
<button class="kill-btn" id="kill-5" onclick="kill_5()" ><img class="splatter" id="splat-5" src="{% static 'img/splat-1.png' %}" alt="splat"></button>
<button class="kill-btn" id="kill-6" onclick="kill_6()" ><img class="splatter" id="splat-6" src="{% static 'img/splat-1.png' %}" alt="splat"></button>
<button class="kill-btn" id="kill-7" onclick="kill_7()" ><img class="splatter" id="splat-7" src="{% static 'img/splat-1.png' %}" alt="splat"></button>
</div>
</body>
</html>