基于Django 2.2开发浏览器游戏如何解决JS按钮需双击触发、重复调用问题

问题根因 #

• 行内样式读取失效：element.style.display仅能读取元素行内style属性中声明的display值，若你的#the-game、#game-btn初始display规则写在css文件中，第一次点击时读取到的值为空，判断逻辑不生效，需要第二次点击时行内已经有style值才能正常切换。
• 点击事件分隔符错误：HTML中onclick属性内的多个函数调用应该用分号;分隔，你使用逗号,分隔，部分浏览器会解析异常，导致仅第一个函数执行。
• 无点击锁定逻辑：开始按钮点击后没有禁用或状态锁定，重复点击会重复触发所有函数，多次创建计时器导致弹窗重复弹出。
• 计时器逻辑错误：gameOver中setInterval间隔设为10000（10秒），且倒计时判断逻辑完全错位，没有实现每秒计时的效果。

修复方案 #

JS代码修改 #

// 全局游戏状态锁，防止重复触发
let isGameRunning = false;

function showGame() {
    const game = document.getElementById("the-game");
    // 读取实际生效的样式，避免css定义的样式读不到的问题
    const computedDisplay = window.getComputedStyle(game).display;
    game.style.display = computedDisplay === "none" ? "block" : "none";
}

function hideStartBtn() {
    const startBtn = document.getElementById("game-btn");
    const computedDisplay = window.getComputedStyle(startBtn).display;
    startBtn.style.display = computedDisplay === "block" ? "none" : "block";
    // 点击后直接禁用按钮，彻底防止重复点击
    startBtn.disabled = true;
}

let killCount = 0;
// 合并7个重复的kill函数，减少冗余代码
function killBtnHandler(btnId) {
    const killBtn = document.getElementById(btnId);
    const computedDisplay = window.getComputedStyle(killBtn).display;
    if (computedDisplay === "block") {
        killBtn.style.display = "none";
        killCount++;
    }
}

// 重写gameOver的计时器逻辑
function gameOver() {
    // 游戏运行中直接返回，拦截重复触发
    if (isGameRunning) return;
    isGameRunning = true;

    let timeLeft = 10;
    const killGame = document.getElementById("the-game");
    // 设计时器每秒执行一次倒计时
    const timerId = setInterval(countdown, 1000);

    function endGame(isWin) {
        clearInterval(timerId);
        isGameRunning = false;
        killGame.style.display = "none";
        alert(isWin ? "YOU WON!!!!" : "YOU LOOSE!!!!");
        // 可选：重置游戏状态方便下一局开启
        killCount = 0;
        const startBtn = document.getElementById("game-btn");
        startBtn.disabled = false;
        startBtn.style.display = "block";
        document.querySelectorAll(".kill-btn").forEach(btn => btn.style.display = "block");
    }

    function countdown() {
        timeLeft--;
        console.log("time left:" + timeLeft);
        // 优先判断是否完成击杀目标
        if (killCount === 7) {
            return endGame(true);
        }
        // 时间到未完成目标判定失败
        if (timeLeft <= 0) {
            return endGame(false);
        }
    }
}

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">
        <!-- 所有击杀按钮统一调用同一个处理函数，传入对应id即可 -->
        <button class="kill-btn" id="kill-1" onclick="killBtnHandler('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="killBtnHandler('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="killBtnHandler('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="killBtnHandler('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="killBtnHandler('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="killBtnHandler('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="killBtnHandler('kill-7')" ><img class="splatter" id="splat-7" src="{% static 'img/splat-1.png' %}" alt="splat"></button>
    </div>
</body>
</html>

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