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

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

28
guess.html
View File

@@ -1,6 +1,5 @@
<!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 name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -47,6 +46,9 @@
<img class="ray-light ray-light-right" 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-check" src="./static/img/guess/bj-check.svg" alt="" />
<img class="bj-mask" src="./static/img/guess/bj-mask.svg" alt="" /> <img class="bj-mask" src="./static/img/guess/bj-mask.svg" alt="" />
<!-- <div class="fluctuate-box">
<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>
</div> -->
<img class="fluctuate-icon" src="./static/img/guess/fluctuate-icon.png" alt="" /> <img class="fluctuate-icon" src="./static/img/guess/fluctuate-icon.png" alt="" />
<transition-group name="slide-right" tag="div" class="transition-container"> <transition-group name="slide-right" tag="div" class="transition-container">
<div class="start-box" v-show="step == null" key="start"> <div class="start-box" v-show="step == null" key="start">
@@ -56,26 +58,19 @@
<div class="hint">连对3题有奖品哦，快来挑战吧！</div> <div class="hint">连对3题有奖品哦，快来挑战吧！</div>
<img class="start-icon" @click="begin" src="./static/img/guess/start-icon.png" alt="" /> <img class="start-icon" @click="begin" src="./static/img/guess/start-icon.png" alt="" />
</div> </div>
</div> </div>
<div class="answer-box flexacenter" :class="[`answer-${ index }`]" <div class="answer-box flexacenter" :class="[`answer-${ index }`]" v-for="(item, index) in musicData" v-show="step == index" :key="'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="" /> <img class="figure" :src="`./static/img/guess/figure-${ index + 1 }.png`" alt="" />
<div class="list flexflex"> <div class="list flexflex">
<div class="item flexflex " v-for="(song, songIndex) in item" <div class="item flexflex" v-for="(song, songIndex) in item" :key="'song-' + index + '-' + songIndex">
:key="'song-' + index + '-' + songIndex">
<div class="img-box" :class="{'show': audiozSrc == song}"> <div class="img-box" :class="{'show': audiozSrc == song}">
<img class="img" :src="`./static/img/guess/treasure-${ songIndex + 1 }.png`" <img class="img" :src="`./static/img/guess/treasure-${ songIndex + 1 }.png`" alt="" />
alt="" /> <img class="icon" v-if="audiozSrc == song" @click="stop" src="./static/img/pause-white-icon.svg" alt="" />
<img class="icon" v-if="audiozSrc == song" @click="stop" <img class="icon" v-else @click="play(song)" src="./static/img/play-white-icon.svg" alt="" />
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>
<img class="select-me" src="./static/img/guess/select-me.png" alt="" <img class="select-me" src="./static/img/guess/select-me.png" alt="" @click="select(song, index)" />
@click="select(song, index)" /> <div class="" style="position: absolute; top: 0; left: 0; transform: translateY(-100%)">{{ isAnswer ? song : '' }}</div>
{{ isAnswer ? song : '' }}
</div> </div>
</div> </div>
<div class="text">请问哪首歌是真人唱的？</div> <div class="text">请问哪首歌是真人唱的？</div>
@@ -116,17 +111,14 @@
<div class="text">很遗憾没有答对…</div> <div class="text">很遗憾没有答对…</div>
</div> </div>
<div class="index-btn" @click="backHome"> <div class="index-btn" @click="backHome">
<img class="index-icon" src="./static/img/guess/index-icon.svg" alt="" /> <img class="index-icon" src="./static/img/guess/index-icon.svg" alt="" />
返回首页 返回首页
</div> </div>
</div> </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>";

44
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;

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

159
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 "";
};
let fluctuate = ref([]);
onMounted(() => {
// setInterval(() => {
// randomFluctuate();
// }, 150);
});
return { isAnswer, detailsHeight, detailsRef, audioEnd, playSucceed, stop, audiozSrc, audioPlayer, backHome, select, loseState, winState, replyState, play, step, begin, musicData, nextStep }; 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.