HTML5/JavaScript 比较两个随机生成的数字

Question

所以我正在制作一个游戏，通过在 HTML5 画布上单击它们来打开盒子并尝试匹配盒子内的数字（长话短说，获得匹配 = 胜利，即第一个盒子可能是 5，如果第二个盒子也是5，我赢了）。

当一个框被点击时，会在一定范围内产生一个随机数。我需要的是一种比较生成的数字的方法，以检查玩家是否赢了，或者他们是否需要继续打开盒子。

这些盒子是这样工作的：

    var rect = {
        x: 30,
        y: 150,
        width: 100,
        height: 100
    };

    function getMousePos(canvas, event) {
        var rect = canvas.getBoundingClientRect();
        return {
            x: event.clientX - rect.left,
            y: event.clientY - rect.top
        };
    }

我曾想过存储随机生成的数字，如下所示：

var firstChoice = Math.floor(Math.random() * (10 - 5 + 1) + 10);
var secondChoice = Math.floor(Math.random() * (10 - 5 + 1) + 10);

但我不知道如何让程序识别何时需要为下一个框而不是 firstChoice 运行 secondChoice、thirdChoice、fourthChoice 等。

有什么建议吗？

Answer 1

如果您正在寻找的只是一种存储和比较数据的方法...我会使用 sessionStorage 来存储第一个点击的数据，然后进行比较，直到找到匹配项：

// Player clicks box and generates number before the following function is called
function checkNumber(randomNumberGeneratedByRandomNumberGenerator) {

    // Checks to see if there is a number already stored
    if (sessionStorage.getItem("firstNumberClicked")) {

        // Retrieve the stored number to use for comparison
        const firstNumberClicked = sessionStorage.getItem("firstNumberClicked");

        // Compare numbers, if they are exactly equal, hooray for user...if not, boo for user.
        if (firstNumberClicked == randomNumberGeneratedByRandomNumberGenerator) {
            alert("hooray, you won user!!!!");
            sessionStorage.removeItem("firstNumberClicked");
        } else {
            alert("sorry user, better luck next time :(");
        }
    } else {

        // There is not a number that already exists in storage, store the number passed to the function
        sessionStorage.setItem("firstNumberClicked", randomNumberGeneratedByRandomNumberGenerator);
    }
}

生成随机数后立即调用此函数