feat(guess): 添加猜歌游戏音频播放和结果反馈功能
- 新增音频播放控制逻辑，支持播放、暂停和结束事件 - 添加答对/答错音效和视觉反馈 - 实现答题结果状态管理（正确、错误、胜利） - 优化界面布局和响应式设计 - 新增返回首页功能 - 添加答案模式显示选项
This commit is contained in:
A1300399510
197
guess.html
197
guess.html
@@ -1,105 +1,132 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<title>朴见潮音 - 猜歌</title>
|
||||
<link rel="stylesheet" href="./static/css/guess.css" />
|
||||
<script src="./static/js/vue.global.js"></script>
|
||||
<link rel="icon" href="./static/img/favicon.ico" type="image/x-icon" />
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<style>
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container" id="guess" v-cloak>
|
||||
<div class="container-box mar1200">
|
||||
<img class="logo" src="./static/img/logo.png" alt="" />
|
||||
<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>
|
||||
<title>朴见潮音 - 猜歌</title>
|
||||
<link rel="stylesheet" href="./static/css/guess.css" />
|
||||
<script src="./static/js/vue.global.js"></script>
|
||||
<link rel="icon" href="./static/img/favicon.ico" type="image/x-icon" />
|
||||
|
||||
<div class="details">
|
||||
<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="" />
|
||||
<style>
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
</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">
|
||||
<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>
|
||||
|
||||
<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 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>
|
||||
</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="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="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>
|
||||
|
||||
<div class="masking win flexflex">
|
||||
<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="" />
|
||||
<img class="select-me" src="./static/img/guess/select-me.png" alt=""
|
||||
@click="select(song, index)" />
|
||||
{{ isAnswer ? song : '' }}
|
||||
</div>
|
||||
<div class="text">恭喜答对！马上进入下一题…</div>
|
||||
</div>
|
||||
<div class="text">请问哪首歌是真人唱的？</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
|
||||
<div class="index-btn">
|
||||
<img class="index-icon" src="./static/img/guess/index-icon.svg" alt="" />
|
||||
返回首页
|
||||
<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>
|
||||
</div>
|
||||
<script src="./static/js/guess.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
<script src="./static/js/guess.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user