求助：为掷骰子游戏添加高分系统与失败判定功能

需求说明 #

已完成的掷骰子游戏可正常运行，需补充两个功能：

• 添加高分系统：记录玩家的最高得分，页面刷新后不丢失
• 实现失败判定：当骰子总和等于玩家选择的6、7、8、9中的任一数值时，游戏失败并重新开始

现有代码 #

掷骰子核心逻辑 #

let images = ["dice1.png",
"dice2.png",
"dice3.png",
"dice4.png",
"dice5.png",
"dice6.png"];
let dice = document.querySelectorAll("img");

function roll(){
    dice.forEach(function(die){
        die.classList.add("shake");
    });
    setTimeout(function(){
        dice.forEach(function(die){
            die.classList.remove("shake");
    });
    let dieOneValue = Math.floor(Math.random()*6)
    ;
    let dieTwoValue = Math.floor(Math.random()*6)
    ;
    console.log(dieOneValue,dieTwoValue);
    document.querySelector("#die-1").setAttribute
    ("src", images[dieOneValue]);
    document.querySelector("#die-2").setAttribute
    ("src", images[dieTwoValue]);
    document.querySelector("#total").innerHTML = 
    "Du rullade " + ( (dieOneValue +1) + (dieTwoValue + 1 ) )
},
1000
);
}

玩家输入验证逻辑 #

var numb=document.forms['myform']['num'];
var error=document.getElementById('error');

function validation()
{
    if(numb.value=='')
    {
        error.innerHTML="Bara nummer funkar";
        error.style.display="block";
        return false;
    }
    
    if(numb.value>9)
    {
        error.innerHTML="Bara nummer 6,7,8,9 funkar";
        error.style.display="block";
        return false;
    }
    if (numb.value<6)
    {
        error.innerHTML="Bara nummer 6,7,8,9 funkar";
        error.style.display="block";
        return false;
    }
    return true;
}

功能实现方案 #

一、失败判定逻辑 #

在掷骰子的roll函数中，计算骰子总和后与玩家选择的数值对比，触发失败流程：

1. 修改roll函数，增加失败判断与状态重置：

// 新增：初始化当前分数
let currentScore = 0;

function roll(){
    // 先验证玩家输入是否有效，无效则终止执行
    if(!validation()) return;

    dice.forEach(function(die){
        die.classList.add("shake");
    });
    setTimeout(function(){
        dice.forEach(function(die){
            die.classList.remove("shake");
        });
        let dieOneValue = Math.floor(Math.random()*6);
        let dieTwoValue = Math.floor(Math.random()*6);
        // 计算骰子总和
        const total = (dieOneValue + 1) + (dieTwoValue + 1);
        console.log(dieOneValue, dieTwoValue, total);
        
        // 更新骰子图片与总和显示
        document.querySelector("#die-1").setAttribute("src", images[dieOneValue]);
        document.querySelector("#die-2").setAttribute("src", images[dieTwoValue]);
        document.querySelector("#total").innerHTML = "Du rullade " + total;

        // 获取玩家选择的数值（转成数字类型）
        const selectedNum = parseInt(numb.value);
        // 失败判定：总和等于玩家选择的数值时触发
        if(total === selectedNum){
            alert("游戏失败！重新开始");
            // 重置当前分数
            currentScore = 0;
            document.querySelector("#current-score").textContent = "当前分数：0";
            // 清空输入框，让玩家重新选择数值
            numb.value = "";
            error.style.display = "none";
        } else {
            // 未失败则累加当前分数
            currentScore += 1;
            document.querySelector("#current-score").textContent = "当前分数：" + currentScore;
            // 更新最高分
            updateHighScore(currentScore);
        }
    }, 1000);
}

2. 在HTML中添加当前分数显示元素：

<div id="current-score">当前分数：0</div>

二、高分系统实现 #

使用localStorage存储最高分，确保页面刷新后数据不丢失：

1. 新增高分相关变量与函数：

// 初始化最高分：优先从localStorage读取，无数据则设为0
let highScore = parseInt(localStorage.getItem("diceGameHighScore")) || 0;

// 页面加载时显示最高分
window.addEventListener("load", function(){
    document.querySelector("#high-score").textContent = "最高分：" + highScore;
});

// 更新最高分函数
function updateHighScore(score){
    if(score > highScore){
        highScore = score;
        // 保存到localStorage
        localStorage.setItem("diceGameHighScore", highScore);
        document.querySelector("#high-score").textContent = "最高分：" + highScore;
        alert("恭喜你刷新了最高分！");
    }
}

2. 在HTML中添加最高分显示元素：

<div id="high-score">最高分：0</div>

三、优化输入验证函数 #

调整验证逻辑，每次验证前先隐藏错误提示：

function validation()
{
    // 先隐藏之前的错误提示
    error.style.display = "none";
    
    if(numb.value === ''){
        error.innerHTML="Bara nummer funkar";
        error.style.display="block";
        return false;
    }
    
    const num = parseInt(numb.value);
    // 合并数值范围判断，简化代码
    if(num < 6 || num > 9){
        error.innerHTML="Bara nummer 6,7,8,9 funkar";
        error.style.display="block";
        return false;
    }
    return true;
}

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