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

benerin mainboard

Browse Source
This commit is contained in:
Nathan 2025-12-18 23:32:26 +07:00
parent bd6189c1ac
commit 4f9449c90d
8 changed files with 37 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
assets/gameboard-easy.js
View File

@ -1,44 +1,3 @@
// --- 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,42 +1,3 @@
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",

38
assets/gameboard-medium.js
View File

@ -1,42 +1,4 @@
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 = 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",

46
audioManager.js
View File

@ -10,44 +10,50 @@ const AudioManager = {
lose: document.getElementById("sfxLose") lose: document.getElementById("sfxLose")
}, },
toggleBtn: document.getElementById("toggleMusic"), toggleBtn: document.getElementById("toggleMusic"),
init: function() { init: function() {
this.toggleBtn.textContent = "🔊"; if(this.toggleBtn) this.toggleBtn.textContent = "🔊";
this.toggleBtn.onclick = (e) => { if(this.toggleBtn) {
e.stopPropagation(); this.toggleBtn.onclick = (e) => {
this.toggleMute(); e.stopPropagation();
}; this.toggleMute();
};
}
if (this.sounds.bg) { if (this.sounds.bg) {
this.sounds.bg.volume = 0.5; this.sounds.bg.volume = 0.5;
this.playMusic(); 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() { toggleMute: function() {
this.isMuted = !this.isMuted; this.isMuted = !this.isMuted;
if (this.isMuted) { if (this.isMuted) {
if(this.sounds.bg) this.sounds.bg.pause(); if(this.sounds.bg) this.sounds.bg.pause();
this.toggleBtn.textContent = "🔇"; if(this.toggleBtn) this.toggleBtn.textContent = "🔇";
} else { } else {
this.playMusic(); if(this.sounds.bg) this.sounds.bg.play().catch(() => {});
this.toggleBtn.textContent = "🔊"; if(this.toggleBtn) this.toggleBtn.textContent = "🔊";
} }
}, },
playMusic: function() { playSFX: function(name) {
if (!this.isMuted && this.sounds.bg) { if (this.isMuted) return;
this.sounds.bg.play().catch(e => console.log("Autoplay waiting for interaction..."));
}
},
playSFX: function(type) { const audio = this.sounds[name];
if (this.isMuted) return;
const audio = this.sounds[type];
if (audio) { if (audio) {
audio.currentTime = 0; audio.currentTime = 0;
audio.play().catch(() => {}); audio.play().catch(() => {});
if (this.sounds.bg && this.sounds.bg.paused) { if (this.sounds.bg && this.sounds.bg.paused) {
this.playMusic(); this.sounds.bg.play().catch(() => {});
} }
} }
} }

4
gameboard-easy.php
View File

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

3
gameboard-hard.php
View File

@ -58,6 +58,9 @@ 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>
</html> </html>

4
gameboard-medium.php
View File

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

4
mainboard.php
View File

@ -45,8 +45,8 @@ $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" 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">🚪 Logout</button> <button id="logoutBtn" class="btn gray" onclick="window.location.href='logout.php'">🚪 Logout</button>
</div> </div>
</header> </header>