添加帶有 MineCrafter 字體的 RGB 歡迎畫面和 FPS 計數器
当前为
// ==UserScript==
// @name youtube RGB 歡迎畫面，帶有 FPS 欄和 MineCrafter 字體
// @namespace http://tampermonkey.net/
// @version 1.1
// @description 添加帶有 MineCrafter 字體的 RGB 歡迎畫面和 FPS 計數器
// @author HUANG WEI-LUN HUANG WEI-LUN
// @match https://www.youtube.com/
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Preload fonts before showing the welcome screen
const fontStyle = document.createElement('style');
fontStyle.textContent = `
@font-face {
font-family: 'MineCrafter';
src: url('https://dl.dafont.com/dl/?f=minecraft') format('truetype');
font-weight: normal;
font-style: normal;
font-display: block;
}
`;
document.head.appendChild(fontStyle);
// Add backup font source
const backupFontStyle = document.createElement('style');
backupFontStyle.textContent = `
@font-face {
font-family: 'MineCrafter';
src: url('https://cdn.jsdelivr.net/gh/South-Paw/typeface-minecraft@master/font/minecraft.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: block;
}
`;
document.head.appendChild(backupFontStyle);
// Create RGB animations
const rgbAnimation = document.createElement('style');
rgbAnimation.textContent = `
@keyframes rgbText {
0% { color: #ff0000; }
16% { color: #ff8000; }
33% { color: #ffff00; }
50% { color: #00ff00; }
66% { color: #00ffff; }
83% { color: #0000ff; }
100% { color: #ff0000; }
}
@keyframes rgbBorder {
0% { border-color: #ff0000; }
16% { border-color: #ff8000; }
33% { border-color: #ffff00; }
50% { border-color: #00ff00; }
66% { border-color: #00ffff; }
83% { border-color: #0000ff; }
100% { border-color: #ff0000; }
}
.draggable {
cursor: move;
user-select: none;
}
`;
document.head.appendChild(rgbAnimation);
// Wait for fonts to load before displaying welcome screen
document.fonts.ready.then(() => {
// Create welcome screen
const welcomeScreen = document.createElement('div');
welcomeScreen.id = 'welcome-screen';
welcomeScreen.style.position = 'fixed';
welcomeScreen.style.top = '0';
welcomeScreen.style.left = '0';
welcomeScreen.style.width = '100%';
welcomeScreen.style.height = '100%';
welcomeScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
welcomeScreen.style.display = 'flex';
welcomeScreen.style.flexDirection = 'column';
welcomeScreen.style.justifyContent = 'center';
welcomeScreen.style.alignItems = 'center';
welcomeScreen.style.zIndex = '9999';
welcomeScreen.style.boxSizing = 'border-box';
welcomeScreen.style.border = '20px solid #ff0000';
welcomeScreen.style.animation = 'rgbBorder 5s linear infinite';
welcomeScreen.style.opacity = '0'; // Start invisible
// Create welcome text with MineCrafter font
const welcomeText = document.createElement('h1');
welcomeText.textContent = 'WELCOME TO Youtube';
welcomeText.style.fontFamily = "'MineCrafter', sans-serif";
welcomeText.style.fontSize = '48px';
welcomeText.style.letterSpacing = '2px';
welcomeText.style.color = '#ffffff';
welcomeText.style.textAlign = 'center';
welcomeText.style.margin = '20px';
welcomeText.style.textShadow = '3px 3px 0 #3F3F3F, 6px 6px 0 #000000';
welcomeText.style.animation = 'rgbText 5s linear infinite';
// Create loading text
const loadingText = document.createElement('p');
loadingText.textContent = 'Loading...';
loadingText.style.fontFamily = "'MineCrafter', sans-serif";
loadingText.style.fontSize = '24px';
loadingText.style.color = '#ffffff';
loadingText.style.marginTop = '10px';
loadingText.style.textShadow = '2px 2px 0 #3F3F3F, 4px 4px 0 #000000';
// Add elements to welcome screen
welcomeScreen.appendChild(welcomeText);
welcomeScreen.appendChild(loadingText);
document.body.appendChild(welcomeScreen);
// Show everything at once with a fade-in effect
requestAnimationFrame(() => {
welcomeScreen.style.transition = 'opacity 0.3s ease-in';
welcomeScreen.style.opacity = '1';
});
// Hide welcome screen after 3 seconds
setTimeout(() => {
welcomeScreen.style.opacity = '0';
welcomeScreen.style.transition = 'opacity 1s ease-in-out';
setTimeout(() => {
welcomeScreen.style.display = 'none';
}, 1000);
}, 3000);
});
// Create FPS counter - with RGB border, green text, and larger size
const fpsCounter = document.createElement('div');
fpsCounter.id = 'fps-counter';
fpsCounter.className = 'draggable';
fpsCounter.style.position = 'fixed';
fpsCounter.style.top = '10px';
fpsCounter.style.left = '10px';
fpsCounter.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
fpsCounter.style.color = '#00ff00'; // Green text
fpsCounter.style.padding = '10px 15px'; // Larger padding
fpsCounter.style.borderRadius = '5px';
fpsCounter.style.fontSize = '18px'; // Larger font
fpsCounter.style.zIndex = '1000';
fpsCounter.style.border = '2px solid #ff0000'; // Initial border color
fpsCounter.style.animation = 'rgbBorder 5s linear infinite';
fpsCounter.style.boxShadow = '0 2px 5px rgba(0,0,0,0.3)';
fpsCounter.textContent = 'FPS: 0';
fpsCounter.style.fontWeight = 'bold';
document.body.appendChild(fpsCounter);
// Make FPS counter draggable
makeDraggable(fpsCounter);
// FPS calculation
let frameCount = 0;
let fps = 0;
let lastTime = performance.now();
function updateFPS() {
frameCount++;
const currentTime = performance.now();
if (currentTime - lastTime >= 1000) {
fps = Math.round(frameCount * 1000 / (currentTime - lastTime));
frameCount = 0;
lastTime = currentTime;
fpsCounter.textContent = `FPS: ${fps}`;
}
requestAnimationFrame(updateFPS);
}
requestAnimationFrame(updateFPS);
// Function to make an element draggable
function makeDraggable(element) {
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
let isDragging = false;
// Mouse events
element.addEventListener('mousedown', dragMouseDown);
// Touch events
element.addEventListener('touchstart', dragTouchStart, { passive: false });
function dragMouseDown(e) {
e.preventDefault();
// Get the mouse cursor position at startup
pos3 = e.clientX;
pos4 = e.clientY;
isDragging = true;
document.addEventListener('mouseup', closeDragElement);
document.addEventListener('mousemove', elementDrag);
}
function dragTouchStart(e) {
e.preventDefault();
// Get the touch position at startup
pos3 = e.touches[0].clientX;
pos4 = e.touches[0].clientY;
isDragging = true;
document.addEventListener('touchend', closeDragElement);
document.addEventListener('touchcancel', closeDragElement);
document.addEventListener('touchmove', elementTouchDrag, { passive: false });
}
function elementDrag(e) {
if (!isDragging) return;
e.preventDefault();
// Calculate the new cursor position
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// Set the element's new position
updateElementPosition();
}
function elementTouchDrag(e) {
if (!isDragging) return;
e.preventDefault();
// Calculate the new touch position
pos1 = pos3 - e.touches[0].clientX;
pos2 = pos4 - e.touches[0].clientY;
pos3 = e.touches[0].clientX;
pos4 = e.touches[0].clientY;
// Set the element's new position
updateElementPosition();
}
function updateElementPosition() {
// Calculate new position while keeping element within viewport bounds
let newTop = (element.offsetTop - pos2);
let newLeft = (element.offsetLeft - pos1);
// Constrain to viewport
newTop = Math.max(0, Math.min(window.innerHeight - element.offsetHeight, newTop));
newLeft = Math.max(0, Math.min(window.innerWidth - element.offsetWidth, newLeft));
element.style.top = newTop + "px";
element.style.left = newLeft + "px";
}
function closeDragElement() {
isDragging = false;
// Stop moving when mouse button or touch is released
document.removeEventListener('mouseup', closeDragElement);
document.removeEventListener('mousemove', elementDrag);
document.removeEventListener('touchend', closeDragElement);
document.removeEventListener('touchcancel', closeDragElement);
document.removeEventListener('touchmove', elementTouchDrag);
}
}
// Fallback if fonts.ready doesn't work (for older browsers)
setTimeout(() => {
if (!document.getElementById('welcome-screen') ||
document.getElementById('welcome-screen').style.opacity === '0') {
// Force show the welcome screen if it hasn't appeared yet
const welcomeScreen = document.getElementById('welcome-screen');
if (welcomeScreen) {
welcomeScreen.style.opacity = '1';
// And set the hide timer
setTimeout(() => {
welcomeScreen.style.opacity = '0';
welcomeScreen.style.transition = 'opacity 1s ease-in-out';
setTimeout(() => {
welcomeScreen.style.display = 'none';
}, 1000);
}, 3000);
}
}
}, 1000);
})();
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址