MusicPlus/index.html at main · freedom-323/MusicPlus · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音感反應遊戲</title>
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
    <meta name="google-site-verification" content="zWIgl9z0a73W6dN_yV96iykHzogsa4Q1RhG90j1TX1o" />
    <style>
        :root {
            --bg-color: #f8f9fa;
            --primary-color: #007bff;
            --success-color: #28a745;
            --danger-color: #dc3545;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            text-align: center;
            background-color: var(--bg-color);
            margin: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            transition: background-color 0.1s ease;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        #ui-layer {
            z-index: 10;
            pointer-events: none;
        }
        #status { font-size: 1.5rem; font-weight: bold; margin-bottom: 10px; color: #333; }
        #score { font-size: 4rem; margin: 10px 0; color: var(--primary-color); text-shadow: 2px 2px 4px rgba(0,0,0,0.1); }
        #timer { font-size: 1.2rem; color: #666; }

        /* 難度選擇選單樣式 */
        #setup-area {
            pointer-events: auto;
            margin-top: 10px;
        }
        #difficulty-select {
            -webkit-appearance: none;  /* 針對 Safari, Chrome */
            -moz-appearance: none;     /* 針對 Firefox */
            appearance: none;
            outline: none;
            padding: 8px 15px;
            font-size: 1rem;
            border-radius: 10px;
            border: 2px solid #ccc;
            margin-bottom: 15px;
            cursor: pointer;
        }

        #start-btn {
            padding: 15px 40px;
            font-size: 1.5rem;
            cursor: pointer;
            background-color: var(--success-color);
            color: white;
            border: none;
            border-radius: 50px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            transition: transform 0.2s;
        }
        #start-btn:active { transform: scale(0.95); }
        .instructions { font-size: 0.9rem; color: #888; margin-top: 20px; }
    </style>
</head>
<body onclick="handleGlobalClick()">

    <div id="ui-layer">
        <div id="status">準備好了嗎？</div>
        <div id="score">0</div>
        <div id="timer">剩餘時間: 60s</div>

        <div id="setup-area">
            <select id="difficulty-select">
                <option value="5">容易模式 (錯誤 -5 分)</option>
                <option value="10" selected>一般模式 (錯誤 -10 分)</option>
                <option value="20">困難模式 (錯誤 -20 分)</option>
            </select>
            <br>
            <button id="start-btn" onclick="startGame(event)">開始遊戲</button>
        </div>

        <div class="instructions">點擊螢幕任一處得一分，音樂停止時點擊會扣分</div>
    </div>

    <audio id="bgm" loop>
        <source src="bgm.mp4" type="audio/mp4">
        您的瀏覽器不支援 MP4 音訊播放。
    </audio>

    <script>
        let score = 0;
        let timeLeft = 60;
        let gameActive = false;
        let timerInterval = null;
        let musicTimeout = null;
        let currentPenalty = 10; // 預設扣分量

        const audio = document.getElementById('bgm');
        const scoreDisplay = document.getElementById('score');
        const timerDisplay = document.getElementById('timer');
        const statusDisplay = document.getElementById('status');
        const startBtn = document.getElementById('start-btn');
        const setupArea = document.getElementById('setup-area');
        const difficultySelect = document.getElementById('difficulty-select');

        function startGame(e) {
            e.stopPropagation();

            // 根據選單設定扣分難度
            currentPenalty = parseInt(difficultySelect.value);

            score = 0;
            timeLeft = 60;
            gameActive = true;
            scoreDisplay.innerText = "0";
            timerDisplay.innerText = `剩餘時間: ${timeLeft}s`;
            setupArea.style.visibility = "hidden"; // 隱藏難度選擇與按鈕

            timerInterval = setInterval(() => {
                timeLeft--;
                timerDisplay.innerText = `剩餘時間: ${timeLeft}s`;
                if (timeLeft <= 0) endGame();
            }, 1000);

            toggleMusicLogic();
        }

        function toggleMusicLogic() {
            if (!gameActive) return;

            const shouldPlay = Math.random() > 0.4;

            if (shouldPlay) {
                audio.play().catch(() => console.log("等待互動中..."));
                statusDisplay.innerText = "音樂播放中！點擊！";
                statusDisplay.style.color = "#28a745";
            } else {
                audio.pause();
                statusDisplay.innerText = "停！不要點擊！";
                statusDisplay.style.color = "#dc3545";
            }

            const nextInterval = Math.floor(Math.random() * 2500) + 1500;
            musicTimeout = setTimeout(toggleMusicLogic, nextInterval);
        }

        function handleGlobalClick() {
            if (!gameActive) return;

            const isPlaying = !audio.paused && audio.currentTime > 0 && !audio.ended;

            if (isPlaying) {
                score++;
                flashBackground("#d4edda");
            } else {
                // 使用目前難度對應的扣分量
                score = Math.max(0, score - currentPenalty);
                flashBackground("#f8d7da");
            }

            scoreDisplay.innerText = score;
        }

        function flashBackground(color) {
            document.body.style.backgroundColor = color;
            setTimeout(() => {
                document.body.style.backgroundColor = "#f8f9fa";
            }, 100);
        }

        function endGame() {
            gameActive = false;
            clearInterval(timerInterval);
            clearTimeout(musicTimeout);
            audio.pause();
            audio.currentTime = 0;

            statusDisplay.innerText = "遊戲結束！";
            statusDisplay.style.color = "#333";
            setupArea.style.visibility = "visible";
            startBtn.innerText = "再次挑戰";

            alert(`時間到！您的最終得分是：${score}`);
        }
    </script>
</body>
</html>