JavaScript中分数无法更新问题求助

原代码存在的核心问题 #

• createImage函数里return img写在事件监听代码前面，导致后续逻辑完全不会执行
• 错误地给图片路径字符串（imagesArray[0]）绑定点击事件，这是无效操作，应该给创建的img元素绑定事件
• 全局只创建了一个img元素，每次调用createImage都是修改同一个元素属性，页面上永远只会显示一个球
• gameOver里调用ResetGlobalVariables时没加括号，相当于没执行重置逻辑
• 重置变量后，页面上的分数、计时器显示没有同步更新
• updateTimer函数末尾的1000;是无效冗余代码

修复后的完整代码 #

JavaScript代码

var imagesArray = [
    "./green-ball.png",
    "./yellow-ball.png",
    "./blue-ball.png",
    "./light-pink-ball.png",
    "./purple-ball.png"
];

let score = 0;
let timer = null;
var interval = null;
let timeLeft = 15;
let lastScore = 0;

var game = document.getElementById("game");


function gameOver() {
    var lastScoreElement = document.getElementById("lastScore");
    clearInterval(timer);
    clearInterval(interval);

    $("#playAgainButton").show();
    lastScoreElement.textContent = " " + score;
    $("#lastScore").show();
    ResetGlobalVariables();
}

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

function createImage() {
    // 每次创建新的img元素，避免复用覆盖
    var img = document.createElement("img");
    const randomIndex = random(0, imagesArray.length - 1);
    img.src = imagesArray[randomIndex];
    img.width = random(50, 200);
    img.height = random(50, 200);
    img.style.position = "absolute";
    img.style.left = random(0, 800 - img.width) + "px";
    img.style.top = random(0, 600 - img.height) + "px";

    // 给当前创建的球绑定点击事件
    img.addEventListener("click", function() {
        // 判断是否为绿色球（数组索引0）
        if (randomIndex === 0) {
            score++;
            var scoreElement = document.getElementById("score");
            scoreElement.innerHTML = `Current Score: ${score}`;
        }
        // 点击后移除当前球，避免页面堆积
        game.removeChild(this);
    });

    return img;
}

function updateTimer() {
    timeLeft = timeLeft - 1;
    if(timeLeft >= 0) {
        $("#timer").html(timeLeft);
    } else {
        gameOver();
    }
}

function start() {
    // 开始前清空游戏区域的旧球
    game.innerHTML = "";
    // 重置分数和计时器的页面显示
    document.getElementById("score").innerHTML = "Current Score: 0";
    $("#timer").html(15);
    
    timer = setInterval(updateTimer, 1000);
    $("#playAgainButton").hide();
    interval = setInterval(function() {
        var img = createImage();
        game.appendChild(img);
    }, 1500);
}

function ResetGlobalVariables() {
    score = 0;
    timeLeft = 15;
    timer = null;
    interval = null;
}

const resetBtn = document.querySelector(".reset-button")
resetBtn.addEventListener("click", function() {
    ResetGlobalVariables();
    // 重置后同步更新页面显示
    document.getElementById("score").innerHTML = "Current Score: 0";
    $("#timer").html(15);
    $("#lastScore").hide();
    // 停止当前的计时器和球生成
    clearInterval(timer);
    clearInterval(interval);
    // 清空游戏区域
    game.innerHTML = "";
})

HTML代码（仅修改游戏区域样式）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
        <td>
            <!-- 给游戏区域添加相对定位和尺寸，让球在内部定位 -->
            <div id="game" style="position: relative; width: 800px; height: 600px; border: 1px solid #ccc;"></div>
        </td>
        <td id="text">
            <p id="gameTitle">Find Greenie!<img src="green-ball.png" alt="Logo"></p>
            <p id="score">Current Score: 0</p>
            <p> You have: <span id="timer">15</span> seconds remaining!</p>
            <button id="playAgainButton" onclick="start()">Go!</button>
            <input id="reset" type="button" class="reset-button" value="Reset">
            <p> You scored: <span id="lastScore"></span></p>
            <br>
            <br>
            <p>Click on Greenie the green ball to score points</p>
            <p>Click Reset and then Go! to restart</p>
            <script src="find.js"></script>
        </td>
    </tr>
</table>

关键修改说明 #

1. 每次创建新的img元素，确保页面上能生成多个球
2. 将点击事件绑定到新创建的球上，通过生成时的索引判断是否为绿色球，符合条件则加分
3. 给游戏区域设置相对定位，球设置绝对定位，保证球在游戏区域内随机生成
4. 点击球后自动移除元素，避免页面元素堆积
5. 修复重置逻辑，同步更新页面显示和游戏状态
6. 开始游戏前清空旧球，重置页面显示

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