// ==UserScript== // @name MWI-Hit-Tracker-More-Animation // @namespace http://tampermonkey.net/ // @version 1.9.1 // @description 战斗过程中实时显示攻击命中目标，增加了更多的特效 // @author Artintel (Artintel), Yuk111 // @license MIT // @match https://www.milkywayidle.com/* // @match https://test.milkywayidle.com/* // @icon https://www.milkywayidle.com/favicon.svg // @grant none // @downloadURL none // ==/UserScript== (function () { 'use strict'; // 状态变量，存储战斗相关信息 const battleState = { monstersHP: [], monstersMP: [], playersHP: [], playersMP: [] }; // 存储是否已添加窗口大小改变监听器 let isResizeListenerAdded = false; // 标记脚本是否暂停 let isPaused = false; // 粒子对象池 const particlePool = []; // 标记按钮是否已添加 let isCustomColorButtonAdded = false; // 保存初始颜色 const initialLineColor = [ "rgba(255, 99, 132, 1)", // 浅粉色 "rgba(54, 162, 235, 1)", // 浅蓝色 "rgba(255, 206, 86, 1)", // 浅黄色 "rgba(75, 192, 192, 1)", // 浅绿色 "rgba(153, 102, 255, 1)", // 浅紫色 "rgba(255, 159, 64, 1)", // 浅橙色 "rgba(255, 0, 0, 1)" // 敌人攻击颜色 ]; const initialFilterColor = [ "rgba(255, 99, 132, 0.8)", // 浅粉色 "rgba(54, 162, 235, 0.8)", // 浅蓝色 "rgba(255, 206, 86, 0.8)", // 浅黄色 "rgba(75, 192, 192, 0.8)", // 浅绿色 "rgba(153, 102, 255, 0.8)", // 浅紫色 "rgba(255, 159, 64, 0.8)", // 浅橙色 "rgba(255, 0, 0, 0.8)" // 敌人攻击颜色 ]; // 存储每个玩家的勾选状态，默认全部勾选 const playerDrawEnabled = new Array(7).fill(true); //存储特效的勾选状态，默认全勾选 // 索引含义：0-伤害数字，1-线条绘制，2-粒子拖尾，3-击中特效，4-震动特效 const effectDrawEnabled = new Array(5).fill(true); // 定义线条颜色数组，用于不同角色的攻击线条颜色 const lineColor = [ "rgba(255, 99, 132, 1)", // 浅粉色 "rgba(54, 162, 235, 1)", // 浅蓝色 "rgba(255, 206, 86, 1)", // 浅黄色 "rgba(75, 192, 192, 1)", // 浅绿色 "rgba(153, 102, 255, 1)", // 浅紫色 "rgba(255, 159, 64, 1)", // 浅橙色 "rgba(255, 0, 0, 1)" // 敌人攻击颜色 ]; // 定义滤镜颜色数组，用于线条的外发光效果颜色 const filterColor = [ "rgba(255, 99, 132, 0.8)", // 浅粉色 "rgba(54, 162, 235, 0.8)", // 浅蓝色 "rgba(255, 206, 86, 0.8)", // 浅黄色 "rgba(75, 192, 192, 0.8)", // 浅绿色 "rgba(153, 102, 255, 0.8)", // 浅紫色 "rgba(255, 159, 64, 0.8)", // 浅橙色 "rgba(255, 0, 0, 0.8)" // 敌人攻击颜色 ]; // 从 localStorage 加载保存的设置 function readSettings() { const ls = localStorage.getItem("MWI_Hit_Tracker_Settings"); if (ls) { const lsObj = JSON.parse(ls); lineColor.splice(0, lineColor.length, ...lsObj.lineColor); filterColor.splice(0, filterColor.length, ...lsObj.filterColor); playerDrawEnabled.splice(0, playerDrawEnabled.length, ...lsObj.playerDrawEnabled); } // 读取特效设置 const effectLs = localStorage.getItem("MWI_Hit_Tracker_Effect_Settings"); if (effectLs) { const effectLsObj = JSON.parse(effectLs); effectDrawEnabled.splice(0, effectDrawEnabled.length, ...effectLsObj.effectDrawEnabled); } } // 保存设置到 localStorage function saveSettings() { const settings = { lineColor: lineColor, filterColor: filterColor, playerDrawEnabled: playerDrawEnabled }; localStorage.setItem("MWI_Hit_Tracker_Settings", JSON.stringify(settings)); // 保存特效设置 const effectSettings = { effectDrawEnabled: effectDrawEnabled }; localStorage.setItem("MWI_Hit_Tracker_Effect_Settings", JSON.stringify(effectSettings)); } // 在初始化时加载设置 readSettings(); // 创建自定义颜色按钮 /** * 创建自定义颜色设置按钮，用于打开设置弹出窗口，可设置玩家攻击线条颜色和显示状态。 */ function createCustomColorButton() { // 使用选择器，查找按钮的父元素 const tabsContainer = document.querySelector("#root > div > div > div.GamePage_gamePanel__3uNKN > div.GamePage_contentPanel__Zx4FH > div.GamePage_middlePanel__uDts7 > div.GamePage_mainPanel__2njyb > div > div:nth-child(1) > div > div > div > div.TabsComponent_tabsContainer__3BDUp > div > div > div"); // 获取参考标签，如果 tabsContainer 存在，则取其第二个子元素 const referenceTab = tabsContainer ? tabsContainer.children[1] : null; // 检查是否找到目标元素，如果未找到则输出提示信息并返回 if (!tabsContainer || !referenceTab) { console.log('未找到目标元素，请检查选择器是否正确。'); return; } // 检查是否已经存在自定义颜色按钮，如果存在则返回 if (tabsContainer.querySelector('.Button_customColor__custom')) return; // 创建自定义颜色设置按钮 const customColorButton = document.createElement('button'); // 为按钮设置自定义类名 customColorButton.className = 'Button_customColor__custom css-1q2h7u5'; // 设置按钮的显示文本 customColorButton.textContent = 'Hit自定义设置'; // 获取标签容器中的最后一个标签 const lastTab = tabsContainer.children[tabsContainer.children.length - 1]; // 遍历标签容器中的所有标签，检查是否存在文本内容为"商品列表"的标签，如果存在则返回 for (let i = 0; i < tabsContainer.children.length; i++) { if (tabsContainer.children[i].textContent === "商品列表") { return; } } // 将自定义颜色设置按钮插入到最后一个标签之后 lastTab.insertAdjacentElement('afterend', customColorButton); // 创建样式元素，用于设置按钮和弹出窗口相关的样式 const style = document.createElement('style'); // 设置样式内容 style.innerHTML = ` .Button_customColor__custom { background-color: #546ddb; color: white; border-radius: 5px; padding: 5px 10px; cursor: pointer; transition: background-color 0.3s; } .Button_customColor__custom:hover { background-color: #131419; } .expandable-section { cursor: pointer; padding: 10px; background-color: #e0e0e0; margin-bottom: 10px; border-radius: 5px; } .expandable-content { display: none; padding-left: 20px; } .expandable-content.show { display: block; } .draggable { cursor: move; } `; // 将样式元素添加到文档头部 document.head.appendChild(style); // 为自定义颜色设置按钮添加点击事件监听器 customColorButton.addEventListener('click', () => { // 检查文档中是否已存在类名为 "自定义菜单" 的元素，如果有则销毁它 const customMenu = document.querySelector('.自定义菜单'); if (customMenu) { document.body.removeChild(customMenu); return; } // 创建弹出窗口元素并添加类名 "自定义菜单" const popup = document.createElement('div'); popup.classList.add('自定义菜单'); // 设置弹出窗口的定位方式为固定定位 popup.style.position = 'fixed'; // 设置弹出窗口的垂直居中位置 popup.style.top = '50%'; // 设置弹出窗口的水平居中位置 popup.style.left = '50%'; // 调整弹出窗口的位置，使其完全居中 //popup.style.transform = 'translate(-50%, -50%)'; // 设置弹出窗口的背景颜色 popup.style.backgroundColor = '#f9f9f9'; // 设置弹出窗口的内边距 popup.style.padding = '30px'; // 设置弹出窗口的边框样式 popup.style.border = '2px solid #ddd'; // 设置弹出窗口的边框圆角 popup.style.borderRadius = '10px'; // 设置弹出窗口的阴影效果 popup.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)'; // 设置弹出窗口的层级，确保其显示在最上层 popup.style.zIndex = '9999'; // 设置弹出窗口的最小宽度 popup.style.minWidth = '300px'; // 使弹出窗口可拖动 let isDragging = false; let startX, startY, initialX, initialY; // 鼠标按下事件，开始拖动 popup.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; startY = e.clientY; initialX = popup.offsetLeft; initialY = popup.offsetTop; // 移除居中 transform 样式 //popup.style.transform = 'none'; }); // 鼠标移动事件，处理拖动 document.addEventListener('mousemove', (e) => { if (isDragging) { e.preventDefault(); const dx = e.clientX - startX; const dy = e.clientY - startY; popup.style.left = initialX + dx + 'px'; popup.style.top = initialY + dy + 'px'; } }); // 鼠标释放事件，结束拖动 document.addEventListener('mouseup', () => { isDragging = false; }); // 封装创建可展开部分的函数 function createExpandableSection(title, contentGenerator = null) { // 创建可展开区域元素 const expandableSection = document.createElement('div'); // 为可展开区域元素设置类名 expandableSection.className = 'expandable-section draggable'; // 初始化展开状态为未展开 let isExpanded = false; // 根据展开状态设置可展开区域的显示文本 function updateExpandableSectionText() { expandableSection.textContent = isExpanded ? `${title} ▼` : `${title} ▶`; } // 初始设置文本 updateExpandableSectionText(); // 创建可展开内容元素 const expandableContent = document.createElement('div'); // 为可展开内容元素设置类名 expandableContent.className = 'expandable-content'; // 如果有内容生成函数，则调用该函数生成内容 if (contentGenerator) { contentGenerator(expandableContent); } // 修改点击事件监听器，更新展开状态并更新文本，同时切换可展开内容的显示状态 expandableSection.addEventListener('click', () => { isExpanded = !isExpanded; expandableContent.classList.toggle('show'); updateExpandableSectionText(); }); return { expandableSection, expandableContent }; } // 生成玩家和颜色部分内容的函数 function generatePlayerColorContent(expandableContent) { // 定义玩家名称数组 const players = ['玩家一', '玩家二', '玩家三', '玩家四', '玩家五', '待定', '敌人']; // 封装创建勾选框和标签的通用函数 function createCheckboxAndLabel(container, labelText, checked, changeHandler) { // 创建勾选框元素 const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.checked = checked; checkbox.addEventListener('change', changeHandler); container.appendChild(checkbox); // 创建标签元素 const label = document.createElement('span'); label.textContent = labelText; label.style.flex = '1'; label.style.fontSize = '14px'; label.style.marginLeft = '10px'; container.appendChild(label); } // 遍历玩家名称数组，为每个玩家创建颜色选择器和预览 players.forEach((player, index) => { // 创建容器元素，用于包裹勾选框、标签、颜色选择器和预览 const container = document.createElement('div'); container.style.marginBottom = '15px'; container.style.display = 'flex'; container.style.alignItems = 'center'; // 创建勾选框和标签 createCheckboxAndLabel(container, `${player}: `, playerDrawEnabled[index], (e) => { playerDrawEnabled[index] = e.target.checked; }); // 创建颜色选择器元素 const colorInput = document.createElement('input'); colorInput.type = 'color'; colorInput.value = lineColor[index]; colorInput.addEventListener('input', (e) => { if (playerDrawEnabled[index]) { lineColor[index] = e.target.value; filterColor[index] = e.target.value.replace('1)', '0.8)'); saveSettings(); // 保存设置 } }); colorInput.style.marginRight = '10px'; // 创建颜色预览元素 const preview = document.createElement('div'); preview.style.width = '30px'; preview.style.height = '30px'; preview.style.border = '1px solid #ccc'; preview.style.borderRadius = '4px'; preview.style.backgroundColor = lineColor[index]; colorInput.addEventListener('input', (e) => { preview.style.backgroundColor = e.target.value; }); // 将颜色选择器和预览元素添加到容器元素中 container.appendChild(colorInput); container.appendChild(preview); // 将容器元素添加到可展开内容元素中 expandableContent.appendChild(container); }); } // 生成特效自定义部分内容的函数 function generateEffectCustomContent(expandableContent) { // 定义特效名称集合，方便后期维护（调整顺序，线条绘制移到第一位） const effectNames = [ '线条绘制', '伤害数字', '击中特效', '震动' ]; // 定义子菜单配置 const subMenuConfig = { '伤害数字': ['粒子拖尾'] // 粒子拖尾作为伤害数字的子菜单 }; // 封装创建勾选框和标签的通用函数 function createCheckboxAndLabel(container, labelText, checked, changeHandler, indent = false) { // 创建勾选框元素 const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.checked = checked; checkbox.addEventListener('change', changeHandler); // 如果需要缩进（用于子菜单项） if (indent) { const indentSpan = document.createElement('span'); indentSpan.innerHTML = '    '; container.appendChild(indentSpan); } container.appendChild(checkbox); // 创建标签元素 const label = document.createElement('span'); label.textContent = labelText; label.style.flex = '1'; label.style.fontSize = '14px'; label.style.marginLeft = '10px'; container.appendChild(label); return checkbox; } // 保存子菜单的勾选框引用，用于控制可见性和勾选状态 const subMenuCheckboxes = {}; // 处理父菜单项的变更事件，控制子菜单项 function handleParentMenuChange(parentName, isChecked) { if (subMenuConfig[parentName]) { subMenuConfig[parentName].forEach(subItem => { if (subMenuCheckboxes[`${parentName}_${subItem}`]) { // 当父菜单取消勾选时，禁用子菜单项 subMenuCheckboxes[`${parentName}_${subItem}`].disabled = !isChecked; if (!isChecked) { // 当父菜单取消勾选时，也取消子菜单的勾选 subMenuCheckboxes[`${parentName}_${subItem}`].checked = false; // 更新对应的特效状态 if (subItem === '粒子拖尾') { effectDrawEnabled[2] = false; } } } }); } saveSettings(); } // 遍历特效名称数组，为每个特效创建勾选框和标签 effectNames.forEach((effect, index) => { // 创建容器元素，用于包裹勾选框和标签 const container = document.createElement('div'); container.style.marginBottom = '15px'; container.style.display = 'flex'; container.style.alignItems = 'center'; // 使线条绘制对应index=1，伤害数字对应index=0，击中特效对应index=3，震动对应index=4 let effectIndex; if (effect === '线条绘制') effectIndex = 1; else if (effect === '伤害数字') effectIndex = 0; else if (effect === '击中特效') effectIndex = 3; else if (effect === '震动') effectIndex = 4; // 创建勾选框和标签 const checkbox = createCheckboxAndLabel(container, effect, effectDrawEnabled[effectIndex], (e) => { // 更新全局变量effectDrawEnabled的状态 effectDrawEnabled[effectIndex] = e.target.checked; // 如果这个特效有子菜单，处理子菜单的可见性和状态 handleParentMenuChange(effect, e.target.checked); // 保存设置 saveSettings(); }); // 将容器元素添加到可展开内容元素中 expandableContent.appendChild(container); // 处理子菜单 if (subMenuConfig[effect]) { subMenuConfig[effect].forEach(subItem => { // 创建子菜单项容器 const subContainer = document.createElement('div'); subContainer.style.marginBottom = '10px'; subContainer.style.marginLeft = '20px'; subContainer.style.display = 'flex'; subContainer.style.alignItems = 'center'; let subEffectIndex; if (subItem === '粒子拖尾') subEffectIndex = 2; // 创建子菜单项勾选框和标签 const subCheckbox = createCheckboxAndLabel(subContainer, subItem, effectDrawEnabled[subEffectIndex], (e) => { // 更新全局变量effectDrawEnabled的状态 effectDrawEnabled[subEffectIndex] = e.target.checked; // 保存设置 saveSettings(); }, true); // 如果父菜单未勾选，禁用子菜单项 subCheckbox.disabled = !effectDrawEnabled[effectIndex]; // 保存子菜单勾选框引用 subMenuCheckboxes[`${effect}_${subItem}`] = subCheckbox; // 将子菜单容器添加到可展开内容元素中 expandableContent.appendChild(subContainer); }); } }); } // 创建玩家和颜色可展开部分 const { expandableSection: playerColorSection, expandableContent: playerColorContent } = createExpandableSection('玩家和颜色', generatePlayerColorContent); popup.appendChild(playerColorSection); popup.appendChild(playerColorContent); // 创建特效自定义可展开部分 const { expandableSection: effectCustomSection, expandableContent: effectCustomContent } = createExpandableSection('特效自定义', generateEffectCustomContent); popup.appendChild(effectCustomSection); popup.appendChild(effectCustomContent); // 创建特效参数可展开部分 const { expandableSection: effectParamsSection, expandableContent: effectParamsContent } = createExpandableSection('特效参数'); popup.appendChild(effectParamsSection); popup.appendChild(effectParamsContent); // 创建重置按钮元素 const resetButton = document.createElement('button'); // 设置重置按钮的显示文本 resetButton.textContent = '重置'; // 设置重置按钮的背景颜色 resetButton.style.backgroundColor = '#ff4444'; // 设置重置按钮的文本颜色 resetButton.style.color = 'white'; // 设置重置按钮无边框 resetButton.style.border = 'none'; // 设置重置按钮的边框圆角 resetButton.style.borderRadius = '4px'; // 设置重置按钮的内边距 resetButton.style.padding = '8px 15px'; // 设置重置按钮的右外边距 resetButton.style.marginRight = '10px'; // 设置重置按钮的鼠标指针样式 resetButton.style.cursor = 'pointer'; // 为重置按钮添加点击事件监听器，点击时重置所有设置 resetButton.addEventListener('click', () => { // 添加确认对话框 const confirmReset = confirm('确定要重置所有设置吗？这将恢复所有默认值。'); // 如果用户取消，则不执行重置操作 if (!confirmReset) { return; } // 重置线条颜色数组 lineColor.splice(0, lineColor.length, ...initialLineColor); // 重置滤镜颜色数组 filterColor.splice(0, filterColor.length, ...initialFilterColor); // 重置玩家显示状态数组，全部设置为勾选状态 playerDrawEnabled.fill(true); // 重置特效选项数组，全部设置为勾选状态 effectDrawEnabled.fill(true); // 保存重置后的设置 saveSettings(); // 更新颜色选择器和预览 // 获取玩家和颜色可展开内容中的所有颜色选择器元素 const colorInputs = playerColorContent.querySelectorAll('input[type="color"]'); // 获取玩家和颜色可展开内容中的所有颜色预览元素 const previews = playerColorContent.querySelectorAll('div:last-child'); // 遍历颜色选择器和预览元素，更新其值和背景颜色 colorInputs.forEach((input, index) => { input.value = initialLineColor[index]; previews[index].style.backgroundColor = initialLineColor[index]; }); // 更新特效选项的勾选状态 // 获取所有效果设置部分的勾选框 const effectCheckboxes = effectCustomContent.querySelectorAll('input[type="checkbox"]'); // 遍历所有勾选框，将其设置为勾选状态 effectCheckboxes.forEach(checkbox => { checkbox.checked = true; // 如果这是子菜单项，确保它是启用的 if (checkbox.disabled) { checkbox.disabled = false; } }); // 更新玩家勾选框状态 const playerCheckboxes = playerColorContent.querySelectorAll('input[type="checkbox"]'); playerCheckboxes.forEach(checkbox => { checkbox.checked = true; }); //关闭菜单后再打开新的菜单 document.body.removeChild(popup); //点击customColorButton customColorButton.click(); }); // 创建保存按钮元素 const closeButton = document.createElement('button'); // 设置保存按钮的显示文本 closeButton.textContent = '保存'; // 设置保存按钮的背景颜色 closeButton.style.backgroundColor = '#2196F3'; // 设置保存按钮的文本颜色 closeButton.style.color = 'white'; // 设置保存按钮无边框 closeButton.style.border = 'none'; // 设置保存按钮的边框圆角 closeButton.style.borderRadius = '4px'; // 设置保存按钮的内边距 closeButton.style.padding = '8px 15px'; // 设置保存按钮的鼠标指针样式 closeButton.style.cursor = 'pointer'; // 为保存按钮添加点击事件监听器，点击时保存设置并关闭弹出窗口 closeButton.addEventListener('click', () => { saveSettings(); document.body.removeChild(popup); }); // 创建按钮容器元素 const buttonContainer = document.createElement('div'); // 设置按钮容器元素的顶部外边距 buttonContainer.style.marginTop = '20px'; // 设置按钮容器元素的显示方式为弹性布局 buttonContainer.style.display = 'flex'; // 设置按钮容器元素内子元素的水平靠右对齐 buttonContainer.style.justifyContent = 'flex-end'; // 将重置按钮添加到按钮容器元素中 buttonContainer.appendChild(resetButton); // 将保存按钮添加到按钮容器元素中 buttonContainer.appendChild(closeButton); // 将按钮容器元素添加到弹出窗口中 popup.appendChild(buttonContainer); // 将弹出窗口添加到文档主体中 document.body.appendChild(popup); }); // 标记自定义颜色设置按钮已添加 isCustomColorButtonAdded = true; // 输出提示信息，表示自定义颜色按钮已成功添加 console.log('自定义颜色按钮已成功添加。'); } // 循环检查按钮是否创建成功 function checkAndCreateButton() { const created = createCustomColorButton(); if (!created) { setTimeout(checkAndCreateButton, 500); // 每 500 毫秒检查一次 } } // 修改初始化函数，添加对自定义颜色按钮的调用 function init() { console.log('初始化函数已调用。'); // 先加载设置 readSettings(); // 劫持 WebSocket 消息，以便处理战斗相关的消息 hookWS(); // 添加网页可见性变化监听器，当网页从后台恢复时进行清理操作 addVisibilityChangeListener(); // 创建动画样式，用于攻击路径的闪烁效果和目标震动效果 createAnimationStyle(); // 调用循环检查函数 checkAndCreateButton(); } // 创建动画样式，包括路径闪烁和目标震动效果 function createAnimationStyle() { // console.log('动画样式函数已调用。'); const style = document.createElement('style'); style.textContent = ` @keyframes lineFlash { 0% { stroke-opacity: 0.7; } 50% { stroke-opacity: 0.3; } 100% { stroke-opacity: 0.7; } } @keyframes shake { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-1px); } /* 减小震动幅度 */ } .mwht-shake { animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) forwards; /* 固定0.2秒持续时间 */ transform-origin: center; position: relative; z-index: 200; } `; document.head.appendChild(style); } // 劫持 WebSocket 消息，拦截并处理战斗相关的消息 function hookWS() { // console.log('劫持函数已调用。'); const dataProperty = Object.getOwnPropertyDescriptor(MessageEvent.prototype, "data"); const oriGet = dataProperty.get; dataProperty.get = function hookedGet() { const socket = this.currentTarget; if (!(socket instanceof WebSocket)) { return oriGet.call(this); } if (socket.url.indexOf("api.milkywayidle.com/ws") <= -1 && socket.url.indexOf("api-test.milkywayidle.com/ws") <= -1) { return oriGet.call(this); } if (isPaused) { return oriGet.call(this); } const message = oriGet.call(this); Object.defineProperty(this, "data", { value: message }); return handleMessage(message); }; Object.defineProperty(MessageEvent.prototype, "data", dataProperty); } // 计算元素中心点坐标 function getElementCenter(element) { const rect = element.getBoundingClientRect(); if (element.innerText.trim() === '') { return { x: rect.left + rect.width / 2, y: rect.top }; } return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }; } // 创建抛物线路径，用于攻击动画的路径显示 function createParabolaPath(startElem, endElem, reversed = false) { const start = getElementCenter(startElem); const end = getElementCenter(endElem); const curveRatio = reversed ? 4 : 2.5; const curveHeight = -Math.abs(start.x - end.x) / curveRatio; const controlPoint = { x: (start.x + end.x) / 2, y: Math.min(start.y, end.y) + curveHeight }; if (reversed) { return `M ${end.x} ${end.y} Q ${controlPoint.x} ${controlPoint.y}, ${start.x} ${start.y}`; } return `M ${start.x} ${start.y} Q ${controlPoint.x} ${controlPoint.y}, ${end.x} ${end.y}`; } // 为目标元素的第三个父级元素添加震动效果，根据第五个父级元素决定震动方向 function shakeTarget(element) { if (!element || isPaused) return; // 检查震动特效是否启用 if (!effectDrawEnabled[4]) return; // 向上查找第三个父级元素（用于实际震动） let shakeElement = element; for (let i = 0; i < 3 && shakeElement; i++) { shakeElement = shakeElement.parentElement; } // 向上查找第五个父级元素（用于判断震动方向） let directionElement = element; for (let i = 0; i < 5 && directionElement; i++) { directionElement = directionElement.parentElement; } // 如果找到了相应的父级元素，应用震动效果 if (shakeElement && directionElement) { const className = directionElement.className; let transformValue = 'translate(0, 0)'; // 根据第五个父级元素的类名决定震动方向 if (className.includes('playersArea')) { transformValue = 'translate(-2px, 2px)'; } else if (className.includes('monstersArea')) { transformValue = 'translate(2px, 2px)'; } // 添加震动类并设置动画 shakeElement.classList.add('mwht-shake'); // 使用自定义动画实现不同方向的震动 shakeElement.style.animation = `customShake 0.2s cubic-bezier(.36,.07,.19,.97) forwards`; shakeElement.style.transformOrigin = 'center'; shakeElement.style.willChange = 'transform'; // 存储原始transform值，动画结束后恢复 const originalTransform = shakeElement.style.transform; // 动画帧函数 let startTime = null; const duration = 200; // 200ms = 0.2s function animate(currentTime) { if (isPaused) return; if (!startTime) startTime = currentTime; const elapsed = currentTime - startTime; const progress = Math.min(elapsed / duration, 1); // 计算动画曲线 const easeOut = 1 - Math.pow(1 - progress, 3); // 应用变换 if (progress < 0.5) { // 前半段：从0到目标偏移 const scale = easeOut * 2; shakeElement.style.transform = `translate(${parseFloat(transformValue.split('(')[1]) * scale}px, ${parseFloat(transformValue.split(',')[1]) * scale}px)`; } else { // 后半段：从目标偏移回到0 const scale = 2 - (easeOut * 2); shakeElement.style.transform = `translate(${parseFloat(transformValue.split('(')[1]) * scale}px, ${parseFloat(transformValue.split(',')[1]) * scale}px)`; } if (progress < 1) { requestAnimationFrame(animate); } else { // 动画结束，恢复原始transform shakeElement.style.transform = originalTransform; shakeElement.classList.remove('mwht-shake'); shakeElement.style.animation = ''; } } // 启动动画 requestAnimationFrame(animate); } } // 创建动画效果，包括攻击路径和伤害数字的动画 function createEffect(startElem, endElem, hpDiff, index, reversed = false) { if (isPaused) return; // 检查玩家是否被勾选，如果未勾选则不绘制 if (!playerDrawEnabled[index]) return; if (reversed) { const dmgDivs = startElem.querySelector('.CombatUnit_splatsContainer__2xcc0')?.querySelectorAll('div') || []; for (const div of dmgDivs) { if (div.innerText.trim() === '') { startElem = div; break; } } } else { const dmgDivs = endElem.querySelector('.CombatUnit_splatsContainer__2xcc0')?.querySelectorAll('div') || []; for (const div of dmgDivs) { if (div.innerText.trim() === '') { endElem = div; break; } } } const svg = document.getElementById('svg-container'); const frag = document.createDocumentFragment(); // 根据reversed参数决定目标元素 const targetElem = reversed ? startElem : endElem; // 存储需要在结束时触发击中特效的位置 const effectPosition = { x: 0, y: 0 }; let path = null; let text = null; let pathLength = 0; let hasTextOrPath = false; // 只有当线条绘制特效启用时才创建路径 if (effectDrawEnabled[1]) { hasTextOrPath = true; let strokeWidth = '1px'; let filterWidth = '1px'; if (hpDiff >= 1000) { strokeWidth = '5px'; filterWidth = '6px'; } else if (hpDiff >= 700) { strokeWidth = '4px'; filterWidth = '5px'; } else if (hpDiff >= 500) { strokeWidth = '3px'; filterWidth = '4px'; } else if (hpDiff >= 300) { strokeWidth = '2px'; filterWidth = '3px'; } else if (hpDiff >= 100) { filterWidth = '2px'; } path = document.createElementNS("http://www.w3.org/2000/svg", "path"); if (reversed) index = 6; Object.assign(path.style, { stroke: lineColor[index], strokeWidth, fill: 'none', strokeLinecap: 'round', filter: `drop-shadow(0 0 ${filterWidth} ${filterColor[index]})`, willChange: 'stroke-dashoffset, opacity' }); path.setAttribute('d', createParabolaPath(startElem, endElem, reversed)); pathLength = path.getTotalLength(); path.style.strokeDasharray = pathLength; path.style.strokeDashoffset = pathLength; // 计算路径终点位置，用于后续触发击中特效 const endPoint = path.getPointAtLength(pathLength); effectPosition.x = endPoint.x; effectPosition.y = endPoint.y; frag.appendChild(path); } // 只有当伤害数字特效启用时才创建文本 if (effectDrawEnabled[0]) { hasTextOrPath = true; text = document.createElementNS("http://www.w3.org/2000/svg", "text"); text.textContent = hpDiff; const baseFontSize = 5; const fontSize = Math.floor(200 * Math.pow(hpDiff / (20000 + hpDiff), 0.45)) - baseFontSize; text.setAttribute('font-size', fontSize); text.setAttribute('fill', lineColor[index]); Object.assign(text.style, { opacity: 0, filter: `drop-shadow(0 0 5px ${lineColor[index]})`, transformOrigin: 'center', fontWeight: 'bold', willChange: 'transform, opacity, x, y' }); frag.appendChild(text); } // 如果没有任何可视化效果但仍然需要处理伤害，直接触发震动和击中特效 if (!hasTextOrPath) { // 获取目标元素的位置用于粒子效果 const targetCenter = getElementCenter(targetElem); effectPosition.x = targetCenter.x; effectPosition.y = targetCenter.y; // 独立触发震动和击中特效 if (effectDrawEnabled[3]) { createParticleEffect(effectPosition.x, effectPosition.y, lineColor[index]); } if (effectDrawEnabled[4]) { shakeTarget(targetElem); } return; } svg.appendChild(frag); // 如果创建了路径，设置路径动画 if (path) { setTimeout(() => { requestAnimationFrame(() => { path.style.transition = 'stroke-dashoffset 1s linear'; path.style.strokeDashoffset = '0'; }); }, 100); setTimeout(() => { requestAnimationFrame(() => { path.style.transition = 'stroke-dashoffset 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94)'; path.style.strokeDashoffset = -pathLength; path.style.opacity = 0; const removePath = () => { path.remove(); // 如果没有启用伤害数字特效，在路径移除后触发击中特效和震动 if (!text) { if (effectDrawEnabled[3]) { createParticleEffect(effectPosition.x, effectPosition.y, lineColor[index]); } if (effectDrawEnabled[4]) { shakeTarget(targetElem); } } }; path.addEventListener('transitionend', removePath, { once: true }); }); }, 900); } // 如果创建了文本，设置文本动画 if (text) { // 如果同时有路径和文本，让文本沿着路径移动 if (path) { setTimeout(() => { requestAnimationFrame(() => { animateText(path, text, pathLength, lineColor[index], targetElem); }); }, 100); } else { // 如果只有文本没有路径，创建一个虚拟路径用于文本动画 const virtualPath = document.createElementNS("http://www.w3.org/2000/svg", "path"); virtualPath.setAttribute('d', createParabolaPath(startElem, endElem, reversed)); const virtualPathLength = virtualPath.getTotalLength(); // 计算虚拟路径终点位置，用于后续触发击中特效 const endPoint = virtualPath.getPointAtLength(virtualPathLength); effectPosition.x = endPoint.x; effectPosition.y = endPoint.y; // 直接设置文本动画，不添加虚拟路径到DOM animateText(virtualPath, text, virtualPathLength, lineColor[index], targetElem); } } } // 从对象池获取粒子元素 function getParticleFromPool() { if (particlePool.length > 0) { return particlePool.pop(); } return document.createElementNS("http://www.w3.org/2000/svg", "circle"); } // 将粒子元素返回对象池 function returnParticleToPool(particle) { particle.removeAttribute('r'); particle.removeAttribute('fill'); particle.removeAttribute('cx'); particle.removeAttribute('cy'); particle.style.opacity = 1; particle.style.transform = 'none'; particle.removeEventListener('transitionend', () => {}); particlePool.push(particle); } // 创建击中粒子特效，在伤害数字消失时显示 function createParticleEffect(x, y, color) { if (isPaused) return; // 击中特效的启用状态已在调用前检查，不需要再检查 // if (!effectDrawEnabled[3]) return; const svg = document.getElementById('svg-container'); const numParticles = 20; const frag = document.createDocumentFragment(); const batchSize = 5; let batchCount = 0; function createBatch() { for (let i = 0; i < batchSize && batchCount * batchSize + i < numParticles; i++) { const particle = getParticleFromPool(); particle.setAttribute('r', '2'); particle.setAttribute('fill', color); particle.setAttribute('cx', x); particle.setAttribute('cy', y); particle.style.opacity = 1; particle.style.transformOrigin = 'center'; particle.style.willChange = 'transform, opacity'; const angle = ((batchCount * batchSize + i) / numParticles) * 2 * Math.PI; const distance = Math.random() * 30 + 10; const endX = parseFloat(x) + distance * Math.cos(angle); const endY = parseFloat(y) + distance * Math.sin(angle); frag.appendChild(particle); requestAnimationFrame(() => { particle.style.transition = 'all 0.3s ease-out'; particle.setAttribute('cx', endX); particle.setAttribute('cy', endY); particle.style.opacity = 0; particle.addEventListener('transitionend', () => { returnParticleToPool(particle); }, { once: true }); setTimeout(() => { if (particle.parentNode) { particle.parentNode.removeChild(particle); returnParticleToPool(particle); } }, 5000); }); } batchCount++; if (batchCount * batchSize < numParticles) { setTimeout(createBatch, 50); } else { svg.appendChild(frag); } } createBatch(); } // 文本动画函数 - 使用 requestAnimationFrame 实现更流畅的动画 /** * 执行文本动画，让文本沿着指定路径移动，并在移动过程中产生粒子效果。 * * @param {SVGPathElement} path - 文本移动的路径元素。 * @param {SVGTextElement} text - 要进行动画的文本元素。 * @param {number} pathLength - 路径的总长度。 * @param {string} color - 文本和粒子的颜色。 * @param {HTMLElement} targetElem - 目标元素，用于震动效果。 */ function animateText(path, text, pathLength, color, targetElem) { // 动画配置对象，包含动画持续时间、淡入开始和结束时间、粒子生成间隔 const animationConfig = { duration: 1350, // 动画总持续时间，单位为毫秒 fadeInStart: 0.0, // 淡入开始的进度比例 fadeInEnd: 0.3, // 淡入结束的进度比例 particleInterval: 3 // 粒子生成的间隔百分比 }; let startTime = null; // 动画开始的时间戳 let lastParticleFrame = 0; // 上一次生成粒子时的进度百分比 /** * 动画循环函数，使用 requestAnimationFrame 不断更新文本和粒子的状态。 * * @param {number} currentTime - 当前的时间戳。 */ function animate(currentTime) { // 如果脚本处于暂停状态，则停止动画 if (isPaused) return; // 如果动画还未开始，记录当前时间为开始时间 if (!startTime) startTime = currentTime; // 计算从动画开始到现在经过的时间 const elapsed = currentTime - startTime; // 计算动画的进度，取值范围为 0 到 1 const progress = Math.min(elapsed / animationConfig.duration, 1); // 根据进度获取路径上的点 const point = path.getPointAtLength(progress * pathLength); // 更新文本的位置 text.setAttribute('x', point.x); text.setAttribute('y', point.y); let opacity = 1; // 文本的透明度 // 如果进度小于淡入开始时间，文本完全透明 if (progress < animationConfig.fadeInStart) { opacity = 0; } // 如果进度在淡入开始和结束时间之间，计算透明度的渐变值 else if (progress < animationConfig.fadeInEnd) { opacity = 0.7 + 0.3 * ((progress - animationConfig.fadeInStart) / (animationConfig.fadeInEnd - animationConfig.fadeInStart)); } // 更新文本的透明度 text.style.opacity = opacity; // 检查是否达到粒子生成的间隔，并且上次生成粒子的进度不同 if (Math.floor(progress * 100) % animationConfig.particleInterval === 0 && lastParticleFrame !== Math.floor(progress * 100)) { // 记录当前生成粒子的进度 lastParticleFrame = Math.floor(progress * 100); } /** * 创建粒子拖尾效果 * @param {Object} point - 粒子的起始坐标，包含 x 和 y 属性 * @param {string} color - 粒子的填充颜色 */ function createParticleTrail(point, color) { // 粒子拖尾特效的启用状态已在调用前检查，不需要再检查 // if (!effectDrawEnabled[2]) return; // 从粒子对象池中获取一个粒子 const particle = getParticleFromPool(); // 设置粒子的半径 particle.setAttribute('r', '2'); // 设置粒子的填充颜色 particle.setAttribute('fill', color); // 设置粒子的 x 坐标，添加随机偏移 particle.setAttribute('cx', point.x + (Math.random() - 0.5) * 10); // 设置粒子的 y 坐标，添加随机偏移 particle.setAttribute('cy', point.y + (Math.random() - 0.5) * 10); // 设置粒子的初始透明度为 1 particle.style.opacity = 1; // 设置粒子的过渡效果 particle.style.transition = 'all 0.2s ease-out'; // 告诉浏览器哪些属性会发生变化，优化性能 particle.style.willChange = 'opacity, transform'; // 获取 SVG 容器元素 const svg = document.getElementById('svg-container'); // 将粒子添加到 SVG 容器中 svg.appendChild(particle); // 在下一帧请求动画，开始粒子的淡出效果 requestAnimationFrame(() => { particle.style.opacity = 0; // 监听粒子过渡结束事件，过渡结束后将粒子放回对象池 particle.addEventListener('transitionend', () => { returnParticleToPool(particle); }, { once: true }); }); } // 如果动画进度小于 1，继续请求下一帧动画 if (progress < 1) { requestAnimationFrame(animate); // 只在粒子拖尾特效启用时才创建粒子 if (effectDrawEnabled[2]) { // 调用粒子拖尾效果函数，传入粒子的起始坐标和颜色 createParticleTrail(point, color); } } // 动画进度达到 1，执行结束动画 else { // 设置文本的过渡效果 text.style.transition = 'all 0.2s ease-out'; // 放大文本 text.style.transform = 'scale(1.5)'; // 让文本透明 text.style.opacity = 0; // 保存文本最终位置，用于后续触发击中特效 const finalX = text.getAttribute('x'); const finalY = text.getAttribute('y'); // 延迟 100 毫秒后执行后续操作 setTimeout(() => { // 移除文本元素 text.remove(); // 独立触发击中特效和震动 if (effectDrawEnabled[3]) { // 在文本的位置创建粒子效果 createParticleEffect(finalX, finalY, color); } if (effectDrawEnabled[4]) { // 触发震动效果 shakeTarget(targetElem); } }, 100); } } // 启动动画循环 requestAnimationFrame(animate); } // 创建线条动画，根据攻击信息创建攻击路径和伤害数字动画 /** * 创建从一个角色到另一个角色的攻击线条，并触发相应的特效。 * * @param {number} from - 攻击发起者的索引。 * @param {number} to - 攻击目标的索引。 * @param {number} hpDiff - 伤害值，即生命值的差值。 * @param {boolean} [reversed=false] - 指示攻击是否是反向的，默认为 false。 */ function createLine(from, to, hpDiff, reversed = false) { // 如果脚本处于暂停状态，则直接返回，不执行后续操作 if (isPaused) return; // 查找玩家区域元素 const playerArea = document.querySelector(".BattlePanel_playersArea__vvwlB"); // 查找怪物区域元素 const monsterArea = document.querySelector(".BattlePanel_monstersArea__2dzrY"); // 查找游戏主面板元素 const gamePanel = document.querySelector(".GamePage_mainPanel__2njyb"); // 如果任何一个必要元素未找到，则直接返回，不执行后续操作 if (!playerArea || !monsterArea || !gamePanel) return; // 获取玩家区域的第一个子元素，作为玩家容器 const playersContainer = playerArea.firstElementChild; // 获取怪物区域的第一个子元素，作为怪物容器 const monsterContainer = monsterArea.firstElementChild; // 获取攻击发起者的元素 const effectFrom = playersContainer?.children[from]; // 获取攻击目标的元素 const effectTo = monsterContainer?.children[to]; // 如果攻击发起者或目标元素未找到，则直接返回，不执行后续操作 if (!effectFrom || !effectTo) return; // 查找 SVG 容器元素 let svgContainer = document.getElementById('svg-container'); // 如果 SVG 容器元素不存在，则创建一个新的 SVG 容器 if (!svgContainer) { // 定义 SVG 的命名空间 const svgNS = 'http://www.w3.org/2000/svg'; // 创建 SVG 元素 svgContainer = document.createElementNS(svgNS, 'svg'); // 设置 SVG 元素的 ID svgContainer.id = 'svg-container'; // 设置 SVG 元素的样式 Object.assign(svgContainer.style, { position: 'fixed', top: '0', left: '0', width: '100%', height: '100%', pointerEvents: 'none', overflow: 'visible', zIndex: '190' }); // 定义一个函数，用于设置 SVG 的 viewBox 属性 const setViewBox = () => { // 获取窗口的宽度 const width = window.innerWidth; // 获取窗口的高度 const height = window.innerHeight; // 设置 SVG 的 viewBox 属性 svgContainer.setAttribute('viewBox', `0 0 ${width} ${height}`); }; // 首次调用 setViewBox 函数，设置 SVG 的 viewBox 属性 setViewBox(); // 设置 SVG 的 preserveAspectRatio 属性 svgContainer.setAttribute('preserveAspectRatio', 'none'); // 将 SVG 元素添加到游戏主面板中 gamePanel.appendChild(svgContainer); // 如果窗口大小改变监听器还未添加，则添加该监听器 if (!isResizeListenerAdded) { // 监听窗口大小改变事件，当窗口大小改变时调用 setViewBox 函数 window.addEventListener('resize', setViewBox); // 标记窗口大小改变监听器已添加 isResizeListenerAdded = true; } } // 根据攻击是否反向，确定攻击发起者的索引 const originIndex = reversed ? to : from; // 调用 createEffect 函数，创建攻击特效 createEffect(effectFrom, effectTo, hpDiff, originIndex, reversed); } // 处理伤害信息，根据新旧生命值计算伤害差值并创建动画 /** * 处理伤害数据，根据旧的生命值数组和新的实体映射，计算生命值差值，并在满足条件时创建攻击线条。 * * @param {Array} oldHPArr - 旧的生命值数组，存储每个实体的旧生命值。 * @param {Object} newMap - 新的实体映射，键为实体索引，值为包含当前生命值（cHP）的实体对象。 * @param {number} castIndex - 施法者的索引。 * @param {Array} attackerIndices - 攻击者的索引数组。 * @param {boolean} [isReverse=false] - 可选参数，指示攻击方向是否反转。 */ function processDamage(oldHPArr, newMap, castIndex, attackerIndices, isReverse = false) { // 遍历旧的生命值数组 oldHPArr.forEach((oldHP, index) => { // 从新的实体映射中获取对应索引的实体 const entity = newMap[index]; // 如果实体不存在，则跳过当前循环 if (!entity) return; // 计算旧生命值和当前生命值的差值 const hpDiff = oldHP - entity.cHP; // 更新旧生命值数组中的值为当前生命值 oldHPArr[index] = entity.cHP; // 如果生命值差值大于 0 且攻击者索引数组不为空 if (hpDiff > 0 && attackerIndices.length > 0) { // 如果攻击者索引数组长度大于 1 if (attackerIndices.length > 1) { // 遍历攻击者索引数组 attackerIndices.forEach(attackerIndex => { // 如果攻击者索引等于施法者索引 if (attackerIndex === castIndex) { // 调用 createLine 函数创建攻击线条 createLine(attackerIndex, index, hpDiff, isReverse); } }); } else { // 如果攻击者索引数组长度为 1，直接调用 createLine 函数创建攻击线条 createLine(attackerIndices[0], index, hpDiff, isReverse); } } }); } // 检测施法者，通过比较新旧魔法值找出施法者索引 function detectCaster(oldMPArr, newMap) { let casterIndex = -1; Object.keys(newMap).forEach(index => { const newMP = newMap[index].cMP; if (newMP < oldMPArr[index]) { casterIndex = index; } oldMPArr[index] = newMP; }); return casterIndex; } // 处理 WebSocket 消息，根据消息类型更新战斗状态并创建攻击动画 function handleMessage(message) { if (isPaused) { return message; } let obj; try { obj = JSON.parse(message); } catch (error) { console.error('Failed to parse WebSocket message:', error); return message; } if (obj && obj.type === "new_battle") { battleState.monstersHP = obj.monsters.map((monster) => monster.currentHitpoints); battleState.monstersMP = obj.monsters.map((monster) => monster.currentManapoints); battleState.playersHP = obj.players.map((player) => player.currentHitpoints); battleState.playersMP = obj.players.map((player) => player.currentManapoints); const svg = document.getElementById('svg-container'); if (svg) { while (svg.firstChild) { svg.removeChild(svg.firstChild); } } particlePool.length = 0; } else if (obj && obj.type === "battle_updated" && battleState.monstersHP.length) { const mMap = obj.mMap; const pMap = obj.pMap; const monsterIndices = Object.keys(obj.mMap); const playerIndices = Object.keys(obj.pMap); const castMonster = detectCaster(battleState.monstersMP, mMap); const castPlayer = detectCaster(battleState.playersMP, pMap); processDamage(battleState.monstersHP, mMap, castPlayer, playerIndices, false); processDamage(battleState.playersHP, pMap, castMonster, monsterIndices, true); } return message; } // 检测网页是否从后台恢复，当网页从后台恢复时清理 SVG 容器中的元素 function addVisibilityChangeListener() { document.addEventListener('visibilitychange', function () { if (document.visibilityState === 'hidden') { isPaused = true; } else if (document.visibilityState === 'visible') { isPaused = false; const svg = document.getElementById('svg-container'); if (svg) { while (svg.firstChild) { svg.removeChild(svg.firstChild); } } document.querySelectorAll('[id^="mwi-hit-tracker-"]').forEach(el => { if (el) { el.remove(); } }); document.querySelectorAll('circle[fill^="rgba"]').forEach(el => { if (el.parentNode === svg) { el.parentNode.removeChild(el); } }); } }); } // 启动初始化函数 init(); })();