Prevent Double Click in JS for in browser game using Django 2.2

Question

I have an issue where it requires the button to be clicked twice in order to initiate the functions. Except that the first click initiates gameOver() and a second click initiates a gameOver() again. But it takes two clicks to initiate showGame() and hideStartBtn() Therefore at the end of the timer ends it pops up two alerts since it loops twice.

Question is, How can I prevent double click and activate all the functions in a single click?

Here is my repo

JS - Snippet

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 - Snippet

<!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>

Prevent Double Click in JS for in browser game using Django 2.2

0 Answers0