如何在JS国旗猜谜游戏中实现不重复随机国旗功能？

问题根源 #

当前代码仅随机选取国旗索引展示，但未将已展示的国旗从候选池中移除，导致国旗会重复出现。

修改后的完整代码 #

<body>
    <button id="restart">Restart</button>
    <button id="get-flag">Generate</button>

    <img id="flag">
    <h1 id="output"></h1>

    <form id="answer-form">
        What country is it?
        <input type="text" id="answer" />
        <button type="submit">SUBMIT</button>
    </form>
    <p id="result"></p>
    <script>
        let restart = document.querySelector('#restart');
        let generate = document.querySelector('#get-flag');
        let img = document.querySelector('#flag');
        let output = document.querySelector("#output");
        let form = document.querySelector('#answer-form');
        let answer = document.querySelector('#answer');
        let result = document.querySelector('#result');

        let getRandomNumber = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

        // 原始国旗数据，作为初始数据源
        const originalData = [
            { src: `./flagi_sa/argentyna01.png`, name: 'Argentyna' },
            { src: `./flagi_sa/boliwia02.png`, name: 'Boliwia' },
            { src: `./flagi_sa/brazylia03.png`, name: 'Brazylia' },
            { src: `./flagi_sa/chile04.png`, name: 'Chile' },
            { src: `./flagi_sa/ekwador05.png`, name: 'Ekwador' },
            { src: `./flagi_sa/gujana06.png`, name: 'Gujana' },
            { src: `./flagi_sa/gujanaf07.png`, name: 'Gujana Francuska' },
            { src: `./flagi_sa/kolumbia08.png`, name: 'Kolumbia' },
            { src: `./flagi_sa/paragwaj09.png`, name: 'Paragwaj' },
            { src: `./flagi_sa/peru10.png`, name: 'Peru' },
            { src: `./flagi_sa/surinam11.png`, name: 'Surinam' },
            { src: `./flagi_sa/trinida12.png`, name: 'Trynidad' },
            { src: `./flagi_sa/urugwaj13.png`, name: 'Urugwaj' },
            { src: `./flagi_sa/wenezuela14.png`, name: 'Wenezuela' }
        ];

        // 维护可用国旗数组，初始复制原始数据
        let availableFlags = [...originalData];
        // 存储当前展示的国旗对象
        let currentFlag = null;

        generate.addEventListener('click', () => {
            if (availableFlags.length === 0) {
                output.innerText = "You are out of flags";
                img.src = ''; // 清空图片
                return;
            }

            answer.value = '';
            result.textContent = '';
            output.innerText = ''; // 清空提示文本

            let index = getRandomNumber(0, availableFlags.length - 1);
            currentFlag = availableFlags[index];
            img.src = currentFlag.src;
            // 从可用数组中移除已选中的国旗
            availableFlags.splice(index, 1);
        });

        form.addEventListener('submit', e => {
            e.preventDefault();
            if (!currentFlag) return; // 无国旗展示时不处理提交

            var guess = answer.value.toLowerCase();
            let isCorrect = currentFlag.name.toLowerCase() === guess;
            result.innerHTML = isCorrect ? 'Correct' : 'Wrong';
        });

        restart.addEventListener('click', () => {
            // 重置可用数组和状态，无需刷新页面
            availableFlags = [...originalData];
            currentFlag = null;
            img.src = '';
            answer.value = '';
            result.textContent = '';
            output.innerText = '';
        });
    </script>
</body>

关键改动说明 #

• 新增originalData常量存储原始国旗数据，避免修改初始数据源
• 新增availableFlags数组维护剩余可展示的国旗，每次生成后用splice()移除已选国旗，彻底避免重复
• 新增currentFlag变量存储当前展示的国旗对象，替代原索引存储方式，避免数组变化导致索引失效
• 优化Restart逻辑：无需刷新页面，直接重置可用数组和页面状态，体验更流畅
• 增加边界判断：无国旗展示时不处理提交请求，清空提示文本和图片

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