Custom menu with color-changing border and customizable background for Little Big Snake
目前為
// ==UserScript==
// @name Little Big Snake Custom Menu
// @namespace http://tampermonkey.net/
// @version 2024-08-17
// @description Custom menu with color-changing border and customizable background for Little Big Snake
// @author You
// @match https://littlebigsnake.com/*
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Verifica si estamos en la página de Little Big Snake
if (window.location.hostname !== 'littlebigsnake.com') {
return;
}
// Crear y diseñar el menú
const menu = document.createElement('div');
menu.id = 'custom-menu';
menu.style.position = 'fixed';
menu.style.top = '20px';
menu.style.left = '0'; // El menú comienza fuera de la pantalla
menu.style.width = '300px';
menu.style.height = '300px'; // Altura ajustada para que sea cuadrado
menu.style.backgroundColor = '#333'; // Color de fondo inicial
menu.style.color = '#fff';
menu.style.border = '5px solid #000'; // Ancho y color inicial del borde
menu.style.transition = 'transform 0.3s ease'; // Efecto de deslizamiento suave
menu.style.transform = 'translateX(-100%)'; // El menú comienza fuera de la pantalla
menu.style.zIndex = '9999';
menu.style.overflow = 'auto';
menu.style.padding = '20px';
menu.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
menu.style.display = 'flex';
menu.style.flexDirection = 'column';
menu.style.borderRadius = '10px'; // Bordes redondeados para un aspecto más agradable
// Agregar una sección para las opciones
const optionsSection = document.createElement('div');
optionsSection.innerHTML = `
<div class="option">
<span>Enable Ad Blocker:</span>
<button class="toggle-button" id="ad-blocker-toggle-yes">Yes</button>
<button class="toggle-button" id="ad-blocker-toggle-no">No</button>
</div>
<br />
<div class="option">
<span>Disimular el Bloqueador de Anuncios:</span>
<button class="toggle-button" id="hide-ad-blocker-toggle-yes">Yes</button>
<button class="toggle-button" id="hide-ad-blocker-toggle-no">No</button>
</div>
<br />
<div class="option">
<span>Activate Ad Blocker:</span>
<button class="toggle-button" id="activate-ad-blocker-no">No</button>
<button class="toggle-button" id="activate-ad-blocker-yes">Yes</button>
</div>
<br />
<div class="option">
<span>Reduce Lag:</span>
<button class="toggle-button" id="reduce-lag-no">No</button>
<button class="toggle-button" id="reduce-lag-yes">Yes</button>
</div>
<br />
<div class="option">
<span>Enable Color Lights:</span>
<button class="toggle-button" id="color-lights-toggle-yes">Yes</button>
<button class="toggle-button" id="color-lights-toggle-no">No</button>
</div>
`;
menu.appendChild(optionsSection);
// Agregar opciones de cambio de color
const colorOptions = document.createElement('div');
colorOptions.innerHTML = `
<label>Select Menu Background Color:
<input type="color" id="menu-color-picker" value="#333" />
</label>
`;
menu.appendChild(colorOptions);
document.body.appendChild(menu);
// Crear y diseñar el botón de alternar menú
const menuToggle = document.createElement('button');
menuToggle.innerText = 'Toggle Menu';
menuToggle.style.position = 'fixed';
menuToggle.style.top = '20px';
menuToggle.style.left = '340px'; // Posicionar el botón a la derecha del menú
menuToggle.style.zIndex = '10000';
menuToggle.style.padding = '10px';
menuToggle.style.borderRadius = '5px';
menuToggle.style.backgroundColor = '#4CAF50'; // Color verde para el botón
menuToggle.style.color = '#fff';
menuToggle.style.border = 'none';
menuToggle.style.cursor = 'pointer';
// Alternar la visibilidad del menú
menuToggle.onclick = () => {
if (menu.style.transform === 'translateX(0)') {
menu.style.transform = 'translateX(-100%)'; // Deslizar el menú hacia afuera
} else {
menu.style.transform = 'translateX(0)'; // Deslizar el menú hacia adentro
}
};
document.body.appendChild(menuToggle);
// Función para actualizar los estilos de los botones de alternancia
function updateToggleButtonStyles(buttonId) {
const buttons = document.querySelectorAll('.toggle-button');
buttons.forEach(button => {
if (button.id === buttonId) {
button.style.backgroundColor = '#4CAF50'; // Verde para activo
button.style.color = '#fff';
} else {
button.style.backgroundColor = '#f44336'; // Rojo para inactivo
button.style.color = '#fff';
}
});
}
// Manejar la alternancia del bloqueador de anuncios
const adBlockerToggleYes = document.getElementById('ad-blocker-toggle-yes');
const adBlockerToggleNo = document.getElementById('ad-blocker-toggle-no');
adBlockerToggleYes.onclick = () => {
updateToggleButtonStyles('ad-blocker-toggle-yes');
console.log('Ad blocker enabled');
// Lógica de bloqueo de anuncios aquí
document.querySelectorAll('.ad-class').forEach(el => el.style.display = 'none');
};
adBlockerToggleNo.onclick = () => {
updateToggleButtonStyles('ad-blocker-toggle-no');
console.log('Ad blocker disabled');
// Quitar lógica de bloqueo de anuncios
document.querySelectorAll('.ad-class').forEach(el => el.style.display = '');
};
// Manejar la ocultación del bloqueador de anuncios
const hideAdBlockerToggleYes = document.getElementById('hide-ad-blocker-toggle-yes');
const hideAdBlockerToggleNo = document.getElementById('hide-ad-blocker-toggle-no');
hideAdBlockerToggleYes.onclick = () => {
updateToggleButtonStyles('hide-ad-blocker-toggle-yes');
menu.style.transform = 'translateX(-100%)'; // Ocultar el menú
};
hideAdBlockerToggleNo.onclick = () => {
updateToggleButtonStyles('hide-ad-blocker-toggle-no');
menu.style.transform = 'translateX(0)'; // Mostrar el menú
};
// Manejar la activación del bloqueador de anuncios
const activateAdBlockerYes = document.getElementById('activate-ad-blocker-yes');
const activateAdBlockerNo = document.getElementById('activate-ad-blocker-no');
activateAdBlockerYes.onclick = () => {
updateToggleButtonStyles('activate-ad-blocker-yes');
console.log('Ad blocker deactivated');
// Quitar lógica de bloqueo de anuncios
document.querySelectorAll('.ad-class').forEach(el => el.style.display = '');
};
activateAdBlockerNo.onclick = () => {
updateToggleButtonStyles('activate-ad-blocker-no');
console.log('Ad blocker activated');
// Lógica de bloqueo de anuncios aquí
document.querySelectorAll('.ad-class').forEach(el => el.style.display = 'none');
};
// Manejar la reducción de lag
const reduceLagYes = document.getElementById('reduce-lag-yes');
const reduceLagNo = document.getElementById('reduce-lag-no');
reduceLagYes.onclick = () => {
updateToggleButtonStyles('reduce-lag-yes');
console.log('Reducing lag');
// Agregar lógica para reducir el lag aquí
};
reduceLagNo.onclick = () => {
updateToggleButtonStyles('reduce-lag-no');
console.log('Not reducing lag');
// Quitar lógica de reducción de lag
};
// Manejar el efecto de luces de colores en el borde
const colorLightsToggleYes = document.getElementById('color-lights-toggle-yes');
const colorLightsToggleNo = document.getElementById('color-lights-toggle-no');
colorLightsToggleYes.onclick = () => {
updateToggleButtonStyles('color-lights-toggle-yes');
startColorLightsAnimation();
};
colorLightsToggleNo.onclick = () => {
updateToggleButtonStyles('color-lights-toggle-no');
stopColorLightsAnimation();
};
// Manejar el cambio de color de fondo del menú
const colorPicker = document.getElementById('menu-color-picker');
colorPicker.addEventListener('input', function() {
menu.style.backgroundColor = this.value;
});
let animationInterval;
function startColorLightsAnimation() {
let colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF'];
let i = 0;
animationInterval = setInterval(() => {
menu.style.borderColor = colors[i];
i = (i + 1) % colors.length;
}, 500); // Cambio de color del borde cada 500 milisegundos
}
function stopColorLightsAnimation() {
clearInterval(animationInterval);
menu.style.borderColor = '#000'; // Restablecer el color del borde
}
})();
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址