2526-web/Kelompok02-Memory-Card
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

audio e gay pol

Browse Source
This commit is contained in:
Nathan 2025-12-19 00:54:35 +07:00
parent 4f9449c90d
commit 6ad0110109
9 changed files with 176 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
assets/gameboard-easy.js
View File

@ -1,3 +1,44 @@
// --- AUDIO CONFIG ---
const bgMusic = document.getElementById("bgMusic");
const sfxClick = document.getElementById("sfxClick");
const sfxMatch = document.getElementById("sfxMatch");
const sfxWrong = document.getElementById("sfxWrong");
const sfxCountdown = document.getElementById("sfxCountdown");
const sfxWin = document.getElementById("sfxWin");
const sfxLose = document.getElementById("sfxLose");
const toggleBtn = document.getElementById("toggleMusic");
const countdownOverlay = document.getElementById("countdown-overlay");
let musicMuted = false;
function playSFX(audio) {
if(!musicMuted) {
audio.currentTime = 0;
audio.play().catch(() => {});
}
}
document.addEventListener('click', function initAudio() {
if(musicMuted) {
musicMuted = false;
toggleBtn.textContent = "🔊";
bgMusic.play().catch(() => {});
document.removeEventListener('click', initAudio);
}
});
toggleBtn.onclick = (e) => {
e.stopPropagation();
if (musicMuted) {
bgMusic.play();
toggleBtn.textContent = "🔊";
} else {
bgMusic.pause();
toggleBtn.textContent = "🔇";
}
musicMuted = !musicMuted;
};
const images = [ const images = [
"images/fruit1.png", "images/fruit2.png", "images/fruit3.png", "images/fruit1.png", "images/fruit2.png", "images/fruit3.png",
"images/fruit4.png", "images/fruit5.png", "images/fruit6.png" "images/fruit4.png", "images/fruit5.png", "images/fruit6.png"

39
assets/gameboard-hard.js
View File

@ -1,3 +1,42 @@
const bgMusic = document.getElementById("bgMusic");
const sfxClick = document.getElementById("sfxClick");
const sfxMatch = document.getElementById("sfxMatch");
const sfxWrong = document.getElementById("sfxWrong");
const sfxCountdown = document.getElementById("sfxCountdown");
const sfxWin = document.getElementById("sfxWin");
const sfxLose = document.getElementById("sfxLose");
const toggleBtn = document.getElementById("toggleMusic");
const overlay = document.getElementById("countdown-overlay");
let musicMuted = true;
function playSFX(audio) {
if(!musicMuted) {
audio.currentTime = 0;
audio.play().catch(() => {});
}
}
document.addEventListener('click', function initAudio() {
if(musicMuted) {
musicMuted = false;
toggleBtn.textContent = "🔊";
bgMusic.play().catch(() => {});
document.removeEventListener('click', initAudio);
}
});
toggleBtn.onclick = (e) => {
e.stopPropagation();
if (musicMuted) {
bgMusic.play();
toggleBtn.textContent = "🔊";
} else {
bgMusic.pause();
toggleBtn.textContent = "🔇";
}
musicMuted = !musicMuted;
};
const images = [ const images = [
"images/fruit1.png", "images/fruit2.png", "images/fruit3.png", "images/fruit1.png", "images/fruit2.png", "images/fruit3.png",

39
assets/gameboard-medium.js
View File

@ -1,4 +1,43 @@
// --- AUDIO CONFIG ---
const bgMusic = document.getElementById("bgMusic");
const sfxClick = document.getElementById("sfxClick");
const sfxMatch = document.getElementById("sfxMatch");
const sfxWrong = document.getElementById("sfxWrong");
const sfxCountdown = document.getElementById("sfxCountdown");
const sfxWin = document.getElementById("sfxWin");
const sfxLose = document.getElementById("sfxLose");
const toggleBtn = document.getElementById("toggleMusic");
const countdownOverlay = document.getElementById("countdown-overlay");
let musicMuted = false;
function playSFX(audio) {
if(!musicMuted) {
audio.currentTime = 0;
audio.play().catch(() => {});
}
}
document.addEventListener('click', function initAudio() {
if(musicMuted) {
musicMuted = false;
toggleBtn.textContent = "🔊";
bgMusic.play().catch(() => {});
document.removeEventListener('click', initAudio);
}
});
toggleBtn.onclick = (e) => {
e.stopPropagation();
if (musicMuted) {
bgMusic.play();
toggleBtn.textContent = "🔊";
} else {
bgMusic.pause();
toggleBtn.textContent = "🔇";
}
musicMuted = !musicMuted;
};
const images = [ const images = [
"images/fruit1.png", "images/fruit2.png", "images/fruit3.png", "images/fruit1.png", "images/fruit2.png", "images/fruit3.png",

76
assets/mainboard.js
View File

@ -1,34 +1,66 @@
// LOGIKA MUSIK document.addEventListener('DOMContentLoaded', () => {
const musicBtn = document.getElementById('musicBtn'); // --- 1. LOGIKA MUSIK (FIXED) ---
const bgMusic = document.getElementById('bgMusic'); const musicBtn = document.getElementById('musicBtn');
let isMusicPlaying = truea; const bgMusic = document.getElementById('bgMusic');
musicBtn.addEventListener('click', () => { if (musicBtn && bgMusic) {
isMusicPlaying ? bgMusic.pause() : bgMusic.play(); // Cek status awal: Kalau lagu pause, icon harus mute
musicBtn.innerText = isMusicPlaying ? '🔇' : '🔊'; if (bgMusic.paused) {
isMusicPlaying = !isMusicPlaying; musicBtn.textContent = '🔇';
} else {
musicBtn.textContent = '🔊';
}
musicBtn.addEventListener('click', () => {
if (bgMusic.paused) {
// Kalau lagi mati, nyalakan
bgMusic.play().then(() => {
musicBtn.textContent = '🔊';
}).catch((e) => {
console.log("Browser memblokir audio:", e);
});
} else {
// Kalau lagi nyala, matikan
bgMusic.pause();
musicBtn.textContent = '🔇';
}
});
} else {
console.error("Element Audio/Tombol tidak ditemukan!");
}
// --- 2. LOGOUT ---
const logoutBtn = document.getElementById("logoutBtn");
if (logoutBtn) {
logoutBtn.addEventListener("click", () => {
window.location.href = "logout.php";
});
}
// --- 3. LEADERBOARD ---
const leaderboardBtn = document.getElementById("leaderboardBtn");
if (leaderboardBtn) {
leaderboardBtn.addEventListener("click", () => {
window.location.href = "Leaderboard.php";
});
}
}); });
// NAVIGATION (Ini yang penting, sudah .php) // --- FUNGSI GLOBAL (Bisa dipanggil dari onclick HTML) ---
// NAVIGATION
function selectStage(stage) { function selectStage(stage) {
console.log("Pindah ke stage:", stage); // Debugging
window.location.href = "gameboard-" + stage + ".php"; window.location.href = "gameboard-" + stage + ".php";
} }
// OVERLAY CREDITS // OVERLAY CREDITS
function openCredits() { function openCredits() {
document.getElementById('creditsOverlay').style.display = 'flex'; const overlay = document.getElementById('creditsOverlay');
if(overlay) overlay.style.display = 'flex';
} }
function closeCredits() { function closeCredits() {
document.getElementById('creditsOverlay').style.display = 'none'; const overlay = document.getElementById('creditsOverlay');
} if(overlay) overlay.style.display = 'none';
}
// LOGOUT
document.getElementById("logoutBtn").addEventListener("click", () => {
window.location.href = "logout.php";
});
// LEADERBOARD (Cukup ditulis satu kali saja)
document.getElementById("leaderboardBtn").addEventListener("click", () => {
window.location.href = "Leaderboard.php";
});

61
audioManager.js
View File

@ -1,61 +0,0 @@
const AudioManager = {
isMuted: false,
sounds: {
bg: document.getElementById("bgMusic"),
click: document.getElementById("sfxClick"),
match: document.getElementById("sfxMatch"),
wrong: document.getElementById("sfxWrong"),
countdown: document.getElementById("sfxCountdown"),
win: document.getElementById("sfxWin"),
lose: document.getElementById("sfxLose")
},
toggleBtn: document.getElementById("toggleMusic"),
init: function() {
if(this.toggleBtn) this.toggleBtn.textContent = "🔊";
if(this.toggleBtn) {
this.toggleBtn.onclick = (e) => {
e.stopPropagation();
this.toggleMute();
};
}
if (this.sounds.bg) {
this.sounds.bg.volume = 0.5;
this.sounds.bg.play().catch(() => {
console.log("Autoplay ditahan browser, menunggu interaksi user...");
});
}
const unlockAudio = () => {
if (!this.isMuted && this.sounds.bg && this.sounds.bg.paused) {
this.sounds.bg.play().catch(() => {});
}
document.removeEventListener('click', unlockAudio);
};
document.addEventListener('click', unlockAudio);
},
toggleMute: function() {
this.isMuted = !this.isMuted;
if (this.isMuted) {
if(this.sounds.bg) this.sounds.bg.pause();
if(this.toggleBtn) this.toggleBtn.textContent = "🔇";
} else {
if(this.sounds.bg) this.sounds.bg.play().catch(() => {});
if(this.toggleBtn) this.toggleBtn.textContent = "🔊";
}
},
playSFX: function(name) {
if (this.isMuted) return;
const audio = this.sounds[name];
if (audio) {
audio.currentTime = 0;
audio.play().catch(() => {});
if (this.sounds.bg && this.sounds.bg.paused) {
this.sounds.bg.play().catch(() => {});
}
}
}
};
AudioManager.init();

3
gameboard-easy.php
View File

@ -62,7 +62,6 @@ $user = $_SESSION['user'];
</div> </div>
<audio id="bgMusic" src="audio/bg-music.mp3" loop></audio> <audio id="bgMusic" src="audio/bg-music.mp3" loop></audio>
<script src="audioManager.js"></script> <script src="assets/gameboard-easy.js"></script>
<script src="assets/gameboard-hard.js"></script>
</body> </body>
</html> </html>

2
gameboard-hard.php
View File

@ -58,8 +58,6 @@ exit();
</div> </div>
</div> </div>
<audio id="bgMusic" src="audio/bg-music.mp3" loop></audio>
<script src="audioManager.js"></script>
<script src="assets/gameboard-hard.js"></script> <script src="assets/gameboard-hard.js"></script>
</body> </body>

4
gameboard-medium.php
View File

@ -58,8 +58,6 @@ exit();
</div> </div>
</div> </div>
<audio id="bgMusic" src="audio/bg-music.mp3" loop></audio> <script src="assets/gameboard-medium.js"></script>
<script src="audioManager.js"></script>
<script src="assets/gameboard-hard.js"></script>
</body> </body>
</html> </html>

2
mainboard.php
View File

@ -46,7 +46,7 @@ $roleIcon = ($roleRaw === 'admin') ? '👑' : '🎮';
<div class="actions"> <div class="actions">
<button class="btn blue" onclick="openCredits()">ℹ️ Credit</button> <button class="btn blue" onclick="openCredits()">ℹ️ Credit</button>
<button id="leaderboardBtn" onclick="window.location.href='Leaderboard.php'" class="btn gold">🏆 Leaderboard</button> <button id="leaderboardBtn" onclick="window.location.href='Leaderboard.php'" class="btn gold">🏆 Leaderboard</button>
<button id="logoutBtn" class="btn gray" onclick="window.location.href='logout.php'">🚪 Logout</button> <button id="logoutBtn" class="btn gray" onclick="window.location.href='logout.php'" >🚪 Logout</button>
</div> </div>
</header> </header>