JavaScript如何获取被点击的div？打地鼠游戏点击目标判定问题

实现方案 #

第一步 先修复现有代码的隐性问题 #

你现有代码有2个会影响功能运行的小问题，先修正：

• 你在startGame里声明的lifes、points是局部变量，change_asteroid和punch函数里访问不到，需要提到全局作用域
• 变量名拼写错误：你定义的随机时间变量叫time，setTimeout里传的是tiempo，要统一命名

第二步 补全punch点击判断逻辑 #

点击事件回调的参数e.target就是你当前点击的img元素，直接判断它的src属性是否包含reptilian.png，就能确定用户是不是点中了出现的地鼠。

修改后的完整JavaScript代码 #

// 全局声明通用变量
let lifes, points;

function startGame(){
    lifes = document.getElementById('lifes');
    points = document.getElementById('points');
    lifes.innerHTML = 3;
    points.innerHTML = 0;
    change_asteroid();
}

function change_asteroid(){
    const asteroids = document.querySelectorAll('.asteroid');
    const index  = Math.floor(Math.random() * asteroids.length);
    // 修正随机数生成逻辑，生成1000-3000ms的随机时间
    const time = Math.round(Math.random() * 2000 + 1000);
    asteroids[index].src = "reptilian.png";
    setTimeout(() => {
        asteroids[index].src = "asteroid.png";
        if (parseInt(lifes.innerHTML) == 0) {
            console.log("游戏结束");
        }else{
            change_asteroid();   
        }
    }, time);
}

function punch(e){
    // 获取当前点击的img元素
    const clickImg = e.target;
    // 判断当前点击的是不是显示中的地鼠
    if(clickImg.src.includes('reptilian.png')){
        // 命中加1分
        points.innerHTML = parseInt(points.innerHTML) + 1;
        // 命中后立刻切回陨石，避免重复点击加分
        clickImg.src = 'asteroid.png';
    }else{
        // 没命中扣1点生命值
        lifes.innerHTML = parseInt(lifes.innerHTML) - 1;
    }
}

// 绑定所有陨石的点击事件
let asteroids = document.querySelectorAll('.asteroid');
asteroids.forEach(asteroid => asteroid.addEventListener('click', punch))

逻辑说明 #

• 用户点击元素时，首先校验当前点击的图片是不是处于地鼠显示状态
• 命中地鼠则分数+1，同时立刻把图片切回陨石状态，避免用户重复点击同一个地鼠多次加分
• 没点中地鼠则直接扣1点生命值，生命值归0后下一轮地鼠刷新就会终止游戏

内容的提问来源于stack exchange，提问作者fcoterroba