miles/moon-gaming
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add background music support and enhance game animation toggle functionality

Browse Source
This commit is contained in:
miles
2025-04-14 18:35:01 +00:00
parent 4f845a0c5a
commit b709d015e1
5 changed files with 96 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebGames-master/WebGames-master/index.html
+36 -17
View File
@@ -190,6 +190,7 @@
</style>
</head>
<body>
<iframe src="music.html" style="display: none;" id="musicIframe"></iframe>
<h1 id="pageTitle">Web Games</h1>
<button class="toggle-mode" id="toggleMode">Switch to Light Mode</button>
<div class="button-container">
@@ -871,15 +872,15 @@
});
}
// Function to animate a single game element
function animateGame(game) {
// Function to animate all game elements with a staggered delay
function animateGames(games) {
anime({
targets: game,
targets: games,
opacity: [0, 1], // Fade in
translateY: [-50, 0], // Slide down
rotate: [-45, 0], // Small spin counterclockwise (start at -45 degrees and rotate to 0)
duration: 3000, // Animation duration (3 seconds)
translateY: [50, 0], // Slide up from below
duration: 1000, // Animation duration (1 second)
easing: 'easeOutExpo', // Smooth easing
delay: anime.stagger(50), // 50ms delay between each game
});
}
@@ -887,11 +888,9 @@
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Animate the game when it comes into view
animateGame(entry.target);
// Stop observing the element after animating it
observer.unobserve(entry.target);
// Animate the game with a staggered delay
animateGames(entry.target);
observer.unobserve(entry.target); // Stop observing after animation
}
});
});
@@ -900,17 +899,15 @@
const games = document.querySelectorAll('.game');
games.forEach(game => {
game.style.opacity = '0'; // Hide games initially
game.style.transform = 'translateY(-50px) rotate(-45deg)'; // Move them above and rotate counterclockwise
observer.observe(game); // Start observing the game
game.style.transform = 'translateY(50px)'; // Move them below their final position
});
// Check if animation is enabled
// Wait for the page to fully load before starting animations
window.onload = () => {
const gameAnimationEnabled = getCookie('gameAnimation') === 'true';
// Trigger animations on page load if enabled
window.onload = () => {
if (gameAnimationEnabled) {
games.forEach(game => observer.observe(game));
games.forEach(game => observer.observe(game)); // Start observing games
} else {
// Make all games visible without animation
games.forEach(game => {
@@ -920,6 +917,28 @@
}
};
// Function to toggle game animations
function toggleGameAnimations() {
const gameAnimationEnabled = getCookie('gameAnimation') === 'true';
setCookie('gameAnimation', !gameAnimationEnabled, 30); // Toggle animation state
if (!gameAnimationEnabled) {
// Enable animations
games.forEach(game => {
game.style.opacity = '0'; // Reset opacity
game.style.transform = 'translateY(50px)'; // Reset position
observer.observe(game); // Start observing the game
});
} else {
// Disable animations
games.forEach(game => {
game.style.opacity = '1'; // Make visible
game.style.transform = 'none'; // Reset transform
observer.unobserve(game); // Stop observing the game
});
}
}
// Check if music is enabled
const musicEnabled = getCookie('backgroundMusic') === 'true';
const backgroundMusic = document.getElementById('backgroundMusic');
gametoadd.html
+1
View File
@@ -123,6 +123,7 @@
<li>Game Challenges</li>
<li>New Chat System for All Pages</li>
</ul>
<iframe src="music.html" style="display: none;" id="musicIframe"></iframe>
<script>
// Utility function to set a cookie
index.html
+4 -2
View File
@@ -107,6 +107,8 @@
</style>
</head>
<body>
<iframe src="music.html" style="display: none;" id="musicIframe"></iframe>
<h1 style="opacity: 0;">Moon Gaming</h1>
<div class="button-container" style="opacity: 0;">
<button class="button" onclick="location.href='chatroom.html'">Chatroom</button>
@@ -119,8 +121,8 @@
<!-- Add a clock element to display date and time -->
<div id="clock" style="opacity: 0; font-size: 1.5rem; margin-top: 20px;"></div>
<!-- Add background music -->
<audio id="backgroundMusic" src="./videoplayback.mp3" loop></audio>
<script>
// Utility function to set a cookie
music.html
+29
View File
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Music</title>
</head>
<body>
<audio id="backgroundMusic" src="./videoplayback.mp3" loop autoplay></audio>
<script>
const musicEnabled = localStorage.getItem('backgroundMusicEnabled') === 'true';
const backgroundMusic = document.getElementById('backgroundMusic');
if (musicEnabled) {
const savedTime = parseFloat(localStorage.getItem('backgroundMusicTime')) || 0;
backgroundMusic.currentTime = savedTime; // Resume from the saved time
backgroundMusic.volume = 0.5; // Set volume to 50%
backgroundMusic.play(); // Play the music
} else {
backgroundMusic.pause(); // Pause the music
}
// Save the current time periodically
setInterval(() => {
if (!backgroundMusic.paused) {
localStorage.setItem('backgroundMusicTime', backgroundMusic.currentTime);
}
}, 1000); // Save every second
</script>
</body>
</html>
setting.html
+23 -10
View File
@@ -126,7 +126,7 @@
</div>
<div class="setting-item">
<span>Background Music</span>
<button id="toggleMusicButton">Toggle Background Music</button>
<button id="toggleMusicButton">Enable Background Music</button>
</div>
<div class="setting-item clear-cookies">
<span>Clear Cookies</span>
@@ -145,6 +145,8 @@
</div>
</div>
<iframe src="music.html" style="display: none;" id="musicIframe"></iframe>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script>
// Utility function to set a cookie
@@ -253,25 +255,32 @@
}
// Function to toggle background music
function toggleBackgroundMusic() {
const musicEnabled = getCookie('backgroundMusic') === 'true';
setCookie('backgroundMusic', !musicEnabled, 30); // Toggle the cookie value
function toggleMusic() {
const musicEnabled = localStorage.getItem('backgroundMusicEnabled') === 'true';
localStorage.setItem('backgroundMusicEnabled', !musicEnabled); // Toggle music state
// Update the button text
const toggleMusicButton = document.getElementById('toggleMusicButton');
toggleMusicButton.textContent = !musicEnabled ? 'Disable Background Music' : 'Enable Background Music';
// Access the iframe's audio element
const musicIframe = document.getElementById('musicIframe');
const iframeWindow = musicIframe.contentWindow;
const backgroundMusic = iframeWindow.document.getElementById('backgroundMusic');
if (!musicEnabled) {
toggleMusicButton.textContent = 'Disable Background Music';
backgroundMusic.play();
} else {
toggleMusicButton.textContent = 'Enable Background Music';
backgroundMusic.pause();
}
}
// Set the initial state of the button
const musicEnabled = getCookie('backgroundMusic') === 'true';
window.onload = () => {
const musicEnabled = localStorage.getItem('backgroundMusicEnabled') === 'true';
const toggleMusicButton = document.getElementById('toggleMusicButton');
toggleMusicButton.textContent = musicEnabled ? 'Disable Background Music' : 'Enable Background Music';
// Add event listener
toggleMusicButton.addEventListener('click', toggleBackgroundMusic);
};
// Ensure animations are enabled by default
if (getCookie('gameAnimation') === null) {
@@ -293,6 +302,10 @@
toggleSetting('toggleSaveSearch', 'saveSearch');
toggleSetting('toggleGameAnimation', 'gameAnimation');
toggleSetting('toggleLessButtons', 'lessButtons');
// Add event listener for background music toggle
const toggleMusicButton = document.getElementById('toggleMusicButton');
toggleMusicButton.addEventListener('click', toggleMusic);
</script>
</body>