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

feat(guess): 添加猜歌游戏音频播放和结果反馈功能

Browse Source 
- 新增音频播放控制逻辑，支持播放、暂停和结束事件
- 添加答对/答错音效和视觉反馈
- 实现答题结果状态管理（正确、错误、胜利）
- 优化界面布局和响应式设计
- 新增返回首页功能
- 添加答案模式显示选项
This commit is contained in:
A1300399510
2025-09-24 19:10:33 +08:00
parent 6915e54f5c
commit b2969a9d37
9 changed files with 640 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
static/css/guess.css
View File

@@ -3,6 +3,9 @@
padding: 0;
box-sizing: border-box;
}
:root {
--base-height: 500px;
}
.container {
width: 100%;
background-color: #333333;
@@ -215,7 +218,9 @@
left: 997px;
}
.container .container-box .details {
height: 500px;
flex: 1;
max-height: 500px;
margin-bottom: 40px;
width: 1200px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.1);
@@ -267,7 +272,7 @@
width: 400px;
height: 86px;
position: absolute;
top: 293px;
bottom: 120px;
right: 0;
}
.container .container-box .details .start-box {
@@ -276,35 +281,33 @@
position: absolute;
top: 0;
left: 0;
display: flex;
}
.container .container-box .details .start-box .microphone {
width: 326px;
height: 326px;
position: absolute;
top: 93px;
left: 163px;
width: calc(var(--base-height) * 0.652);
height: calc(var(--base-height) * 0.652);
margin-top: calc(var(--base-height) * 0.186);
margin-left: 163px;
margin-right: 28px;
}
.container .container-box .details .start-box .suspect-text {
width: 493px;
height: 56px;
position: absolute;
top: 136px;
left: 517px;
.container .container-box .details .start-box .start-right {
display: flex;
flex-direction: column;
}
.container .container-box .details .start-box .hint {
.container .container-box .details .start-box .start-right .suspect-text {
height: calc(var(--base-height) * 0.112);
margin-top: calc(var(--base-height) * 0.278);
margin-bottom: calc(var(--base-height) * 0.048);
}
.container .container-box .details .start-box .start-right .hint {
font-size: 18px;
color: #ffffff;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
position: absolute;
top: 215px;
left: 517px;
margin-bottom: calc(var(--base-height) * 0.058);
}
.container .container-box .details .start-box .start-icon {
width: 168px;
height: 69px;
position: absolute;
top: 268px;
left: 517px;
.container .container-box .details .start-box .start-right .start-icon {
width: fit-content;
height: calc(var(--base-height) * 0.138);
cursor: pointer;
}
.container .container-box .details .answer-box {
@@ -314,7 +317,7 @@
top: 0;
left: 0;
flex-direction: column;
padding-top: 39px;
padding-top: calc(var(--base-height) * 0.078);
align-items: center;
}
@keyframes fadeInUp {
@@ -326,9 +329,9 @@
}
}
.container .container-box .details .answer-box .figure {
width: 60px;
height: 60px;
margin-bottom: 25px;
width: calc(var(--base-height) * 0.12);
height: calc(var(--base-height) * 0.12);
margin-bottom: calc(var(--base-height) * 0.05);
}
.container .container-box .details .answer-box.answer-0 .list .item:not(:last-of-type) {
margin-right: 175px;
@@ -340,30 +343,72 @@
margin-right: 78px;
}
.container .container-box .details .answer-box .list {
margin-bottom: 13px;
margin-bottom: calc(var(--base-height) * 0.026);
}
.container .container-box .details .answer-box .list .item {
position: relative;
flex-direction: column;
align-items: center;
}
.container .container-box .details .answer-box .list .item .img {
width: 200px;
height: 212px;
margin-bottom: 40px;
.container .container-box .details .answer-box .list .item .img-box {
display: flex;
justify-content: center;
align-items: center;
width: calc(var(--base-height) * 0.412);
height: calc(var(--base-height) * 0.436);
margin-bottom: calc(var(--base-height) * 0.074);
position: relative;
z-index: 1;
border-radius: 20px;
}
.container .container-box .details .answer-box .list .item .icon {
.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;
}
@property --rotate {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes bg {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
.container .container-box .details .answer-box .list .item .img-box::after {
content: "";
z-index: -1;
width: calc(100% - 6px);
height: calc(100% - 6px);
position: absolute;
top: 164px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
background-color: #7d4bf8;
}
.container .container-box .details .answer-box .list .item .img-box .img {
width: calc(100% - 6px);
height: calc(100% - 6px);
position: relative;
z-index: 1;
}
.container .container-box .details .answer-box .list .item .img-box .icon {
position: absolute;
bottom: calc(var(--base-height) * 0.036);
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 30px;
width: calc(var(--base-height) * 0.06);
height: calc(var(--base-height) * 0.06);
cursor: pointer;
z-index: 1;
}
.container .container-box .details .answer-box .list .item .select-me {
width: 150px;
height: 64px;
width: calc(var(--base-height) * 0.3);
height: calc(var(--base-height) * 0.128);
cursor: pointer;
}
.container .container-box .details .answer-box .text {
@@ -382,13 +427,14 @@
background: linear-gradient(to bottom, rgba(51, 51, 51, 0.2), rgba(0, 0, 0, 0.898));
flex-direction: column;
align-items: center;
z-index: 2;
}
.container .container-box .details .masking .hint-box {
background-color: rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.25);
position: relative;
z-index: 1;
padding: 3px;
height: 64px;
height: calc(var(--base-height) * 0.128);
padding-left: 18px;
border-radius: 60px;
padding-right: 27px;
@@ -412,11 +458,22 @@
}
.container .container-box .details .masking .hint-box .like .icon {
position: absolute;
left: -3px;
top: -3px;
left: -10px;
top: -17px;
width: 92px;
height: 98px;
}
.container .container-box .details .masking .hint-box .regret {
position: relative;
width: calc(var(--base-height) * 0.23);
height: calc(var(--base-height) * 0.23);
}
.container .container-box .details .masking .hint-box .regret .icon {
width: 100%;
height: 100%;
position: absolute;
top: -15px;
}
.container .container-box .details .masking .hint-box .text {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
@@ -425,17 +482,7 @@
color: #ffffff;
text-overflow: ellipsis;
}
.container .container-box .details .reply {
justify-content: center;
}
.container .container-box .details .win {
justify-content: space-between;
}
.container .container-box .details .win .win-icon {
width: 209px;
height: 200px;
}
.container .container-box .details .win .index-btn {
.container .container-box .details .masking .index-btn {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
@@ -447,8 +494,9 @@
line-height: 40px;
z-index: 1;
position: relative;
cursor: pointer;
}
.container .container-box .details .win .index-btn .index-icon {
.container .container-box .details .masking .index-btn .index-icon {
width: 190px;
height: 40px;
position: absolute;
@@ -457,6 +505,39 @@
transform: translate(-50%, -50%);
z-index: -1;
}
.container .container-box .details .reply {
justify-content: center;
}
.container .container-box .details .win .gold-left {
width: 327px;
height: 381px;
position: absolute;
top: 55px;
left: 146px;
}
.container .container-box .details .win .gold-right {
width: 416px;
height: 375px;
position: absolute;
top: 37px;
left: 755px;
}
.container .container-box .details .win .win-icon {
width: calc(var(--base-height) * 0.418);
height: calc(var(--base-height) * 0.4);
margin-top: calc(var(--base-height) * 0.004);
margin-bottom: calc(var(--base-height) * 0.022);
}
.container .container-box .details .win .hint-box {
margin-bottom: calc(var(--base-height) * 0.318);
}
.container .container-box .details .lose {
padding-top: calc(var(--base-height) * 0.422);
}
.container .container-box .details .lose .hint-box {
margin-bottom: calc(var(--base-height) * 0.322);
padding-left: 15px;
}
/* 入场动画 */
.slide-right-enter-from {
/* 入场开始位置：向左偏移自身宽度 */

281
static/css/guess.less
View File

@@ -3,26 +3,36 @@
padding: 0;
box-sizing: border-box;
}
:root {
--base-height: 500px;
}
.container {
.flexflex {
display: flex;
}
.flexcenter {
display: flex;
justify-content: center;
align-items: center;
}
.flexjcenter {
display: flex;
justify-content: center;
}
.flexacenter {
display: flex;
align-items: center;
}
.flex1 {
flex: 1;
}
.flexcolumn {
display: flex;
flex-direction: column;
@@ -239,7 +249,10 @@
}
.details {
height: 500px;
// height: 500px;
flex: 1;
max-height: 500px;
margin-bottom: 40px;
width: 1200px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.1);
@@ -297,7 +310,8 @@
width: 400px;
height: 86px;
position: absolute;
top: 293px;
// top: 293px;
bottom: 120px;
right: 0;
}
@@ -307,39 +321,50 @@
position: absolute;
top: 0;
left: 0;
display: flex;
.microphone {
width: 326px;
height: 326px;
position: absolute;
top: 93px;
left: 163px;
// width: 326px;
// height: 326px;
// margin-top: 93px;
width: calc(var(--base-height) * 0.652);
height: calc(var(--base-height) * 0.652);
margin-top: calc(var(--base-height) * 0.186);
margin-left: 163px;
margin-right: 28px;
}
.suspect-text {
width: 493px;
height: 56px;
position: absolute;
top: 136px;
left: 517px;
.start-right {
display: flex;
flex-direction: column;
.suspect-text {
// height: 56px;
// margin-top: 136px;
// margin-bottom: 23px;
height: calc(var(--base-height) * 0.112);
margin-top: calc(var(--base-height) * 0.278);
margin-bottom: calc(var(--base-height) * 0.048);
}
.hint {
font-size: 18px;
color: #ffffff;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
// position: absolute;
// top: calc(var(--base-height) * 0.43);
// left: 517px;
margin-bottom: calc(var(--base-height) * 0.058);
}
.start-icon {
width: fit-content;
height: calc(var(--base-height) * 0.138);
cursor: pointer;
}
}
.hint {
font-size: 18px;
color: #ffffff;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
position: absolute;
top: 215px;
left: 517px;
}
.start-icon {
width: 168px;
height: 69px;
position: absolute;
top: 268px;
left: 517px;
cursor: pointer;
}
}
.answer-box {
@@ -349,7 +374,8 @@
top: 0;
left: 0;
flex-direction: column;
padding-top: 39px;
// padding-top: 39px;
padding-top: calc(var(--base-height) * 0.078);
align-items: center;
// animation: fadeInUp 3s ease forwards;
@@ -364,9 +390,10 @@
}
.figure {
width: 60px;
height: 60px;
margin-bottom: 25px;
width: calc(var(--base-height) * 0.12);
height: calc(var(--base-height) * 0.12);
// margin-bottom: 22px;
margin-bottom: calc(var(--base-height) * 0.05);
}
&.answer-0 {
@@ -394,30 +421,93 @@
}
.list {
margin-bottom: 13px;
// margin-bottom: 13px;
margin-bottom: calc(var(--base-height) * 0.026);
.item {
position: relative;
flex-direction: column;
align-items: center;
.img {
width: 200px;
height: 212px;
margin-bottom: 40px;
.img-box {
display: flex;
justify-content: center;
align-items: center;
width: calc(var(--base-height) * 0.412);
height: calc(var(--base-height) * 0.436);
// width: 206px;
// height: 218px;
// margin-bottom: 37px;
margin-bottom: calc(var(--base-height) * 0.074);
position: relative;
z-index: 1;
border-radius: 20px;
&.show {
background: linear-gradient(var(--rotate), #ff1d74, #e3820c 43%, #c28846);
animation: bg 2.5s infinite linear;
}
@property --rotate {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes bg {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
&::after {
content: "";
z-index: -1;
width: calc(100% - 6px);
height: calc(100% - 6px);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
background-color: #7d4bf8;
}
.img {
width: calc(100% - 6px);
height: calc(100% - 6px);
position: relative;
z-index: 1;
}
.icon {
position: absolute;
// top: 164px;
bottom: calc(var(--base-height) * 0.036);
left: 50%;
transform: translateX(-50%);
width: calc(var(--base-height) * 0.06);
height: calc(var(--base-height) * 0.06);
cursor: pointer;
z-index: 1;
}
}
.icon {
position: absolute;
top: 164px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 30px;
cursor: pointer;
}
.select-me {
width: 150px;
height: 64px;
// width: 150px;
// height: 64px;
width: calc(var(--base-height) * 0.3);
height: calc(var(--base-height) * 0.128);
cursor: pointer;
}
}
@@ -441,15 +531,19 @@
background: linear-gradient(to bottom, rgba(51, 51, 51, 0.2), rgba(0, 0, 0, 0.898));
flex-direction: column;
align-items: center;
z-index: 2;
.hint-box {
background-color: rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.25);
position: relative;
z-index: 1;
padding: 3px;
height: 64px;
// height: 64px;
height: calc(var(--base-height) * 0.128);
padding-left: 18px;
border-radius: 60px;
padding-right: 27px;
&::after {
content: "";
position: absolute;
@@ -470,13 +564,28 @@
.icon {
position: absolute;
left: -3px;
top: -3px;
left: -10px;
top: -17px;
width: 92px;
height: 98px;
}
}
.regret {
position: relative;
// width: 115px;
// height: 115px;
width: calc(var(--base-height) * 0.23);
height: calc(var(--base-height) * 0.23);
.icon {
width: 100%;
height: 100%;
position: absolute;
top: -15px;
}
}
.text {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
@@ -486,18 +595,6 @@
text-overflow: ellipsis;
}
}
}
.reply {
justify-content: center;
}
.win {
justify-content: space-between;
.win-icon {
width: 209px;
height: 200px;
}
.index-btn {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
@@ -511,6 +608,7 @@
line-height: 40px;
z-index: 1;
position: relative;
cursor: pointer;
.index-icon {
width: 190px;
@@ -523,6 +621,55 @@
}
}
}
.reply {
justify-content: center;
}
.win {
.gold-left {
width: 327px;
height: 381px;
position: absolute;
top: 55px;
left: 146px;
}
.gold-right {
width: 416px;
height: 375px;
position: absolute;
top: 37px;
left: 755px;
}
.win-icon {
// width: 209px;
// height: 200px;
// margin-top: 2px;
// margin-bottom: 11px;
width: calc(var(--base-height) * 0.418);
height: calc(var(--base-height) * 0.4);
margin-top: calc(var(--base-height) * 0.004);
margin-bottom: calc(var(--base-height) * 0.022);
}
.hint-box {
// margin-bottom: 159px;
margin-bottom: calc(var(--base-height) * 0.318);
}
}
.lose {
// padding-top: 211px;
padding-top: calc(var(--base-height) * 0.422);
.hint-box {
// margin-bottom: 161px;
margin-bottom: calc(var(--base-height) * 0.322);
padding-left: 15px;
}
}
}
}
}
@@ -566,4 +713,4 @@
/* 列表排序动画（可选） */
.slide-move {
transition: transform 0.3s ease;
}
}

BIN
static/img/guess/gold-left.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 679 KiB

BIN
static/img/guess/gold-right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 408 KiB

94
static/js/guess.js
View File

@@ -2,20 +2,36 @@ const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue;
const search = createApp({
setup() {
const musicData = ref([
["A组 世界在转动.MP3", "A组《来吧，占领我的无私》"],
["A组 世界在转动.MP3", "A组《来吧，占领我的无私》.MP3"],
["B组 《远方》.MP3", "B组 大闹天宫.MP3", "B组 下一站旅行.MP3"],
["C组 旧唱片.MP3", "C组 梅雨季.MP3", "C组 尊重成长共赢.MP3", "C组《弥留》.MP3"],
]);
let step = ref(0); // null 是未开始 0 是第一题
let step = ref(null); // null 是未开始 0 是第一题
let detailsHeight = ref(500)
const detailsRef = ref(null)
let isAnswer = ref(false)
onMounted(() => {
console.log("init");
init();
console.log("detailsRef", detailsRef.value);
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);
}
})
});
const init = () => {
// 将 musicData 里的 二维值打乱
musicData.value.forEach((item) => {
item.sort(() => Math.random() - 0.5);
});
@@ -29,18 +45,76 @@ const search = createApp({
// 添加一个方法来切换到下一题
const nextStep = () => {
if (step.value < musicData.value.length - 1) {
step.value++;
} else {
// 所有问题都回答完毕，可以重置或显示结果
// step.value = null;
}
step.value++;
};
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
};
return { play, step, begin, musicData, nextStep };
const stop = () => {
audioPlayer.value.pause()
audiozSrc.value = ""
}
const playSucceed = () => {
audioPlayer.value.src = './static/mp3/guess/succeed.mp3'
audioPlayer.value.play()
}
const playLose = () => {
audioPlayer.value.src = './static/mp3/guess/lose.mp3'
audioPlayer.value.play()
}
const audioEnd = () => {
console.log("结束");
audiozSrc.value = ""
}
const select = (item, index) => {
stop()
if (item.indexOf("《") !== -1) {
playSucceed()
if (step.value == musicData.value.length - 1) {
winState.value = true
} else {
replyState.value = true
autoSkip()
}
} else {
loseState.value = true
playLose()
}
}
let replyState = ref(false)
let winState = ref(false)
let loseState = ref(false)
const autoSkip = () => {
setTimeout(() => {
replyState.value = false
nextStep()
}, 2000)
}
const backHome = () => {
step.value = null
replyState.value = false
winState.value = false
loseState.value = false
}
return { isAnswer, detailsHeight, detailsRef, audioEnd, playSucceed, stop, audiozSrc, audioPlayer, backHome, select, loseState, winState, replyState, play, step, begin, musicData, nextStep };
},
}).mount("#guess");

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

Binary file not shown.

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

Binary file not shown.