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

31
static/css/guess.css
View File

@@ -218,7 +218,6 @@
left: 997px;
}
.container .container-box .details {
flex: 1;
max-height: 500px;
margin-bottom: 40px;
width: 1200px;
@@ -228,6 +227,7 @@
z-index: 1;
padding: 3px;
overflow: hidden;
height: var(--base-height);
}
.container .container-box .details::after {
content: "";
@@ -268,6 +268,29 @@
left: 3px;
bottom: 3px;
}
.container .container-box .details .fluctuate-box {
position: absolute;
left: 10px;
top: 10px;
display: flex;
align-items: self-end;
z-index: 100;
}
.container .container-box .details .fluctuate-box .item {
height: 100%;
width: 12px;
display: flex;
flex-direction: column;
justify-content: flex-end;
margin-right: 2px;
}
.container .container-box .details .fluctuate-box .item .item-item {
width: 100%;
height: 5px;
border-radius: 2px;
background-color: #7d4bf8;
margin-top: 2px;
}
.container .container-box .details .fluctuate-icon {
width: 400px;
height: 86px;
@@ -293,6 +316,7 @@
.container .container-box .details .start-box .start-right {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.container .container-box .details .start-box .start-right .suspect-text {
height: calc(var(--base-height) * 0.112);
@@ -306,7 +330,6 @@
margin-bottom: calc(var(--base-height) * 0.058);
}
.container .container-box .details .start-box .start-right .start-icon {
width: fit-content;
height: calc(var(--base-height) * 0.138);
cursor: pointer;
}
@@ -362,8 +385,8 @@
border-radius: 20px;
}
.container .container-box .details .answer-box .list .item .img-box.show {
background: linear-gradient(var(--rotate), #ff1d74, #e3820c 43%, #c28846);
animation: bg 2.5s infinite linear;
background: linear-gradient(var(--rotate), #db4743, #ffffff 43%, #c28846);
animation: bg 1.3s infinite linear;
}
@property --rotate {
syntax: "<angle>";

46
static/css/guess.less
View File

@@ -250,7 +250,7 @@
.details {
// height: 500px;
flex: 1;
// flex: 1;
max-height: 500px;
margin-bottom: 40px;
width: 1200px;
@@ -260,6 +260,7 @@
z-index: 1;
padding: 3px;
overflow: hidden;
height: var(--base-height);
&::after {
content: "";
@@ -306,6 +307,32 @@
bottom: 3px;
}
.fluctuate-box {
position: absolute;
left: 10px;
top: 10px;
display: flex;
align-items: self-end;
z-index: 100;
.item {
height: 100%;
width: 12px;
display: flex;
flex-direction: column;
justify-content: flex-end;
margin-right: 2px;
.item-item {
width: 100%;
height: 5px;
border-radius: 2px;
background-color: #7d4bf8;
margin-top: 2px;
}
}
}
.fluctuate-icon {
width: 400px;
height: 86px;
@@ -323,7 +350,6 @@
left: 0;
display: flex;
.microphone {
// width: 326px;
// height: 326px;
@@ -338,7 +364,7 @@
.start-right {
display: flex;
flex-direction: column;
align-items: flex-start;
.suspect-text {
// height: 56px;
// margin-top: 136px;
@@ -359,12 +385,11 @@
}
.start-icon {
width: fit-content;
// width: fit-content;
height: calc(var(--base-height) * 0.138);
cursor: pointer;
}
}
}
.answer-box {
@@ -444,10 +469,9 @@
z-index: 1;
border-radius: 20px;
&.show {
background: linear-gradient(var(--rotate), #ff1d74, #e3820c 43%, #c28846);
animation: bg 2.5s infinite linear;
background: linear-gradient(var(--rotate), #db4743, #ffffff 43%, #c28846);
animation: bg 1.3s infinite linear;
}
@property --rotate {
@@ -466,7 +490,6 @@
}
}
&::after {
content: "";
z-index: -1;
@@ -500,9 +523,6 @@
}
}
.select-me {
// width: 150px;
// height: 64px;
@@ -713,4 +733,4 @@
/* 列表排序动画（可选） */
.slide-move {
transition: transform 0.3s ease;
}
}

2
static/css/index.css
View File

@@ -175,6 +175,8 @@
z-index: 10;
flex-direction: column;
align-items: center;
height: 448px;
justify-content: space-between;
}
.content .introduce .box .sidebar .pointer {
margin-bottom: 192px;

2
static/css/index.less
View File

@@ -202,6 +202,8 @@
z-index: 10;
flex-direction: column;
align-items: center;
height: 448px;
justify-content: space-between;
.pointer {
margin-bottom: 192px;
.item {

BIN
static/img/works-title.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

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);
};

BIN
static/mp3/guess/triumph.mp3 Normal file
View File

Binary file not shown.