diff --git a/public/sound-button-click.mp3 b/public/sound-button-click.mp3 new file mode 100644 index 0000000..a07708b Binary files /dev/null and b/public/sound-button-click.mp3 differ diff --git a/public/sound-disco.mp3 b/public/sound-disco.mp3 new file mode 100644 index 0000000..2ed5d20 Binary files /dev/null and b/public/sound-disco.mp3 differ diff --git a/public/sound-triple.mp3 b/public/sound-triple.mp3 new file mode 100644 index 0000000..88571e9 Binary files /dev/null and b/public/sound-triple.mp3 differ diff --git a/src/App.css b/src/App.css index a6ce0b3..6e80bfb 100644 --- a/src/App.css +++ b/src/App.css @@ -90,3 +90,12 @@ top: 0; left: 0; } + +.bgm-button { + position: fixed; + left: 0; + top: 0; + padding: 4px; + width: 36px; + height: 36px; +} diff --git a/src/App.tsx b/src/App.tsx index 70e1bdd..b4fc950 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,8 @@ import React, { FC, MouseEventHandler, - startTransition, useEffect, + useRef, useState, } from 'react'; @@ -143,6 +143,20 @@ const App: FC = () => { const [finished, setFinished] = useState(false); const [tipText, setTipText] = useState(''); const [animating, setAnimating] = useState(false); + const bgmRef = useRef(null); + const [bgmOn, setBgmOn] = useState(false); + const [once, setOnce] = useState(false); + const tapSoundRef = useRef(null); + const tripleSoundRef = useRef(null); + const levelUpSoundRef = useRef(null); + + useEffect(() => { + if (bgmOn) { + bgmRef.current?.play(); + } else { + bgmRef.current?.pause(); + } + }, [bgmOn]); // 队列区排序 useEffect(() => { @@ -264,11 +278,22 @@ const App: FC = () => { // 点击item const clickSymbol = async (idx: number) => { if (finished || animating) return; + + if (!once) { + setBgmOn(true); + setOnce(true); + } + const updateScene = scene.slice(); const symbol = updateScene[idx]; if (symbol.isCover || symbol.status !== 0) return; symbol.status = 1; + if (tapSoundRef.current) { + tapSoundRef.current.currentTime = 0; + tapSoundRef.current.play(); + } + let updateQueue = queue.slice(); updateQueue.push(symbol); @@ -285,7 +310,13 @@ const App: FC = () => { updateQueue = updateQueue.filter((sb) => sb.icon !== symbol.icon); for (const sb of filterSame) { const find = updateScene.find((i) => i.id === sb.id); - if (find) find.status = 2; + if (find) { + find.status = 2; + if (tripleSoundRef.current) { + tripleSoundRef.current.currentTime = 0.55; + tripleSoundRef.current.play(); + } + } } } @@ -372,6 +403,14 @@ const App: FC = () => { )} + + + +