SugarCube 2骰子滚动功能修复与变量赋值问题求助

问题1：骰子无限滚动无法停止 #

原代码里setTimeout(rollDice, 1000)会持续递归调用函数，导致无限滚动。另外setTimeout(rollDice(), 1000)报错是因为加了括号会立即执行函数，而非延迟执行，正确写法是传递函数引用（不带括号）。

解决方法：添加滚动次数计数器，当滚动达到指定次数后停止递归调用。比如设置滚动5次后停止，每次调用计数器减1，直到计数器为0时不再触发setTimeout。

问题2：无法赋值给SugarCube变量 #

循环内每次滚动都赋值会频繁修改变量且触发框架异常，应在最后一次滚动结束后，把最终骰子结果赋值给SugarCube.State.variables.rollOutcome。

修改后的完整代码 #

// 全局变量控制滚动次数，可按需调整
let rollCount = 5;

window.rollDice = function () {
    const elDiceOne = document.getElementById('dice1');
    const diceOne = Math.floor((Math.random() * 6) + 1);

    // 更新骰子样式
    for (let i = 1; i <= 6; i++) {
        elDiceOne.classList.remove('show-' + i);
        if (diceOne === i) {
            elDiceOne.classList.add('show-' + i);
        }
    }

    rollCount--;
    // 还有剩余滚动次数则继续
    if (rollCount > 0) {
        setTimeout(window.rollDice, 100); // 调整间隔可改变滚动速度
    } else {
        // 滚动结束，赋值给SugarCube变量
        SugarCube.State.variables.rollOutcome = diceOne;
        // 可选：验证结果
        console.log('最终骰子结果:', diceOne);
    }
};

使用说明 #

1. 在需要触发骰子滚动的 passage 中添加调用代码：

<div id="dice1" class="dice show-1"></div>
<button onclick="rollCount=5; rollDice();">掷骰子</button>

点击按钮时重置滚动次数，再触发滚动

2. 确保CSS中包含show-1至show-6的类，用于显示不同面的骰子样式。

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