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

186
2.html
View File

@@ -1,95 +1,95 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>Item Appear Animation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="styles.css" />
<title>CSS实现卡片边框渐变动画</title> <style>
</head>
<link rel="stylesheet" href="../common.css" /> </style>
<style> </head>
/* 引入字体 */ <body>
@import url("https://fonts.googleapis.com/css?family=Amatic+SC"); <div class="box" id="animationContainer">
<div class="wave-bg"></div>
body { </div>
/* 添加透视效果 */
transform-style: preserve-3d; <script>
perspective: 1800px; document.addEventListener('DOMContentLoaded', () => {
} const container = document.getElementById('animationContainer');
let containerWidth = container.offsetWidth;
.card { let containerHeight = container.offsetHeight;
width: 300px;
height: 200px; // 颜色数组
border-radius: 15px; const colors = [
box-shadow: 0 10px 20px 20px rgba(0, 0, 0, 0.17); '#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA5A5', '#845EC2',
/* 修改角度为--rotate */ '#D65DB1', '#FF6F91', '#FF9671', '#FFC75F', '#F9F871',
background: linear-gradient(var(--rotate), #ff1d74, #e3820c 43%, #c28846); '#00B894', '#0984E3', '#6C5CE7', '#A29BFE', '#FD79A8'
/* 添加旋转动画 */ ];
animation: bg 2.5s infinite linear;
position: relative; // 创建指定数量的动画元素
/* transform: rotateX(10deg) rotateY(15deg); */ const createAnimatedItems = (count) => {
} for (let i = 0; i < count; i++) {
setTimeout(() => {
.card::after { createSingleItem();
content: ""; }, i * 100); // 每个元素间隔100ms创建
position: absolute; }
width: 296px; };
height: 196px;
left: calc(50% - 148px); // 创建单个动画元素
top: calc(50% - 98px); const createSingleItem = () => {
background: #222; const item = document.createElement('div');
border-radius: 15px; item.classList.add('animated-item');
}
// 随机大小
.card span { const size = Math.random() * 60 + 20; // 20-80px
position: absolute; item.style.width = `${size}px`;
width: 100%; item.style.height = `${size}px`;
text-align: center;
z-index: 1; // 随机颜色
left: 0; const color = colors[Math.floor(Math.random() * colors.length)];
top: 50%; item.style.backgroundColor = color;
transform: translateY(-50%);
font-size: 26px; // 随机位置，确保在容器内
font-weight: bold; const left = Math.random() * (containerWidth - size);
color: #fff; const top = Math.random() * (containerHeight - size - 100) + 50; // 避开底部波浪
letter-spacing: 2px; item.style.left = `${left}px`;
font-family: "Amatic SC"; item.style.top = `${top}px`;
cursor: default;
/* 添加过渡效果 */ // 设置入场动画
transition: all 0.5s; const appearDuration = Math.random() * 0.5 + 0.5; // 0.5-1s
} item.style.animation = `appear ${appearDuration}s forwards`;
/* span添加hover */ container.appendChild(item);
.card:hover span {
background: linear-gradient(45deg, #ff1d74, #e3820c 43%, #c28846); // 入场动画完成后添加移动动画
color: transparent; setTimeout(() => {
background-clip: text; const moveDuration = Math.random() * 2 + 3; // 3-5s
-webkit-background-clip: text; item.style.animation = `appear ${appearDuration}s forwards, move ${moveDuration}s ease-in-out infinite`;
} }, appearDuration * 1000);
/* 定义@property */ // 随机时间后移除元素并创建新元素
@property --rotate { const lifeTime = Math.random() * 5 + 8; // 8-13s
syntax: "<angle>"; setTimeout(() => {
initial-value: 0deg; // 退场动画
inherits: false; item.style.animation = `appear ${appearDuration}s reverse forwards`;
} setTimeout(() => {
container.removeChild(item);
@keyframes bg { // 创建新元素替代
0% { createSingleItem();
--rotate: 0deg; }, appearDuration * 1000);
} }, lifeTime * 1000);
};
100% {
--rotate: 360deg; // 初始创建20个元素
} createAnimatedItems(20);
}
</style> // 窗口大小改变时重新计算容器尺寸
window.addEventListener('resize', () => {
<body> containerWidth = container.offsetWidth;
<div class="card"> containerHeight = container.offsetHeight;
<span>苏苏就是小苏苏888</span> });
</div> });
</body> </script>
</body>
</html> </html>

228
guess.html
View File

@@ -1,132 +1,124 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head> <title>朴见潮音 - 猜歌</title>
<meta charset="UTF-8" /> <link rel="stylesheet" href="./static/css/guess.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="./static/js/vue.global.js"></script>
<link rel="icon" href="./static/img/favicon.ico" type="image/x-icon" />
<title>朴见潮音 - 猜歌</title> <style>
<link rel="stylesheet" href="./static/css/guess.css" /> [v-cloak] {
<script src="./static/js/vue.global.js"></script> display: none;
<link rel="icon" href="./static/img/favicon.ico" type="image/x-icon" /> }
</style>
</head>
<style> <body>
[v-cloak] { <div class="container" id="guess" v-cloak>
display: none; <audio ref="audioPlayer" preload="none" @ended="audioEnd"></audio>
} <div class="container-box mar1200">
</style> <img class="logo" src="./static/img/logo.png" alt="" />
</head> <div class="header">
<img class="halo" src="./static/img/halo.png" />
<img class="record-black" src="./static/img/record-black.svg" />
<div class="record-circle"></div>
<img class="star-icon" src="./static/img/star-icon.png" alt="" />
<img class="bj-2" src="./static/img/guess/guess-bj-2.svg" alt="" />
<img class="love-little" src="./static/img/guess/guess-love-little.svg" alt="" />
<img class="music-icon" src="./static/img/music-icon.svg" alt="" />
<img class="bj" src="./static/img/guess/guess-bj.svg" alt="" />
<img class="love-big" src="./static/img/guess/guess-love-big.svg" alt="" />
<img class="music-score" src="./static/img/music-score.png" />
<img class="question" src="./static/img/guess/question-mark.png" />
<img class="text" src="./static/img/guess/guess-text.svg" />
<img class="face" src="./static/img/smiling-face.png" />
<img class="star-icon-2" src="./static/img/star-icon-2.png" />
<img class="ai-music" src="./static/img/ai-music.png" />
<img class="green-glow" src="./static/img/green-glow.png" />
<img class="shadow" src="./static/img/shadow.png" />
</div>
<body> <div class="details" ref="detailsRef" :style="{'--base-height': `${ detailsHeight }px`}">
<div class="container" id="guess" v-cloak> <img class="ray-light ray-light-left" src="./static/img/guess/ray-light.svg" />
<audio ref="audioPlayer" preload="none" @ended="audioEnd"></audio> <img class="ray-light ray-light-right" src="./static/img/guess/ray-light.svg" />
<div class="container-box mar1200"> <img class="bj-check" src="./static/img/guess/bj-check.svg" alt="" />
<img class="logo" src="./static/img/logo.png" alt="" /> <img class="bj-mask" src="./static/img/guess/bj-mask.svg" alt="" />
<div class="header"> <!-- <div class="fluctuate-box">
<img class="halo" src="./static/img/halo.png" /> <div class="item" v-for="(item, index) in fluctuate" :key="index"><div class="item-item" v-for="(item, index) in item" :key="index"></div></div>
<img class="record-black" src="./static/img/record-black.svg" /> </div> -->
<div class="record-circle"></div> <img class="fluctuate-icon" src="./static/img/guess/fluctuate-icon.png" alt="" />
<img class="star-icon" src="./static/img/star-icon.png" alt="" /> <transition-group name="slide-right" tag="div" class="transition-container">
<img class="bj-2" src="./static/img/guess/guess-bj-2.svg" alt="" /> <div class="start-box" v-show="step == null" key="start">
<img class="love-little" src="./static/img/guess/guess-love-little.svg" alt="" /> <img class="microphone" src="./static/img/guess/microphone.png" alt="" />
<img class="music-icon" src="./static/img/music-icon.svg" alt="" /> <div class="start-right">
<img class="bj" src="./static/img/guess/guess-bj.svg" alt="" /> <img class="suspect-text" src="./static/img/guess/suspect-text.png" alt="" />
<img class="love-big" src="./static/img/guess/guess-love-big.svg" alt="" /> <div class="hint">连对3题有奖品哦，快来挑战吧！</div>
<img class="music-score" src="./static/img/music-score.png" /> <img class="start-icon" @click="begin" src="./static/img/guess/start-icon.png" alt="" />
<img class="question" src="./static/img/guess/question-mark.png" />
<img class="text" src="./static/img/guess/guess-text.svg" />
<img class="face" src="./static/img/smiling-face.png" />
<img class="star-icon-2" src="./static/img/star-icon-2.png" />
<img class="ai-music" src="./static/img/ai-music.png" />
<img class="green-glow" src="./static/img/green-glow.png" />
<img class="shadow" src="./static/img/shadow.png" />
</div>
<div class="details" ref="detailsRef" :style="{'--base-height': `${ detailsHeight }px`}">
<img class="ray-light ray-light-left" src="./static/img/guess/ray-light.svg" />
<img class="ray-light ray-light-right" src="./static/img/guess/ray-light.svg" />
<img class="bj-check" src="./static/img/guess/bj-check.svg" alt="" />
<img class="bj-mask" src="./static/img/guess/bj-mask.svg" alt="" />
<img class="fluctuate-icon" src="./static/img/guess/fluctuate-icon.png" alt="" />
<transition-group name="slide-right" tag="div" class="transition-container">
<div class="start-box" v-show="step == null" key="start">
<img class="microphone" src="./static/img/guess/microphone.png" alt="" />
<div class="start-right">
<img class="suspect-text" src="./static/img/guess/suspect-text.png" alt="" />
<div class="hint">连对3题有奖品哦，快来挑战吧！</div>
<img class="start-icon" @click="begin" src="./static/img/guess/start-icon.png" alt="" />
</div>
</div>
<div class="answer-box flexacenter" :class="[`answer-${ index }`]"
v-for="(item, index) in musicData" v-show="step == index" :key="'answer-' + index">
<img class="figure" :src="`./static/img/guess/figure-${ index + 1 }.png`" alt="" />
<div class="list flexflex">
<div class="item flexflex " v-for="(song, songIndex) in item"
:key="'song-' + index + '-' + songIndex">
<div class="img-box" :class="{'show': audiozSrc == song}">
<img class="img" :src="`./static/img/guess/treasure-${ songIndex + 1 }.png`"
alt="" />
<img class="icon" v-if="audiozSrc == song" @click="stop"
src="./static/img/pause-white-icon.svg" alt="" />
<img class="icon" v-else @click="play(song)" src="./static/img/play-white-icon.svg"
alt="" />
</div>
<img class="select-me" src="./static/img/guess/select-me.png" alt=""
@click="select(song, index)" />
{{ isAnswer ? song : '' }}
</div> </div>
</div> </div>
<div class="text">请问哪首歌是真人唱的？</div> <div class="answer-box flexacenter" :class="[`answer-${ index }`]" v-for="(item, index) in musicData" v-show="step == index" :key="'answer-' + index">
</div> <img class="figure" :src="`./static/img/guess/figure-${ index + 1 }.png`" alt="" />
</transition-group> <div class="list flexflex">
<div class="item flexflex" v-for="(song, songIndex) in item" :key="'song-' + index + '-' + songIndex">
<div class="img-box" :class="{'show': audiozSrc == song}">
<img class="img" :src="`./static/img/guess/treasure-${ songIndex + 1 }.png`" alt="" />
<img class="icon" v-if="audiozSrc == song" @click="stop" src="./static/img/pause-white-icon.svg" alt="" />
<img class="icon" v-else @click="play(song)" src="./static/img/play-white-icon.svg" alt="" />
</div>
<div class="masking reply flexflex" v-if="replyState"> <img class="select-me" src="./static/img/guess/select-me.png" alt="" @click="select(song, index)" />
<div class="hint-box flexacenter"> <div class="" style="position: absolute; top: 0; left: 0; transform: translateY(-100%)">{{ isAnswer ? song : '' }}</div>
<div class="like"> </div>
<img class="icon" src="./static/img/guess/like-icon.svg" alt="" /> </div>
<div class="text">请问哪首歌是真人唱的？</div>
</div>
</transition-group>
<div class="masking reply flexflex" v-if="replyState">
<div class="hint-box flexacenter">
<div class="like">
<img class="icon" src="./static/img/guess/like-icon.svg" alt="" />
</div>
<div class="text">恭喜答对！马上进入下一题…</div>
</div>
</div>
<div class="masking win flexflex" v-if="winState">
<img class="gold-left" src="./static/img/guess/gold-left.png" alt="" />
<img class="gold-right" src="./static/img/guess/gold-right.png" alt="" />
<img class="win-icon" src="./static/img/guess/win-icon.png" alt="" />
<div class="hint-box flexacenter">
<div class="like">
<img class="icon" src="./static/img/guess/like-icon.svg" alt="" />
</div>
<div class="text">恭喜答对！马上进入下一题…</div>
</div>
<div class="index-btn" @click="backHome">
<img class="index-icon" src="./static/img/guess/index-icon.svg" alt="" />
返回首页
</div>
</div>
<div class="masking lose flexflex" v-if="loseState">
<div class="hint-box flexacenter">
<div class="regret">
<img class="icon" src="./static/img/guess/regret-icon.png" alt="" />
</div>
<div class="text">很遗憾没有答对…</div>
</div>
<div class="index-btn" @click="backHome">
<img class="index-icon" src="./static/img/guess/index-icon.svg" alt="" />
返回首页
</div> </div>
<div class="text">恭喜答对！马上进入下一题…</div>
</div> </div>
</div> </div>
<div class="masking win flexflex" v-if="winState">
<img class="gold-left" src="./static/img/guess/gold-left.png" alt="" />
<img class="gold-right" src="./static/img/guess/gold-right.png" alt="" />
<img class="win-icon" src="./static/img/guess/win-icon.png" alt="" />
<div class="hint-box flexacenter">
<div class="like">
<img class="icon" src="./static/img/guess/like-icon.svg" alt="" />
</div>
<div class="text">恭喜答对！马上进入下一题…</div>
</div>
<div class="index-btn" @click="backHome">
<img class="index-icon" src="./static/img/guess/index-icon.svg" alt="" />
返回首页
</div>
</div>
<div class="masking lose flexflex" v-if="loseState">
<div class="hint-box flexacenter">
<div class="regret">
<img class="icon" src="./static/img/guess/regret-icon.png" alt="" />
</div>
<div class="text">很遗憾没有答对…</div>
</div>
<div class="index-btn" @click="backHome">
<img class="index-icon" src="./static/img/guess/index-icon.svg" alt="" />
返回首页
</div>
</div>
</div> </div>
</div> </div>
</div> <script src="./static/js/guess.js"></script>
<script src="./static/js/guess.js"></script> </body>
</body> </html>
</html>

1
song-request-station.html
View File

@@ -31,6 +31,7 @@
<img class="music-icon" src="./static/img/music-icon.svg" alt="" /> <img class="music-icon" src="./static/img/music-icon.svg" alt="" />
<img class="bj" src="./static/img/song-request-bj.svg" alt="" /> <img class="bj" src="./static/img/song-request-bj.svg" alt="" />
<img class="love-big" src="./static/img/love-big.svg" alt="" /> <img class="love-big" src="./static/img/love-big.svg" alt="" />
<img class="robot" src="./static/img/robot.png" alt="" />
<img class="music-score" src="./static/img/music-score.png" /> <img class="music-score" src="./static/img/music-score.png" />
<img class="text" src="./static/img/song-request-text.svg" /> <img class="text" src="./static/img/song-request-text.svg" />
<img class="face" src="./static/img/smiling-face.png" /> <img class="face" src="./static/img/smiling-face.png" />

31
static/css/guess.css
View File

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

46
static/css/guess.less
View File

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

2
static/css/index.css
View File

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

2
static/css/index.less
View File

@@ -202,6 +202,8 @@
z-index: 10; z-index: 10;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
height: 448px;
justify-content: space-between;
.pointer { .pointer {
margin-bottom: 192px; margin-bottom: 192px;
.item { .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 step = ref(null); // null 是未开始 0 是第一题
let detailsHeight = ref(500) let detailsHeight = ref(500);
const detailsRef = ref(null) const detailsRef = ref(null);
let isAnswer = ref(false) let isAnswer = ref(false);
onMounted(() => { onMounted(() => {
console.log("init");
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); const searchParams = new URLSearchParams(window.location.search);
isAnswer.value = searchParams.has('answer') ? true : false; isAnswer.value = searchParams.has("a") ? true : false;
nextTick(() => {
if (detailsRef.value) {
detailsHeight.value = detailsRef.value.clientHeight
console.log(detailsHeight.value);
}
})
}); });
const init = () => { const init = () => {
musicData.value.forEach((item) => { musicData.value.forEach((item) => {
item.sort(() => Math.random() - 0.5); item.sort(() => Math.random() - 0.5);
}); });
console.log(musicData.value);
}; };
const begin = () => { const begin = () => {
step.value = 0; step.value = 0;
play(musicData.value[0][0]);
}; };
// 添加一个方法来切换到下一题 // 添加一个方法来切换到下一题
const nextStep = () => { const nextStep = () => {
step.value++; 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) => { const play = (item) => {
console.log("item", item); clearTimeout(autoTimer);
audioPlayer.value.src = './static/mp3/guess/' + item audioPlayer.value.src = "./static/mp3/guess/" + item;
audioPlayer.value.play() audioPlayer.value.play();
audiozSrc.value = item;
audiozSrc.value = item
}; };
const stop = () => { const stop = () => {
audioPlayer.value.pause() audioPlayer.value.pause();
audiozSrc.value = "" audiozSrc.value = "";
} };
const playSucceed = () => { const playSucceed = () => {
audioPlayer.value.src = './static/mp3/guess/succeed.mp3' audioPlayer.value.src = "./static/mp3/guess/succeed.mp3";
audioPlayer.value.play() audioPlayer.value.play();
} };
const playTriumph = () => {
audioPlayer.value.src = "./static/mp3/guess/triumph.mp3";
audioPlayer.value.play();
};
const playLose = () => { const playLose = () => {
audioPlayer.value.src = './static/mp3/guess/lose.mp3' audioPlayer.value.src = "./static/mp3/guess/lose.mp3";
audioPlayer.value.play() audioPlayer.value.play();
} };
const audioEnd = () => { let autoTimer = null;
console.log("结束"); 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) => { const select = (item, index) => {
stop() stop();
if (item.indexOf("《") !== -1) { if (item.indexOf("《") !== -1) {
playSucceed()
if (step.value == musicData.value.length - 1) { if (step.value == musicData.value.length - 1) {
winState.value = true playTriumph();
winState.value = true;
} else { } else {
replyState.value = true playSucceed();
autoSkip() replyState.value = true;
autoSkip();
} }
} else { } else {
loseState.value = true loseState.value = true;
playLose() playLose();
}
}
let replyState = ref(false) // 开启一个定时器
let winState = ref(false) loseTimer = setTimeout(() => backHome(), 5000);
let loseState = ref(false) }
};
let replyState = ref(false);
let winState = ref(false);
let loseState = ref(false);
let loseTimer = null;
const autoSkip = () => { const autoSkip = () => {
setTimeout(() => { setTimeout(() => {
replyState.value = false replyState.value = false;
nextStep() nextStep();
}, 2000) }, 2000);
} };
const backHome = () => { const backHome = () => {
step.value = null clearTimeout(loseTimer);
replyState.value = false init();
winState.value = false step.value = null;
loseState.value = false 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"); }).mount("#guess");

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

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

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

Binary file not shown.