Adds draggable rainbow UI menu with FOV slider and key press display on Taming.io
目前為
// ==UserScript==
// @name Taming.io menu by 𝘣𝘢𝘳𝘴𝘪𝘬 𝘩𝘢𝘤𝘬𝘦𝘳
// @namespace http://tampermonkey.net/
// @version 0.3
// @description Adds draggable rainbow UI menu with FOV slider and key press display on Taming.io
// @author 𝘣𝘢𝘳𝘴𝘪𝘬 𝘩𝘢𝘤𝘬𝘦𝘳 ㅤ
// @match *://taming.io/*
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// --- CSS Styles for rainbow gradient and menu ---
const style = document.createElement('style');
style.textContent = `
#rainbowMenu {
position: fixed;
top: 100px;
left: 20px;
width: 280px;
background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.5);
color: white;
font-family: Arial, sans-serif;
user-select: none;
z-index: 999999;
cursor: grab;
padding: 15px;
}
#rainbowMenu header {
font-weight: bold;
font-size: 18px;
margin-bottom: 10px;
cursor: grab;
}
#rainbowMenu label {
display: block;
margin-top: 10px;
font-size: 14px;
}
#rainbowMenu input[type="range"] {
width: 100%;
margin-top: 5px;
-webkit-appearance: none;
background: rgba(255,255,255,0.3);
border-radius: 5px;
height: 8px;
}
#rainbowMenu input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
background: white;
border-radius: 50%;
cursor: pointer;
border: 1px solid #999;
margin-top: -5px;
}
#keyStatus {
margin-top: 15px;
font-size: 14px;
line-height: 1.4;
max-height: 120px;
overflow-y: auto;
background: rgba(255,255,255,0.15);
padding: 8px;
border-radius: 5px;
user-select: text;
}
`;
document.head.appendChild(style);
// --- Create menu element ---
const menu = document.createElement('div');
menu.id = 'rainbowMenu';
menu.innerHTML = `
<header>Rainbow UI - Taming.io</header>
<label for="fovRange">Field of View (FOV): <span id="fovValue">90</span>°</label>
<input type="range" id="fovRange" min="60" max="140" value="90" step="1" />
<label>Pressed Keys:</label>
<div id="keyStatus">None</div>
`;
document.body.appendChild(menu);
// --- Drag functionality ---
const header = menu.querySelector('header');
let isDragging = false;
let dragStartX, dragStartY, menuStartX, menuStartY;
header.addEventListener('mousedown', (e) => {
isDragging = true;
dragStartX = e.clientX;
dragStartY = e.clientY;
const rect = menu.getBoundingClientRect();
menuStartX = rect.left;
menuStartY = rect.top;
menu.style.cursor = 'grabbing';
e.preventDefault();
});
window.addEventListener('mouseup', () => {
isDragging = false;
menu.style.cursor = 'grab';
});
window.addEventListener('mousemove', (e) => {
if (!isDragging) return;
let newX = menuStartX + (e.clientX - dragStartX);
let newY = menuStartY + (e.clientY - dragStartY);
// Keep menu inside viewport bounds
const maxX = window.innerWidth - menu.offsetWidth;
const maxY = window.innerHeight - menu.offsetHeight;
if (newX < 0) newX = 0;
if (newY < 0) newY = 0;
if (newX > maxX) newX = maxX;
if (newY > maxY) newY = maxY;
menu.style.left = newX + 'px';
menu.style.top = newY + 'px';
});
// --- Key press tracking ---
const keyStatus = menu.querySelector('#keyStatus');
const pressedKeys = new Set();
// Key map for display names
const keyNames = {
'ArrowUp': 'Arrow Up',
'ArrowDown': 'Arrow Down',
'ArrowLeft': 'Arrow Left',
'ArrowRight': 'Arrow Right',
' ': 'Space',
'Shift': 'Shift',
'Control': 'Control',
'Alt': 'Alt',
'Enter': 'Enter',
'Escape': 'Escape',
'Tab': 'Tab',
// Add other keys if needed
};
function getDisplayKey(key) {
if (keyNames[key]) return keyNames[key];
if (key.length === 1) return key.toUpperCase();
return key;
}
window.addEventListener('keydown', (e) => {
pressedKeys.add(e.key);
updateKeyStatus();
});
window.addEventListener('keyup', (e) => {
pressedKeys.delete(e.key);
updateKeyStatus();
});
function updateKeyStatus() {
if (pressedKeys.size === 0) {
keyStatus.textContent = 'None';
} else {
keyStatus.textContent = Array.from(pressedKeys)
.map(getDisplayKey)
.sort()
.join(', ');
}
}
// --- Field of View (FOV) control ---
const fovRange = menu.querySelector('#fovRange');
const fovValue = menu.querySelector('#fovValue');
fovRange.addEventListener('input', () => {
const fov = parseInt(fovRange.value, 10);
fovValue.textContent = fov;
// Here we attempt to find the in-game FOV variable or method to set FOV.
// Taming.io uses WebGL and likely has a camera object with fov property.
try {
// Example approach - adjust based on actual game internals
// Access game global or canvas
if (window.game && window.game.camera && typeof window.game.camera.fov !== 'undefined') {
window.game.camera.fov = fov;
// Possibly need to update projection matrix:
if (typeof window.game.camera.updateProjectionMatrix === 'function') {
window.game.camera.updateProjectionMatrix();
}
}
} catch (err) {
// Fail silently if game internals unavailable
}
});
// Initial update for FOV display
fovValue.textContent = fovRange.value;
// --- Attempt to hook into Taming.io game internals for FOV ---
// This part depends heavily on the actual game code, which can change.
// The above approach is a generic pattern for three.js or similar engines.
})();
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址