how to check if an item is clicked or not in javascript

问题

I'm trying to develop a whack-a-mole web game with javascript, but i'm new to this and i would really appreciate some help. I wanna check if the mole is clicked or not, cause if it's not, I want the player to lose a life and also I want to make the start button only work once. This is the code so far:

const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');

let lastHole;
let timeUp = false;
let score = 0;



function randomTime(min, max) {
    return Math.round(Math.random() * (max - min) + min);
}

function randomHole(holes) {
    const index = Math.floor(Math.random() * holes.length);
    const hole = holes[index];

  
    if (hole === lastHole) {
        return randomHole(holes);
    }
    lastHole = hole;
    return hole;
}

function peep() {
    const time = randomTime(500, 1000); 
    const hole = randomHole(holes); 
    hole.classList.add('up'); 
    setTimeout(() => {
        hole.classList.remove('up'); 
        if (!timeUp) {
            peep();
        }
    }, time);
}

function startGame() {
    
    scoreBoard.textContent = 0;
    timeUp = false;
    score = 0;
    
    peep();
    setTimeout(() => timeUp = true, 90000) 
}

function wack(e) {
    if (!e.isTrusted) return;
    score = score + 100;
    this.parentNode.classList.remove('up'); 
    scoreBoard.textContent = score;
 
}


moles.forEach(mole => mole.addEventListener('click', wack))









<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="sheet2.css">
    <title></title>
</head>
<body>
    <button onClick="startGame()";>Start</button>
    <span class="score">0</span>
    
    <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 class="hole hole7">
            <div class="mole"></div>
        </div>

        <div class="hole hole8">
            <div class="mole"></div>
        </div>

        <div class="hole hole9">
            <div class="mole"></div>
        </div>

    </div>
    <script src="script.js"></script>
</body>
</html>

回答1:

Add id to start button so you can disable it in startGame()
What is if (!e.isTrusted) return;?
You have event when clicked!
Check if up - if yes, continue (add score, etc.), if no, end game...

来源：https://stackoverflow.com/questions/62593831/how-to-check-if-an-item-is-clicked-or-not-in-javascript

标签

javascript

html

css