PC-official/static/js/guess.js

const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue;
createApp({
    setup() {
        const musicData = ref([
            ["A组 世界在转动.MP3", "A组《来吧，占领我的无私》.MP3"],
            ["B组 《远方》.MP3", "B组 大闹天宫.MP3", "B组 下一站旅行.MP3"],
            ["C组 旧唱片.MP3", "C组 梅雨季.MP3", "C组 尊重成长共赢.MP3", "C组《弥留》.MP3"],
        ]);

        let step = ref(null); // null 是未开始 0 是第一题
        let detailsHeight = ref(500);
        const detailsRef = ref(null);

        let isAnswer = ref(false);

        onMounted(() => {
            window.addEventListener("resize", () => {
                // 重新计算 detailsHeight
                const windowHeight = window.innerHeight;
                detailsHeight.value = Math.max(windowHeight - 379 - 40, 350);
            });
            init();

            // 获取可是窗口高度
            const windowHeight = window.innerHeight;
            detailsHeight.value = Math.max(windowHeight - 379 - 40, 350);

            const searchParams = new URLSearchParams(window.location.search);
            isAnswer.value = searchParams.has("a") ? true : false;
        });

        const init = () => {
            musicData.value.forEach((item) => {
                item.sort(() => Math.random() - 0.5);
            });
        };

        const begin = () => {
            step.value = 0;
            play(musicData.value[0][0]);
        };

        // 添加一个方法来切换到下一题
        const nextStep = () => {
            step.value++;

            play(musicData.value[step.value][0]);
        };
        const audioPlayer = ref(null);
        const audiozSrc = ref("");

        const play = (item) => {
            clearTimeout(autoTimer);
            audioPlayer.value.src = "./static/mp3/guess/" + item;
            audioPlayer.value.play();
            audiozSrc.value = item;
        };

        const stop = () => {
            audioPlayer.value.pause();
            audiozSrc.value = "";
        };

        const playSucceed = () => {
            audioPlayer.value.src = "./static/mp3/guess/succeed.mp3";
            audioPlayer.value.play();
        };

        const playTriumph = () => {
            audioPlayer.value.src = "./static/mp3/guess/triumph.mp3";
            audioPlayer.value.play();
        };

        const playLose = () => {
            audioPlayer.value.src = "./static/mp3/guess/lose.mp3";
            audioPlayer.value.play();
        };

        let autoTimer = null;
        const audioEnd = (item) => {
            const nextItem = findNextItem(audiozSrc.value);
            if (nextItem) autoTimer = setTimeout(() => play(nextItem), 500);
            audiozSrc.value = "";
        };

        const select = (item, index) => {
            stop();
            if (item.indexOf("《") !== -1) {
                if (step.value == musicData.value.length - 1) {
                    playTriumph();
                    winState.value = true;
                } else {
                    playSucceed();
                    replyState.value = true;
                    autoSkip();
                }
            } else {
                loseState.value = true;
                playLose();

                // 开启一个定时器
                loseTimer = setTimeout(() => backHome(), 5000);
            }
        };

        let replyState = ref(false);
        let winState = ref(false);
        let loseState = ref(false);
        let loseTimer = null;

        const autoSkip = () => {
            setTimeout(() => {
                replyState.value = false;
                nextStep();
            }, 2000);
        };

        const backHome = () => {
            clearTimeout(loseTimer);
            init();
            step.value = null;
            replyState.value = false;
            winState.value = false;
            loseState.value = false;
        };

        const findNextItem = (str) => {
            // 遍历二维数组的每一项
            for (let i = 0; i < musicData.value.length; i++) {
                const currentArray = musicData.value[i];
                // 在当前数组中查找目标字符串的索引
                const index = currentArray.indexOf(str);

                // 如果找到且不是数组中的最后一个元素，则返回null
                if (index !== -1) {
                    // 检查是否有下一个元素
                    if (index < currentArray.length - 1) {
                        return currentArray[index + 1];
                    } else {
                        return "";
                    }
                }
            }
            // 如果在整个二维数组中都找不到该字符串
            return "";
        };

        let fluctuate = ref([]);

        const randomFluctuate = () => {
            fluctuate.value = [];
            for (let i = 0; i < 30; i++) {
                fluctuate.value.push(Math.floor(Math.random() * 10) + 1);
            }
        };

        return { fluctuate, isAnswer, detailsHeight, detailsRef, audioEnd, playSucceed, stop, audiozSrc, audioPlayer, backHome, select, loseState, winState, replyState, play, step, begin, musicData, nextStep };
    },
}).mount("#guess");