提问者:小点点

如何在javascript中检查项目是否被点击


我正在尝试用javascript开发一个打地鼠的网页游戏,但我是新手,如果能给我一些帮助,我将非常感激。 我想检查是否点击了鼹鼠,因为如果没有,我想让玩家失去一条生命,而且我想让开始按钮只工作一次。 这是到目前为止的代码:

null

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>

null


共1个答案

匿名用户

ID添加到开始按钮,以便您可以在StartGame()
如果(!e.Istrusted)返回,是什么?
单击时您有事件!
检查Up-如果是,继续(添加分数等),如果否,结束游戏。。。