如何实现角色仅在跳跃至方块上方时才计分？

问题分析 #

当前代码每次点击跳跃按钮就会增加分数，导致可以通过连续点击刷分。我们需要修改逻辑，只有当角色成功越过方块且未发生碰撞时，才增加分数。

具体修改步骤 #

1. 新增计分状态标记
   在全局作用域添加变量，标记当前方块是否已计分，避免重复计分：

let hasScored = false;

2. 移除跳跃按钮的计分逻辑
   修改text()函数，只保留跳跃动作，删除原本的计分代码：

function text() {
    // 仅执行跳跃动画
    character.style.animation = "jump 0.3s linear";
    setTimeout(() => {
        character.style.animation = "";
    }, 300);
}

3. 在碰撞检测循环中添加安全越过分支
   找到持续检测方块和角色位置的循环（通常是setInterval），加入计分逻辑：

setInterval(() => {
    let characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
    let blockLeft = parseInt(window.getComputedStyle(block).getPropertyValue("left"));

    // 原有碰撞检测逻辑
    if (blockLeft < 19 && blockLeft > 1 && characterTop >= 120) {
        block.style.animation = "none";
        alert("你的得分是 " + (i - 1) + "!");
    }

    // 安全越过方块时计分
    if (blockLeft <= 1 && !hasScored) {
        // 确认角色处于跳跃状态（未碰撞）
        if (characterTop < 120) {
            i++;
            document.getElementById("t").innerHTML = i;
            hasScored = true; // 标记已计分，防止重复
        }
    }

    // 方块回到初始位置时重置计分标记
    if (blockLeft > 380) { // 数值根据方块初始位置调整
        hasScored = false;
    }
}, 10);

4. 重置游戏时同步重置计分标记
   修改playAgain()函数，添加对hasScored的重置：

function playAgain() {
    block.style.animation = "block 2s infinite";
    i = 0;
    hasScored = false;
    document.getElementById("t").innerHTML = i;
}

原理说明 #

• 通过hasScored标记确保每个方块只会被计分一次
• 当方块完全经过角色位置（blockLeft <=1）且角色处于跳跃高度（characterTop <120）时，判定为安全越过并增加分数
• 方块回到右侧初始位置时，重置标记，为下一次循环做准备

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