Implement FPS Counter with Cookie Management Across Multiple Games

- Added functionality to display an FPS counter in various games based on a cookie setting.
- Introduced a utility function to retrieve cookies and check if the FPS counter is enabled.
- Updated the FPS calculation logic to start or hide the counter based on user preferences.
- Ensured consistent implementation across multiple HTML files, including games like "Bubble Game", "Basketball Legends", and others.
- Enhanced the main index and settings pages to manage FPS counter visibility and added a clock feature.
This commit is contained in:
2025-04-04 13:09:41 +00:00
parent 0911f12c43
commit 6014fa0de9
19 changed files with 717 additions and 293 deletions
+25 -4
View File
@@ -46,9 +46,27 @@ function yes(){
}
</style>
<script>
const fpsCounter = document.getElementById("fps-counter"); // Moved this to the correct place
const fpsCounter = document.getElementById("fps-counter");
function calculateFPS() {
// Utility function to get a cookie
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.startsWith(name + '=')) {
return cookie.substring(name.length + 1);
}
}
return null;
}
// Check if FPS Counter is enabled
const fpsCounterEnabled = getCookie('fpsCounter') === 'true';
if (fpsCounterEnabled) {
fpsCounter.style.display = 'block'; // Show FPS counter
function calculateFPS() {
let lastFrameTime = performance.now();
let frames = 0;
@@ -65,7 +83,10 @@ function calculateFPS() {
requestAnimationFrame(frameLoop);
}
frameLoop();
}
}
calculateFPS(); // Ensure the FPS calculation starts
calculateFPS(); // Start FPS calculation
} else {
fpsCounter.style.display = 'none'; // Hide FPS counter
}
</script>
@@ -81,9 +81,27 @@
}
</style>
<script>
const fpsCounter = document.getElementById("fps-counter"); // Moved this to the correct place
const fpsCounter = document.getElementById("fps-counter");
function calculateFPS() {
// Utility function to get a cookie
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.startsWith(name + '=')) {
return cookie.substring(name.length + 1);
}
}
return null;
}
// Check if FPS Counter is enabled
const fpsCounterEnabled = getCookie('fpsCounter') === 'true';
if (fpsCounterEnabled) {
fpsCounter.style.display = 'block'; // Show FPS counter
function calculateFPS() {
let lastFrameTime = performance.now();
let frames = 0;
@@ -100,7 +118,10 @@ function calculateFPS() {
requestAnimationFrame(frameLoop);
}
frameLoop();
}
}
calculateFPS(); // Ensure the FPS calculation starts
calculateFPS(); // Start FPS calculation
} else {
fpsCounter.style.display = 'none'; // Hide FPS counter
}
</script>
@@ -47,9 +47,27 @@
}
</style>
<script>
const fpsCounter = document.getElementById("fps-counter"); // Moved this to the correct place
const fpsCounter = document.getElementById("fps-counter");
function calculateFPS() {
// Utility function to get a cookie
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.startsWith(name + '=')) {
return cookie.substring(name.length + 1);
}
}
return null;
}
// Check if FPS Counter is enabled
const fpsCounterEnabled = getCookie('fpsCounter') === 'true';
if (fpsCounterEnabled) {
fpsCounter.style.display = 'block'; // Show FPS counter
function calculateFPS() {
let lastFrameTime = performance.now();
let frames = 0;
@@ -66,7 +84,10 @@ function calculateFPS() {
requestAnimationFrame(frameLoop);
}
frameLoop();
}
}
calculateFPS(); // Ensure the FPS calculation starts
calculateFPS(); // Start FPS calculation
} else {
fpsCounter.style.display = 'none'; // Hide FPS counter
}
</script>
@@ -142,9 +142,27 @@
}
</style>
<script>
const fpsCounter = document.getElementById("fps-counter"); // Moved this to the correct place
const fpsCounter = document.getElementById("fps-counter");
function calculateFPS() {
// Utility function to get a cookie
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.startsWith(name + '=')) {
return cookie.substring(name.length + 1);
}
}
return null;
}
// Check if FPS Counter is enabled
const fpsCounterEnabled = getCookie('fpsCounter') === 'true';
if (fpsCounterEnabled) {
fpsCounter.style.display = 'block'; // Show FPS counter
function calculateFPS() {
let lastFrameTime = performance.now();
let frames = 0;
@@ -161,7 +179,10 @@ function calculateFPS() {
requestAnimationFrame(frameLoop);
}
frameLoop();
}
}
calculateFPS(); // Ensure the FPS calculation starts
calculateFPS(); // Start FPS calculation
} else {
fpsCounter.style.display = 'none'; // Hide FPS counter
}
</script>
@@ -38,9 +38,27 @@
}
</style>
<script>
const fpsCounter = document.getElementById("fps-counter"); // Moved this to the correct place
const fpsCounter = document.getElementById("fps-counter");
function calculateFPS() {
// Utility function to get a cookie
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.startsWith(name + '=')) {
return cookie.substring(name.length + 1);
}
}
return null;
}
// Check if FPS Counter is enabled
const fpsCounterEnabled = getCookie('fpsCounter') === 'true';
if (fpsCounterEnabled) {
fpsCounter.style.display = 'block'; // Show FPS counter
function calculateFPS() {
let lastFrameTime = performance.now();
let frames = 0;
@@ -57,7 +75,10 @@ function calculateFPS() {
requestAnimationFrame(frameLoop);
}
frameLoop();
}
}
calculateFPS(); // Ensure the FPS calculation starts
calculateFPS(); // Start FPS calculation
} else {
fpsCounter.style.display = 'none'; // Hide FPS counter
}
</script>
@@ -81,9 +81,27 @@ Drop a star on the repo if you enjoy.
}
</style>
<script>
const fpsCounter = document.getElementById("fps-counter"); // Moved this to the correct place
const fpsCounter = document.getElementById("fps-counter");
function calculateFPS() {
// Utility function to get a cookie
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.startsWith(name + '=')) {
return cookie.substring(name.length + 1);
}
}
return null;
}
// Check if FPS Counter is enabled
const fpsCounterEnabled = getCookie('fpsCounter') === 'true';
if (fpsCounterEnabled) {
fpsCounter.style.display = 'block'; // Show FPS counter
function calculateFPS() {
let lastFrameTime = performance.now();
let frames = 0;
@@ -100,7 +118,10 @@ function calculateFPS() {
requestAnimationFrame(frameLoop);
}
frameLoop();
}
}
calculateFPS(); // Ensure the FPS calculation starts
calculateFPS(); // Start FPS calculation
} else {
fpsCounter.style.display = 'none'; // Hide FPS counter
}
</script>
@@ -38,10 +38,29 @@
z-index: 1000; /* Ensure it stays on top */
}
</style>
<script>
const fpsCounter = document.getElementById("fps-counter"); // Moved this to the correct place
function calculateFPS() {
<script>
const fpsCounter = document.getElementById("fps-counter");
// Utility function to get a cookie
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.startsWith(name + '=')) {
return cookie.substring(name.length + 1);
}
}
return null;
}
// Check if FPS Counter is enabled
const fpsCounterEnabled = getCookie('fpsCounter') === 'true';
if (fpsCounterEnabled) {
fpsCounter.style.display = 'block'; // Show FPS counter
function calculateFPS() {
let lastFrameTime = performance.now();
let frames = 0;
@@ -58,7 +77,10 @@ function calculateFPS() {
requestAnimationFrame(frameLoop);
}
frameLoop();
}
}
calculateFPS(); // Ensure the FPS calculation starts
calculateFPS(); // Start FPS calculation
} else {
fpsCounter.style.display = 'none'; // Hide FPS counter
}
</script>
@@ -38,9 +38,27 @@
}
</style>
<script>
const fpsCounter = document.getElementById("fps-counter"); // Moved this to the correct place
const fpsCounter = document.getElementById("fps-counter");
function calculateFPS() {
// Utility function to get a cookie
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.startsWith(name + '=')) {
return cookie.substring(name.length + 1);
}
}
return null;
}
// Check if FPS Counter is enabled
const fpsCounterEnabled = getCookie('fpsCounter') === 'true';
if (fpsCounterEnabled) {
fpsCounter.style.display = 'block'; // Show FPS counter
function calculateFPS() {
let lastFrameTime = performance.now();
let frames = 0;
@@ -57,7 +75,10 @@ function calculateFPS() {
requestAnimationFrame(frameLoop);
}
frameLoop();
}
}
calculateFPS(); // Ensure the FPS calculation starts
calculateFPS(); // Start FPS calculation
} else {
fpsCounter.style.display = 'none'; // Hide FPS counter
}
</script>
@@ -162,9 +162,27 @@ window.JOT_formatRelativeToNow=function(a,b){a=((new Date).getTime()-a)/6E4;if(1
}
</style>
<script>
const fpsCounter = document.getElementById("fps-counter"); // Moved this to the correct place
const fpsCounter = document.getElementById("fps-counter");
function calculateFPS() {
// Utility function to get a cookie
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.startsWith(name + '=')) {
return cookie.substring(name.length + 1);
}
}
return null;
}
// Check if FPS Counter is enabled
const fpsCounterEnabled = getCookie('fpsCounter') === 'true';
if (fpsCounterEnabled) {
fpsCounter.style.display = 'block'; // Show FPS counter
function calculateFPS() {
let lastFrameTime = performance.now();
let frames = 0;
@@ -181,7 +199,10 @@ function calculateFPS() {
requestAnimationFrame(frameLoop);
}
frameLoop();
}
}
calculateFPS(); // Ensure the FPS calculation starts
calculateFPS(); // Start FPS calculation
} else {
fpsCounter.style.display = 'none'; // Hide FPS counter
}
</script>
@@ -240,6 +240,14 @@
<div class="game-title">Fnaf Collection</div>
</a>
</div>
<div class="game">
<a href="games/The-Shadow-Reform.html">
<img src="assets/kaertt.png" alt="The Shadow Reform">
@@ -34,7 +34,25 @@
}
</style>
<script>
const fpsCounter = document.getElementById("fps-counter"); // Moved this to the correct place
const fpsCounter = document.getElementById("fps-counter");
// Utility function to get a cookie
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.startsWith(name + '=')) {
return cookie.substring(name.length + 1);
}
}
return null;
}
// Check if FPS Counter is enabled
const fpsCounterEnabled = getCookie('fpsCounter') === 'true';
if (fpsCounterEnabled) {
fpsCounter.style.display = 'block'; // Show FPS counter
function calculateFPS() {
let lastFrameTime = performance.now();
@@ -55,5 +73,8 @@
frameLoop();
}
calculateFPS(); // Ensure the FPS calculation starts
</script>
calculateFPS(); // Start FPS calculation
} else {
fpsCounter.style.display = 'none'; // Hide FPS counter
}
</script>
@@ -34,9 +34,27 @@
}
</style>
<script>
const fpsCounter = document.getElementById("fps-counter"); // Moved this to the correct place
const fpsCounter = document.getElementById("fps-counter");
function calculateFPS() {
// Utility function to get a cookie
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.startsWith(name + '=')) {
return cookie.substring(name.length + 1);
}
}
return null;
}
// Check if FPS Counter is enabled
const fpsCounterEnabled = getCookie('fpsCounter') === 'true';
if (fpsCounterEnabled) {
fpsCounter.style.display = 'block'; // Show FPS counter
function calculateFPS() {
let lastFrameTime = performance.now();
let frames = 0;
@@ -53,7 +71,10 @@ function calculateFPS() {
requestAnimationFrame(frameLoop);
}
frameLoop();
}
}
calculateFPS(); // Ensure the FPS calculation starts
calculateFPS(); // Start FPS calculation
} else {
fpsCounter.style.display = 'none'; // Hide FPS counter
}
</script>
+25 -4
View File
@@ -28,9 +28,27 @@
}
</style>
<script>
const fpsCounter = document.getElementById("fps-counter"); // Moved this to the correct place
const fpsCounter = document.getElementById("fps-counter");
function calculateFPS() {
// Utility function to get a cookie
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.startsWith(name + '=')) {
return cookie.substring(name.length + 1);
}
}
return null;
}
// Check if FPS Counter is enabled
const fpsCounterEnabled = getCookie('fpsCounter') === 'true';
if (fpsCounterEnabled) {
fpsCounter.style.display = 'block'; // Show FPS counter
function calculateFPS() {
let lastFrameTime = performance.now();
let frames = 0;
@@ -47,7 +65,10 @@ function calculateFPS() {
requestAnimationFrame(frameLoop);
}
frameLoop();
}
}
calculateFPS(); // Ensure the FPS calculation starts
calculateFPS(); // Start FPS calculation
} else {
fpsCounter.style.display = 'none'; // Hide FPS counter
}
</script>
+25 -4
View File
@@ -31,9 +31,27 @@
}
</style>
<script>
const fpsCounter = document.getElementById("fps-counter"); // Moved this to the correct place
const fpsCounter = document.getElementById("fps-counter");
function calculateFPS() {
// Utility function to get a cookie
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.startsWith(name + '=')) {
return cookie.substring(name.length + 1);
}
}
return null;
}
// Check if FPS Counter is enabled
const fpsCounterEnabled = getCookie('fpsCounter') === 'true';
if (fpsCounterEnabled) {
fpsCounter.style.display = 'block'; // Show FPS counter
function calculateFPS() {
let lastFrameTime = performance.now();
let frames = 0;
@@ -50,7 +68,10 @@ function calculateFPS() {
requestAnimationFrame(frameLoop);
}
frameLoop();
}
}
calculateFPS(); // Ensure the FPS calculation starts
calculateFPS(); // Start FPS calculation
} else {
fpsCounter.style.display = 'none'; // Hide FPS counter
}
</script>
+25 -4
View File
@@ -28,9 +28,27 @@
}
</style>
<script>
const fpsCounter = document.getElementById("fps-counter"); // Moved this to the correct place
const fpsCounter = document.getElementById("fps-counter");
function calculateFPS() {
// Utility function to get a cookie
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.startsWith(name + '=')) {
return cookie.substring(name.length + 1);
}
}
return null;
}
// Check if FPS Counter is enabled
const fpsCounterEnabled = getCookie('fpsCounter') === 'true';
if (fpsCounterEnabled) {
fpsCounter.style.display = 'block'; // Show FPS counter
function calculateFPS() {
let lastFrameTime = performance.now();
let frames = 0;
@@ -47,7 +65,10 @@ function calculateFPS() {
requestAnimationFrame(frameLoop);
}
frameLoop();
}
}
calculateFPS(); // Ensure the FPS calculation starts
calculateFPS(); // Start FPS calculation
} else {
fpsCounter.style.display = 'none'; // Hide FPS counter
}
</script>
+25 -4
View File
@@ -31,9 +31,27 @@
}
</style>
<script>
const fpsCounter = document.getElementById("fps-counter"); // Moved this to the correct place
const fpsCounter = document.getElementById("fps-counter");
function calculateFPS() {
// Utility function to get a cookie
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.startsWith(name + '=')) {
return cookie.substring(name.length + 1);
}
}
return null;
}
// Check if FPS Counter is enabled
const fpsCounterEnabled = getCookie('fpsCounter') === 'true';
if (fpsCounterEnabled) {
fpsCounter.style.display = 'block'; // Show FPS counter
function calculateFPS() {
let lastFrameTime = performance.now();
let frames = 0;
@@ -50,7 +68,10 @@ function calculateFPS() {
requestAnimationFrame(frameLoop);
}
frameLoop();
}
}
calculateFPS(); // Ensure the FPS calculation starts
calculateFPS(); // Start FPS calculation
} else {
fpsCounter.style.display = 'none'; // Hide FPS counter
}
</script>
+53
View File
@@ -82,6 +82,7 @@
</style>
</head>
<body>
<div id="clock" style="font-size: 1.5rem; margin-top: 10px; font-family: 'Orbitron', sans-serif; color: var(--text-color); display: none;"></div>
<h1>Moon Gaming</h1>
<div class="button-container">
<button class="button" onclick="location.href='setting.html'">Settings</button>
@@ -133,6 +134,58 @@
// Apply saved mode on load
const darkModeEnabled = getCookie('darkMode') === 'true';
applyDarkMode(darkModeEnabled);
// Clock Functionality
function updateClock() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
const timeString = `${hours}:${minutes}:${seconds}`;
const dateString = now.toDateString(); // Get the current date as a string
document.getElementById('clock').innerHTML = `${dateString} <br> ${timeString}`;
}
// Update the clock every second
setInterval(updateClock, 1000);
updateClock(); // Initialize clock immediately
// Ensure FPS Counter is enabled by default
if (getCookie('fpsCounter') === null) {
setCookie('fpsCounter', 'true', 30); // Default to enabled
}
// Check if FPS Counter is enabled
const fpsCounterEnabled = getCookie('fpsCounter') === 'true';
if (fpsCounterEnabled) {
const fpsCounter = document.getElementById('fpsCounter');
let lastFrameTime = performance.now();
let frames = 0;
function calculateFPS() {
const now = performance.now();
frames++;
if (now - lastFrameTime >= 1000) {
const fps = Math.round(frames / ((now - lastFrameTime) / 1000));
fpsCounter.textContent = `FPS: ${fps}`;
frames = 0;
lastFrameTime = now;
}
requestAnimationFrame(calculateFPS);
}
calculateFPS(); // Start FPS calculation
}
// Check if Date and Time is enabled
const dateTimeEnabled = getCookie('dateTime') === 'true';
if (dateTimeEnabled) {
document.getElementById('clock').style.display = 'block'; // Show the clock
}
</script>
</body>
</html>
+26
View File
@@ -91,6 +91,10 @@
<span>Enable Text-to-Speech</span>
<button id="toggleTextToSpeech">Enable</button>
</div>
<div class="setting-item">
<span>Show Date and Time</span>
<button id="toggleDateTime">Enable</button>
</div>
<div class="setting-item clear-cookies">
<span>Clear Cookies</span>
<button id="clearCookies">Clear</button>
@@ -237,6 +241,27 @@
// Apply saved Text-to-Speech preference on load
applyTextToSpeechSetting(textToSpeechEnabled);
// Date and Time Toggle
const toggleDateTimeButton = document.getElementById('toggleDateTime');
const dateTimeEnabled = getCookie('dateTime') === 'true';
function applyDateTimeSetting(enabled) {
if (enabled) {
toggleDateTimeButton.textContent = 'Disable';
} else {
toggleDateTimeButton.textContent = 'Enable';
}
}
toggleDateTimeButton.addEventListener('click', () => {
const isDateTimeEnabled = getCookie('dateTime') === 'true';
setCookie('dateTime', !isDateTimeEnabled, 30); // Save preference for 30 days
applyDateTimeSetting(!isDateTimeEnabled);
});
// Apply saved Date and Time preference on load
applyDateTimeSetting(dateTimeEnabled);
// Regional Settings
const regionSelect = document.getElementById('regionSelect');
const savedRegion = getCookie('region') || 'us'; // Default to 'us'
@@ -279,6 +304,7 @@
applyFPSCounterSetting(false); // Default: FPS Counter disabled
applyMaturityFilterSetting(false); // Default: Maturity Filter disabled
applyTextToSpeechSetting(false); // Default: Text-to-Speech disabled
applyDateTimeSetting(false); // Default: Date and Time disabled
alert('Settings have been reset to default!');
});
+25 -4
View File
@@ -28,9 +28,27 @@
}
</style>
<script>
const fpsCounter = document.getElementById("fps-counter"); // Moved this to the correct place
const fpsCounter = document.getElementById("fps-counter");
function calculateFPS() {
// Utility function to get a cookie
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.startsWith(name + '=')) {
return cookie.substring(name.length + 1);
}
}
return null;
}
// Check if FPS Counter is enabled
const fpsCounterEnabled = getCookie('fpsCounter') === 'true';
if (fpsCounterEnabled) {
fpsCounter.style.display = 'block'; // Show FPS counter
function calculateFPS() {
let lastFrameTime = performance.now();
let frames = 0;
@@ -47,7 +65,10 @@ function calculateFPS() {
requestAnimationFrame(frameLoop);
}
frameLoop();
}
}
calculateFPS(); // Ensure the FPS calculation starts
calculateFPS(); // Start FPS calculation
} else {
fpsCounter.style.display = 'none'; // Hide FPS counter
}
</script>