feat(guess): 添加猜歌游戏胜利音效和优化样式
- 新增triumph.mp3作为胜利音效 - 优化guess.css中的动画效果和布局 - 调整guess.js中的音频播放逻辑和状态管理 - 更新guess.html页面结构和样式 - 修改song-request-station.js中的音频源路径
This commit is contained in:
DESKTOP-RQ919RC\Pc
@@ -8,113 +8,156 @@ const search = createApp({
|
||||
]);
|
||||
|
||||
let step = ref(null); // null 是未开始 0 是第一题
|
||||
let detailsHeight = ref(500)
|
||||
const detailsRef = ref(null)
|
||||
let detailsHeight = ref(500);
|
||||
const detailsRef = ref(null);
|
||||
|
||||
let isAnswer = ref(false)
|
||||
let isAnswer = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
console.log("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);
|
||||
isAnswer.value = searchParams.has('answer') ? true : false;
|
||||
|
||||
nextTick(() => {
|
||||
if (detailsRef.value) {
|
||||
detailsHeight.value = detailsRef.value.clientHeight
|
||||
console.log(detailsHeight.value);
|
||||
}
|
||||
})
|
||||
|
||||
isAnswer.value = searchParams.has("a") ? true : false;
|
||||
});
|
||||
|
||||
const init = () => {
|
||||
musicData.value.forEach((item) => {
|
||||
item.sort(() => Math.random() - 0.5);
|
||||
});
|
||||
|
||||
console.log(musicData.value);
|
||||
};
|
||||
|
||||
const begin = () => {
|
||||
step.value = 0;
|
||||
play(musicData.value[0][0]);
|
||||
};
|
||||
|
||||
// 添加一个方法来切换到下一题
|
||||
const nextStep = () => {
|
||||
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) => {
|
||||
console.log("item", item);
|
||||
audioPlayer.value.src = './static/mp3/guess/' + item
|
||||
audioPlayer.value.play()
|
||||
|
||||
audiozSrc.value = item
|
||||
clearTimeout(autoTimer);
|
||||
audioPlayer.value.src = "./static/mp3/guess/" + item;
|
||||
audioPlayer.value.play();
|
||||
audiozSrc.value = item;
|
||||
};
|
||||
|
||||
const stop = () => {
|
||||
audioPlayer.value.pause()
|
||||
audiozSrc.value = ""
|
||||
}
|
||||
audioPlayer.value.pause();
|
||||
audiozSrc.value = "";
|
||||
};
|
||||
|
||||
const playSucceed = () => {
|
||||
audioPlayer.value.src = './static/mp3/guess/succeed.mp3'
|
||||
audioPlayer.value.play()
|
||||
}
|
||||
audioPlayer.value.src = "./static/mp3/guess/succeed.mp3";
|
||||
audioPlayer.value.play();
|
||||
};
|
||||
|
||||
const playTriumph = () => {
|
||||
audioPlayer.value.src = "./static/mp3/guess/triumph.mp3";
|
||||
audioPlayer.value.play();
|
||||
};
|
||||
|
||||
const playLose = () => {
|
||||
audioPlayer.value.src = './static/mp3/guess/lose.mp3'
|
||||
audioPlayer.value.play()
|
||||
}
|
||||
audioPlayer.value.src = "./static/mp3/guess/lose.mp3";
|
||||
audioPlayer.value.play();
|
||||
};
|
||||
|
||||
const audioEnd = () => {
|
||||
console.log("结束");
|
||||
let autoTimer = null;
|
||||
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) => {
|
||||
stop()
|
||||
stop();
|
||||
if (item.indexOf("《") !== -1) {
|
||||
playSucceed()
|
||||
if (step.value == musicData.value.length - 1) {
|
||||
winState.value = true
|
||||
playTriumph();
|
||||
winState.value = true;
|
||||
} else {
|
||||
replyState.value = true
|
||||
autoSkip()
|
||||
playSucceed();
|
||||
replyState.value = true;
|
||||
autoSkip();
|
||||
}
|
||||
} else {
|
||||
loseState.value = true
|
||||
playLose()
|
||||
}
|
||||
}
|
||||
loseState.value = true;
|
||||
playLose();
|
||||
|
||||
let replyState = ref(false)
|
||||
let winState = ref(false)
|
||||
let loseState = ref(false)
|
||||
// 开启一个定时器
|
||||
loseTimer = setTimeout(() => backHome(), 5000);
|
||||
}
|
||||
};
|
||||
|
||||
let replyState = ref(false);
|
||||
let winState = ref(false);
|
||||
let loseState = ref(false);
|
||||
let loseTimer = null;
|
||||
|
||||
const autoSkip = () => {
|
||||
setTimeout(() => {
|
||||
replyState.value = false
|
||||
nextStep()
|
||||
}, 2000)
|
||||
}
|
||||
replyState.value = false;
|
||||
nextStep();
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
const backHome = () => {
|
||||
step.value = null
|
||||
replyState.value = false
|
||||
winState.value = false
|
||||
loseState.value = false
|
||||
}
|
||||
clearTimeout(loseTimer);
|
||||
init();
|
||||
step.value = null;
|
||||
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");
|
||||
|
||||
Reference in New Issue
Block a user