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