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

95
2.html Normal file
View File

@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS实现卡片边框渐变动画</title>
</head>
<link rel="stylesheet" href="../common.css" />
<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>
<body>
<div class="card">
<span>苏苏就是小苏苏888</span>
</div>
</body>
</html>

63
guess.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -15,8 +16,10 @@
}
</style>
</head>
<body>
<div class="container" id="guess" v-cloak>
<audio ref="audioPlayer" preload="none" @ended="audioEnd"></audio>
<div class="container-box mar1200">
<img class="logo" src="./static/img/logo.png" alt="" />
<div class="header">
@@ -39,7 +42,7 @@
<img class="shadow" src="./static/img/shadow.png" />
</div>
<div class="details">
<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="" />
@@ -48,33 +51,38 @@
<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 class="answer-box flexacenter" :class="[`answer-${ index }`]" v-for="(item, index) in musicData" v-show="step == index" :key="'answer-' + index">
</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">
<img class="img" :src="`./static/img/guess/treasure-${ songIndex + 1 }.png`" alt="" />
<img class="icon" @click="play(song)" src="./static/img/play-white-icon.svg" alt="" />
<img class="select-me" src="./static/img/guess/select-me.png" alt="" />
<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 class="text">请问哪首歌是真人唱的？</div>
</div>
</transition-group>
<!-- <div class="masking reply flexflex">
<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 reply flexflex" v-if="false">
<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="" />
@@ -83,7 +91,9 @@
</div>
</div>
<div class="masking win flexflex">
<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">
@@ -92,14 +102,31 @@
<div class="text">恭喜答对！马上进入下一题…</div>
</div>
<div class="index-btn">
<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>
<script src="./static/js/guess.js"></script>
</body>
</html>

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 {
/* 入场开始位置：向左偏移自身宽度 */

245
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,41 +321,52 @@
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;
}
.start-right {
display: flex;
flex-direction: column;
.suspect-text {
width: 493px;
height: 56px;
position: absolute;
top: 136px;
left: 517px;
// 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: 215px;
left: 517px;
// position: absolute;
// top: calc(var(--base-height) * 0.43);
// left: 517px;
margin-bottom: calc(var(--base-height) * 0.058);
}
.start-icon {
width: 168px;
height: 69px;
position: absolute;
top: 268px;
left: 517px;
width: fit-content;
height: calc(var(--base-height) * 0.138);
cursor: pointer;
}
}
}
.answer-box {
width: 100%;
height: 100%;
@@ -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-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: 200px;
height: 212px;
margin-bottom: 40px;
width: calc(100% - 6px);
height: calc(100% - 6px);
position: relative;
z-index: 1;
}
.icon {
position: absolute;
top: 164px;
// top: 164px;
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;
}
}
.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;
}
}
}
}
}

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

92
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;
}
};
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.