Canvas Smooth Drag with Button (No Style)

在指定頁面新增按鈕,點擊時模擬平滑滑鼠拖曳(無 CSS 樣式)

当前为 2025-04-24 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Canvas Smooth Drag with Button (No Style)
  3. // @namespace http://tampermonkey.net/
  4. // @version 2.0
  5. // @description 在指定頁面新增按鈕,點擊時模擬平滑滑鼠拖曳(無 CSS 樣式)
  6. // @author You
  7. // @match https://en.gamesaien.com/game/fruit_box/*
  8. // @grant none
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. const COLS = 17;
  13. const ROWS = 10;
  14.  
  15. const GRID_LEFT = 70;
  16. const GRID_TOP = 75;
  17. const GRID_RIGHT = 600;
  18. const GRID_BOTTOM = 370;
  19.  
  20. const GRID_WIDTH = (GRID_RIGHT - GRID_LEFT) / (COLS - 1); // 每列間距
  21. const GRID_HEIGHT = (GRID_BOTTOM - GRID_TOP) / (ROWS - 1); // 每行間距
  22.  
  23. (function () {
  24. 'use strict';
  25.  
  26. const startX = 200;
  27. const startY = 300;
  28. const endX = 800;
  29. const endY = 500;
  30.  
  31. const waitForElements = setInterval(() => {
  32. const canvas = document.querySelector('canvas#canvas');
  33. const container = document.querySelector('div#animation_container');
  34.  
  35. if (canvas && container && container.parentElement) {
  36. clearInterval(waitForElements);
  37. injectButton(container.parentElement, canvas);
  38. addCanvasClickLogger(canvas);
  39. }
  40. }, 500);
  41.  
  42. function injectButton(parent, canvas) {
  43. const btn = document.createElement('button');
  44. btn.textContent = 'TEST1';
  45. btn.id = 'tm_test1_btn';
  46. parent.appendChild(btn);
  47.  
  48. btn.addEventListener('click', async () => {
  49. console.log('[TEST1] 執行自動圈選');
  50.  
  51.  
  52.  
  53. // 2X1
  54. for (let row = 0; row < 10; row++) {
  55. for (let col = 0; col < 16; col++) {
  56. let area = getGridRangeCorners(col, row, col + 2, row + 1);
  57. await simulateSmoothDrag(canvas, area.x1, area.y1, area.x2, area.y2);
  58. await new Promise(resolve => setTimeout(resolve, 5));
  59. }
  60. }
  61.  
  62. // 1x2
  63. for (let col = 0; col < 17; col++) {
  64. for (let row = 0; row < 9; row++) {
  65. let area = getGridRangeCorners(col, row, col + 1, row + 2);
  66. await simulateSmoothDrag(canvas, area.x1, area.y1, area.x2, area.y2);
  67. await new Promise(resolve => setTimeout(resolve, 5));
  68. }
  69. }
  70.  
  71. // 3x1
  72. for (let row = 0; row < 10; row++) {
  73. for (let col = 0; col < 15; col++) {
  74. let area = getGridRangeCorners(col, row, col + 3, row + 1);
  75. await simulateSmoothDrag(canvas, area.x1, area.y1, area.x2, area.y2);
  76. await new Promise(resolve => setTimeout(resolve, 5));
  77. }
  78. }
  79.  
  80. // 1x3
  81. for (let row = 0; row < 8; row++) {
  82. for (let col = 0; col < 17; col++) {
  83. let area = getGridRangeCorners(col, row, col + 1, row + 3);
  84. await simulateSmoothDrag(canvas, area.x1, area.y1, area.x2, area.y2);
  85. await new Promise(resolve => setTimeout(resolve, 5));
  86. }
  87. }
  88.  
  89. // 2x2
  90. for (let row = 0; row < 9; row++) {
  91. for (let col = 0; col < 16; col++) {
  92. let area = getGridRangeCorners(col, row, col + 2, row + 2);
  93. await simulateSmoothDrag(canvas, area.x1, area.y1, area.x2, area.y2);
  94. await new Promise(resolve => setTimeout(resolve, 5));
  95. }
  96. }
  97.  
  98. // 4x1
  99. for (let row = 0; row < 10; row++) {
  100. for (let col = 0; col < 14; col++) {
  101. let area = getGridRangeCorners(col, row, col + 4, row + 1);
  102. await simulateSmoothDrag(canvas, area.x1, area.y1, area.x2, area.y2);
  103. await new Promise(resolve => setTimeout(resolve, 5));
  104. }
  105. }
  106.  
  107. // 1x4
  108. for (let row = 0; row < 7; row++) {
  109. for (let col = 0; col < 17; col++) {
  110. let area = getGridRangeCorners(col, row, col + 1, row + 4);
  111. await simulateSmoothDrag(canvas, area.x1, area.y1, area.x2, area.y2);
  112. await new Promise(resolve => setTimeout(resolve, 5));
  113. }
  114. }
  115.  
  116. // 5x1
  117. for (let row = 0; row < 10; row++) {
  118. for (let col = 0; col < 13; col++) {
  119. let area = getGridRangeCorners(col, row, col + 5, row + 1);
  120. await simulateSmoothDrag(canvas, area.x1, area.y1, area.x2, area.y2);
  121. await new Promise(resolve => setTimeout(resolve, 5));
  122. }
  123. }
  124.  
  125. // 1x5
  126. for (let row = 0; row < 6; row++) {
  127. for (let col = 0; col < 17; col++) {
  128. let area = getGridRangeCorners(col, row, col + 1, row + 5);
  129. await simulateSmoothDrag(canvas, area.x1, area.y1, area.x2, area.y2);
  130. await new Promise(resolve => setTimeout(resolve, 5));
  131. }
  132. }
  133.  
  134. // 3x2
  135. for (let row = 0; row < 9; row++) {
  136. for (let col = 0; col < 15; col++) {
  137. let area = getGridRangeCorners(col, row, col + 3, row + 2);
  138. await simulateSmoothDrag(canvas, area.x1, area.y1, area.x2, area.y2);
  139. await new Promise(resolve => setTimeout(resolve, 5));
  140. }
  141. }
  142.  
  143. // 2x3
  144. for (let row = 0; row < 8; row++) {
  145. for (let col = 0; col < 16; col++) {
  146. let area = getGridRangeCorners(col, row, col + 2, row + 3);
  147. await simulateSmoothDrag(canvas, area.x1, area.y1, area.x2, area.y2);
  148. await new Promise(resolve => setTimeout(resolve, 5));
  149. }
  150. }
  151.  
  152. // 6x1
  153. for (let row = 0; row < 10; row++) {
  154. for (let col = 0; col < 12; col++) {
  155. let area = getGridRangeCorners(col, row, col + 6, row + 1);
  156. await simulateSmoothDrag(canvas, area.x1, area.y1, area.x2, area.y2);
  157. await new Promise(resolve => setTimeout(resolve, 5));
  158. }
  159. }
  160.  
  161. // 1x6
  162. for (let row = 0; row < 5; row++) {
  163. for (let col = 0; col < 17; col++) {
  164. let area = getGridRangeCorners(col, row, col + 1, row + 6);
  165. await simulateSmoothDrag(canvas, area.x1, area.y1, area.x2, area.y2);
  166. await new Promise(resolve => setTimeout(resolve, 5));
  167. }
  168. }
  169.  
  170.  
  171.  
  172. // 第一列校準
  173. // let r1 = getGridRangeCorners(0, 0, 1, 10);
  174. // simulateSmoothDrag(canvas, r1.x1, r1.y1, r1.x2, r1.y2);
  175. // for (let i = 1; i < 10; i++) {
  176. // await new Promise(resolve => setTimeout(resolve, 250));
  177. // let r2 = getGridRangeCorners(0, 0, 1, i);
  178. // simulateSmoothDrag(canvas, r2.x1, r2.y1, r2.x2, r2.y2);
  179. // }
  180.  
  181. // 最後一列校準
  182. // let r1 = getGridRangeCorners(16, 0, 17, 10);
  183. // simulateSmoothDrag(canvas, r1.x1, r1.y1, r1.x2, r1.y2);
  184. // for (let i = 1; i < 10; i++) {
  185. // await new Promise(resolve => setTimeout(resolve, 1000));
  186. // let r2 = getGridRangeCorners(16, 0, 17, i);
  187. // simulateSmoothDrag(canvas, r2.x1, r2.y1, r2.x2, r2.y2);
  188. // }
  189.  
  190. // 第一行校準
  191. // let r1 = getGridRangeCorners(0, 0, 17, 1);
  192. // simulateSmoothDrag(canvas, r1.x1, r1.y1, r1.x2, r1.y2);
  193. // for (let i = 1; i < 17; i++) {
  194. // await new Promise(resolve => setTimeout(resolve, 1000));
  195. // let r2 = getGridRangeCorners(0, 0, i, 1);
  196. // simulateSmoothDrag(canvas, r2.x1, r2.y1, r2.x2, r2.y2);
  197. // }
  198.  
  199. // 最後一行校準
  200. // let r1 = getGridRangeCorners(0, 9, 17, 10);
  201. // simulateSmoothDrag(canvas, r1.x1, r1.y1, r1.x2, r1.y2);
  202. // for (let i = 1; i < 17; i++) {
  203. // await new Promise(resolve => setTimeout(resolve, 1000));
  204. // let r2 = getGridRangeCorners(0, 9, i, 10);
  205. // simulateSmoothDrag(canvas, r2.x1, r2.y1, r2.x2, r2.y2);
  206. // }
  207. });
  208. }
  209.  
  210. function getGridCenter(col, row) {
  211. return {
  212. x: GRID_LEFT + col * GRID_WIDTH,
  213. y: GRID_TOP + row * GRID_HEIGHT
  214. };
  215. }
  216.  
  217. function simulateSmoothDrag(canvas, startX, startY, endX, endY) {
  218. const steps = 1;
  219. const interval = 5;
  220. const rect = canvas.getBoundingClientRect();
  221.  
  222. const getClientCoords = (x, y) => ({
  223. clientX: rect.left + x,
  224. clientY: rect.top + y
  225. });
  226.  
  227. const dispatch = (type, x, y) => {
  228. const event = new MouseEvent(type, {
  229. bubbles: true,
  230. cancelable: true,
  231. view: window,
  232. clientX: x,
  233. clientY: y,
  234. buttons: 1
  235. });
  236. canvas.dispatchEvent(event);
  237. };
  238.  
  239. return new Promise(resolve => {
  240. // 1. 按下滑鼠
  241. const start = getClientCoords(startX, startY);
  242. dispatch('mousemove', start.clientX, start.clientY);
  243. dispatch('mousedown', start.clientX, start.clientY);
  244.  
  245. // 2. 平滑拖曳
  246. const deltaX = (endX - startX) / steps;
  247. const deltaY = (endY - startY) / steps;
  248. let i = 0;
  249.  
  250. const moveStep = () => {
  251. if (i <= steps) {
  252. const cx = startX + deltaX * i;
  253. const cy = startY + deltaY * i;
  254. const pos = getClientCoords(cx, cy);
  255. dispatch('mousemove', pos.clientX, pos.clientY);
  256. i++;
  257. setTimeout(moveStep, interval);
  258. } else {
  259. // 3. 到達終點後抖動
  260. const base = getClientCoords(endX, endY);
  261. let j = 0;
  262. const shake = () => {
  263. const offset = (j % 2 === 0) ? 1 : -1;
  264. dispatch('mousemove', base.clientX + offset, base.clientY);
  265. j++;
  266. if (j < 3) {
  267. setTimeout(shake, interval);
  268. } else {
  269. // 4. 抖動結束,放開滑鼠並 resolve
  270. dispatch('mouseup', base.clientX, base.clientY);
  271. console.log('[Tampermonkey] 拖曳完成');
  272. resolve();
  273. }
  274. };
  275. shake();
  276. }
  277. };
  278.  
  279. moveStep();
  280. });
  281. }
  282.  
  283. function getGridRangeCorners(col1, row1, col2, row2) {
  284. const start = getGridCenter(col1, row1);
  285. const end = getGridCenter(col2, row2);
  286. return {
  287. x1: Math.min(start.x, end.x),
  288. y1: Math.min(start.y, end.y),
  289. x2: Math.max(start.x, end.x),
  290. y2: Math.max(start.y, end.y)
  291. };
  292. }
  293. })();
  294.  
  295. // 監聽 canvas 點擊,印出座標
  296. function addCanvasClickLogger(canvas) {
  297. canvas.addEventListener('click', function (event) {
  298. const x = event.offsetX;
  299. const y = event.offsetY;
  300. console.log(`[Canvas 點擊] offsetX: ${x}, offsetY: ${y}`);
  301. });
  302. }

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址