A1300399510/PC-official
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(guess): 添加猜歌游戏胜利音效和优化样式

Browse Source 
- 新增triumph.mp3作为胜利音效
- 优化guess.css中的动画效果和布局
- 调整guess.js中的音频播放逻辑和状态管理
- 更新guess.html页面结构和样式
- 修改song-request-station.js中的音频源路径
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-09-25 14:46:01 +08:00
parent b2969a9d37
commit bbdff26658
11 changed files with 372 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
static/js/guess.js
View File

@@ -8,113 +8,156 @@ const search = createApp({
]);
let step = ref(null); // null 是未开始 0 是第一题
let detailsHeight = ref(500)
const detailsRef = ref(null)
let detailsHeight = ref(500);
const detailsRef = ref(null);
let isAnswer = ref(false)
let isAnswer = ref(false);
onMounted(() => {
console.log("init");
init();
console.log("detailsRef", detailsRef.value);
// 获取可是窗口高度
const windowHeight = window.innerHeight;
detailsHeight.value = Math.max(windowHeight - 379 - 40, 350);
const searchParams = new URLSearchParams(window.location.search);
isAnswer.value = searchParams.has('answer') ? true : false;
nextTick(() => {
if (detailsRef.value) {
detailsHeight.value = detailsRef.value.clientHeight
console.log(detailsHeight.value);
}
})
isAnswer.value = searchParams.has("a") ? true : false;
});
const init = () => {
musicData.value.forEach((item) => {
item.sort(() => Math.random() - 0.5);
});
console.log(musicData.value);
};
const begin = () => {
step.value = 0;
play(musicData.value[0][0]);
};
// 添加一个方法来切换到下一题
const nextStep = () => {
step.value++;
};
const audioPlayer = ref(null)
const audiozSrc = ref("")
play(musicData.value[step.value][0]);
};
const audioPlayer = ref(null);
const audiozSrc = ref("");
const play = (item) => {
console.log("item", item);
audioPlayer.value.src = './static/mp3/guess/' + item
audioPlayer.value.play()
audiozSrc.value = item
clearTimeout(autoTimer);
audioPlayer.value.src = "./static/mp3/guess/" + item;
audioPlayer.value.play();
audiozSrc.value = item;
};
const stop = () => {
audioPlayer.value.pause()
audiozSrc.value = ""
}
audioPlayer.value.pause();
audiozSrc.value = "";
};
const playSucceed = () => {
audioPlayer.value.src = './static/mp3/guess/succeed.mp3'
audioPlayer.value.play()
}
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()
}
audioPlayer.value.src = "./static/mp3/guess/lose.mp3";
audioPlayer.value.play();
};
const audioEnd = () => {
console.log("结束");
let autoTimer = null;
const audioEnd = (item) => {
const nextItem = findNextItem(audiozSrc.value);
console.log("nextItem", nextItem);
audiozSrc.value = ""
}
if (nextItem) autoTimer = setTimeout(() => play(nextItem), 500);
audiozSrc.value = "";
};
const select = (item, index) => {
stop()
stop();
if (item.indexOf("《") !== -1) {
playSucceed()
if (step.value == musicData.value.length - 1) {
winState.value = true
playTriumph();
winState.value = true;
} else {
replyState.value = true
autoSkip()
playSucceed();
replyState.value = true;
autoSkip();
}
} else {
loseState.value = true
playLose()
}
}
loseState.value = true;
playLose();
let replyState = ref(false)
let winState = ref(false)
let loseState = ref(false)
// 开启一个定时器
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)
}
replyState.value = false;
nextStep();
}, 2000);
};
const backHome = () => {
step.value = null
replyState.value = false
winState.value = false
loseState.value = false
}
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 "";
};
return { isAnswer, detailsHeight, detailsRef, audioEnd, playSucceed, stop, audiozSrc, audioPlayer, backHome, select, loseState, winState, replyState, play, step, begin, musicData, nextStep };
let fluctuate = ref([]);
onMounted(() => {
// setInterval(() => {
// randomFluctuate();
// }, 150);
});
const randomFluctuate = () => {
fluctuate.value = []
for (let i = 0; i < 30; i++) {
fluctuate.value.push(Math.floor(Math.random() * 10) + 1);
}
console.log("fluctuate", fluctuate.value);
};
return { fluctuate, isAnswer, detailsHeight, detailsRef, audioEnd, playSucceed, stop, audiozSrc, audioPlayer, backHome, select, loseState, winState, replyState, play, step, begin, musicData, nextStep };
},
}).mount("#guess");

4
static/js/song-request-station.js
View File

@@ -525,8 +525,8 @@ const search = createApp({
setTimeout(() => {
console.log("item", item);
if (audio?.src != item.path) audio.src = item.path;
// audio.src = "https://app.gter.net/image/miniApp/mp3/1.mp3";
audio.src = "/static/mp3/1.MP3";
audio.src = "https://app.gter.net/image/miniApp/mp3/1.mp3";
// audio.src = "/static/mp3/1.MP3";
audio.play().then(() => (playData.value = { ...item, state: true }));
}, 500);
};