☰

Diep.io Mod Menu

Loop upgrade custom builds, render aim line, render factory guide circle.

当前为 2024-09-24 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Diep.io Mod Menu
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.1
  5. // @homepage     https://github.com/x032205/diep_mod_menu
  6. // @description  Loop upgrade custom builds, render aim line, render factory guide circle.
  7. // @author       https://github.com/x032205
  8. // @match        https://diep.io/
  9. // @grant        none
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. const presets = [
  14.   {
  15.     name: "Rammer (triangles & annihilator) [ 5 / 7 / 7 / 0 / 0 / 0 / 7 / 7 ]",
  16.     build: "123123123123123888882382387777777",
  17.   },
  18.   {
  19.     name: "Bullet Umbrella (triangles) [ 0 / 1 / 2 / 2 / 7 / 7 / 7 / 7 ]",
  20.     build: "567445675675675675675678888888233",
  21.   },
  22.   {
  23.     name: "Glass Cannon (spreadshot, factory, etc) [ 0 / 0 / 0 / 6 / 7 / 7 / 7 / 6 ]",
  24.     build: "567456747654765476547566888821212",
  25.   },
  26.   {
  27.     name: "Balanced (overlord, fighter) [ 3 / 3 / 3 / 5 / 5 / 5 / 5 / 4 ]",
  28.     build: "567445674567456745671238123812388",
  29.   },
  30.   {
  31.     name: "The 1M Overlord [ 2 / 3 / 0 / 7 / 7 / 7 / 0 / 7 ]",
  32.     build: "564456456456456888456456888822112",
  33.   },
  34.   {
  35.     name: "Balanced Factory [ 2 / 3 / 0 / 5 / 6 / 7 / 6 / 4 ]",
  36.     build: "567456747654765476547566888821212",
  37.   },
  38.   {
  39.     name: "Armor (penta, rocketeer, trappers) [ 0 / 6 / 6 / 0 / 7 / 7 / 7 / 0 ]",
  40.     build: "567567567567567567567232323232323",
  41.   },
  42. ];
  43.  
  44. (function () {
  45.   "use strict";
  46.  
  47.   const backdrop = document.createElement("div");
  48.   backdrop.id = "backdrop";
  49.  
  50.   const toggle_text = document.createElement("code");
  51.   toggle_text.classList.add("watermark");
  52.   toggle_text.textContent = "Diep Mod Menu | Press [R] to toggle";
  53.  
  54.   backdrop.appendChild(toggle_text);
  55.  
  56.   const panel = document.createElement("div");
  57.   panel.id = "panel";
  58.  
  59.   const side_panel = document.createElement("nav");
  60.   panel.appendChild(side_panel);
  61.  
  62.   const separator = document.createElement("div");
  63.   separator.classList.add("separator");
  64.   panel.appendChild(separator);
  65.  
  66.   const display_panel = document.createElement("div");
  67.   display_panel.classList.add("inner_panel");
  68.   panel.appendChild(display_panel);
  69.  
  70.   const view_line = document.createElement("div");
  71.   view_line.classList.add("view-option");
  72.  
  73.   const view_line_text = document.createElement("span");
  74.   view_line_text.textContent = "Aim line";
  75.  
  76.   const view_line_label = document.createElement("label");
  77.   view_line_label.classList.add("switch");
  78.  
  79.   const view_line_toggle = document.createElement("input");
  80.   view_line_toggle.setAttribute("type", "checkbox");
  81.   view_line_label.appendChild(view_line_toggle);
  82.  
  83.   const view_line_div = document.createElement("div");
  84.   view_line_label.appendChild(view_line_div);
  85.   view_line.appendChild(view_line_label);
  86.   view_line.appendChild(view_line_text);
  87.  
  88.   const view_circle = document.createElement("div");
  89.   view_circle.classList.add("view-option");
  90.  
  91.   const view_circle_text = document.createElement("span");
  92.   view_circle_text.textContent = "Factory circle";
  93.  
  94.   const view_circle_label = document.createElement("label");
  95.   view_circle_label.classList.add("switch");
  96.  
  97.   const view_circle_toggle = document.createElement("input");
  98.   view_circle_toggle.setAttribute("type", "checkbox");
  99.   view_circle_label.appendChild(view_circle_toggle);
  100.  
  101.   const view_circle_div = document.createElement("div");
  102.   view_circle_label.appendChild(view_circle_div);
  103.   view_circle.appendChild(view_circle_label);
  104.   view_circle.appendChild(view_circle_text);
  105.  
  106.   // Visual Tab
  107.   const visual_tab = document.createElement("button");
  108.   visual_tab.classList.add("tab_button", "active");
  109.   side_panel.appendChild(visual_tab);
  110.  
  111.   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  112.   svg.setAttribute("width", "32");
  113.   svg.setAttribute("height", "32");
  114.   svg.setAttribute("viewBox", "0 0 24 24");
  115.   svg.setAttribute("fill", "none");
  116.   svg.setAttribute("stroke", "#BBBBBB");
  117.   svg.setAttribute("stroke-width", "2.5");
  118.   svg.setAttribute("stroke-linecap", "round");
  119.   svg.setAttribute("stroke-linejoin", "round");
  120.  
  121.   svg.innerHTML =
  122.     '<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/>';
  123.  
  124.   visual_tab.appendChild(svg);
  125.  
  126.   visual_tab.onclick = function () {
  127.     display_panel.innerHTML = ``;
  128.     display_panel.appendChild(view_line);
  129.     display_panel.appendChild(view_circle);
  130.     setActiveTab(visual_tab);
  131.   };
  132.  
  133.   const au_label = document.createElement("span");
  134.   au_label.classList.add("subheading");
  135.   au_label.textContent = "Custom Build";
  136.  
  137.   const au_input = document.createElement("input");
  138.   au_input.ariaReadOnly = "true";
  139.   au_input.setAttribute("type", "number");
  140.   au_input.classList.add("custom-input");
  141.   au_input.placeholder = "000000000000000000000000000000000";
  142.   au_input.value = localStorage.getItem("diepModMenuBuild") || "";
  143.  
  144.   au_input.addEventListener("input", function () {
  145.     if (au_input.value.length > 33) {
  146.       au_input.value = au_input.value.slice(0, 33);
  147.     }
  148.     localStorage.setItem("mm_build", au_input.value);
  149.   });
  150.  
  151.   const au_autoset = document.createElement("div");
  152.   au_autoset.classList.add("view-option");
  153.  
  154.   const au_autoset_text = document.createElement("span");
  155.   au_autoset_text.textContent = "Auto-build enabled";
  156.  
  157.   const au_autoset_label = document.createElement("label");
  158.   au_autoset_label.classList.add("switch");
  159.  
  160.   const au_autoset_toggle = document.createElement("input");
  161.   au_autoset_toggle.setAttribute("type", "checkbox");
  162.   au_autoset_label.appendChild(au_autoset_toggle);
  163.  
  164.   const au_autoset_div = document.createElement("div");
  165.   au_autoset_label.appendChild(au_autoset_div);
  166.   au_autoset.appendChild(au_autoset_label);
  167.   au_autoset.appendChild(au_autoset_text);
  168.  
  169.   // Presets
  170.   const au_presets_label = document.createElement("span");
  171.   au_presets_label.classList.add("subheading");
  172.   au_presets_label.textContent = "Presets";
  173.  
  174.   const preset_panel = document.createElement("div");
  175.   preset_panel.classList.add("preset-panel");
  176.  
  177.   presets.forEach((preset) => {
  178.     const presetButton = document.createElement("button");
  179.     presetButton.textContent = preset.name;
  180.     presetButton.classList.add("button");
  181.     presetButton.onclick = function () {
  182.       au_input.value = preset.build;
  183.       localStorage.setItem("diepModMenuBuild", preset.build);
  184.       input.execute("game_stats_build " + preset.build);
  185.     };
  186.     preset_panel.appendChild(presetButton);
  187.   });
  188.  
  189.   // Auto Upgrade Tab
  190.   const auto_upgrades_tab = document.createElement("button");
  191.   auto_upgrades_tab.classList.add("tab_button");
  192.   side_panel.appendChild(auto_upgrades_tab);
  193.  
  194.   const au_svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  195.   au_svg.setAttribute("width", "32");
  196.   au_svg.setAttribute("height", "32");
  197.   au_svg.setAttribute("viewBox", "0 0 24 24");
  198.   au_svg.setAttribute("fill", "none");
  199.   au_svg.setAttribute("stroke", "#BBBBBB");
  200.   au_svg.setAttribute("stroke-width", "2.5");
  201.   au_svg.setAttribute("stroke-linecap", "round");
  202.   au_svg.setAttribute("stroke-linejoin", "round");
  203.  
  204.   au_svg.innerHTML =
  205.     '<path d="M12 2a10 10 0 0 1 7.38 16.75"/><path d="m16 12-4-4-4 4"/><path d="M12 16V8"/><path d="M2.5 8.875a10 10 0 0 0-.5 3"/><path d="M2.83 16a10 10 0 0 0 2.43 3.4"/><path d="M4.636 5.235a10 10 0 0 1 .891-.857"/><path d="M8.644 21.42a10 10 0 0 0 7.631-.38"/>';
  206.  
  207.   auto_upgrades_tab.appendChild(au_svg);
  208.  
  209.   auto_upgrades_tab.onclick = function () {
  210.     display_panel.innerHTML = ``;
  211.     display_panel.appendChild(au_label);
  212.     display_panel.appendChild(au_input);
  213.     display_panel.appendChild(au_autoset);
  214.     display_panel.appendChild(au_presets_label);
  215.     display_panel.appendChild(preset_panel);
  216.     setActiveTab(auto_upgrades_tab);
  217.   };
  218.  
  219.   const credits_tab = document.createElement("button");
  220.   credits_tab.classList.add("tab_button");
  221.   side_panel.appendChild(credits_tab);
  222.  
  223.   const credit_svg = document.createElementNS(
  224.     "http://www.w3.org/2000/svg",
  225.     "svg",
  226.   );
  227.   credit_svg.setAttribute("width", "32");
  228.   credit_svg.setAttribute("height", "32");
  229.   credit_svg.setAttribute("viewBox", "0 0 24 24");
  230.   credit_svg.setAttribute("fill", "none");
  231.   credit_svg.setAttribute("stroke", "#BBBBBB");
  232.   credit_svg.setAttribute("stroke-width", "2.5");
  233.   credit_svg.setAttribute("stroke-linecap", "round");
  234.   credit_svg.setAttribute("stroke-linejoin", "round");
  235.  
  236.   credit_svg.innerHTML =
  237.     '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>';
  238.  
  239.   credits_tab.appendChild(credit_svg);
  240.  
  241.   credits_tab.onclick = function () {
  242.     display_panel.innerHTML = `<span><span class="text-muted">Discord:</span> <code>@someplace</code></span>
  243. <span><span class="text-muted">Github:</span> <code>@x032205</code></span>`;
  244.     setActiveTab(credits_tab);
  245.   };
  246.  
  247.   const style = document.createElement("style");
  248.   style.textContent = `
  249.     * {
  250.       font-family: 'Inter', sans-serif;
  251.       color: #EEEEEE;
  252.       font-size: 16px;
  253.     }
  254.  
  255.     code { font-family: monospace; }
  256.  
  257.     #panel {
  258.       display: flex;
  259.       flex-direction: row;
  260.       max-width: 600px;
  261.       max-height: 400px;
  262.       width: 100%;
  263.       height: 100%;
  264.       padding: 12px;
  265.       position: absolute;
  266.       top: 50%;
  267.       left: 50%;
  268.       transform: translate(-50%, -50%);
  269.       gap: 6px;
  270.       background: hsla(0, 0%, 10%, 0.7);
  271.       backdrop-filter: blur(7px);
  272.       -webkit-backdrop-filter: blur(7px);
  273.       border: 1px solid hsla(0, 0%, 100%, 0.1);
  274.       border-radius: 8px;
  275.       z-index: 10;
  276.     }
  277.  
  278.     .separator {
  279.       width: 1px;
  280.       height: 100%;
  281.       background-color: hsla(0, 0%, 100%, 0.1);
  282.     }
  283.  
  284.     .switch {
  285.       display: inline-block;
  286.       font-size: 20px;
  287.       height: 1em;
  288.       width: 2em;
  289.       background: rgb(50, 50, 50);
  290.       border-radius: 1em;
  291.       margin-right: 10px;
  292.       cursor: pointer;
  293.     }
  294.  
  295.     .switch input {
  296.       position: absolute;
  297.       opacity: 0;
  298.       cursor: pointer;
  299.     }
  300.  
  301.     .switch div {
  302.       font-size: 20px;
  303.       height: 1em;
  304.       width: 1em;
  305.       border-radius: 1em;
  306.       background: rgb(100, 100, 100);
  307.       transition: all 100ms;
  308.       cursor: pointer;
  309.     }
  310.  
  311.     .switch input:checked + div {
  312.       transform: translate3d(100%, 0, 0);
  313.       background: #EEEEEE;
  314.     }
  315.  
  316.     nav {
  317.       display: flex;
  318.       flex-direction: column;
  319.       gap: 6px;
  320.     }
  321.  
  322.     .inner_panel {
  323.       display: flex;
  324.       flex-direction: column;
  325.       gap: 6px;
  326.       padding: 4px;
  327.       width: 100%;
  328.       margin-left: 4px;
  329.     }
  330.  
  331.     .tab_button {
  332.       display: flex;
  333.       width: 48px;
  334.       height: 48px;
  335.       justify-content: center;
  336.       align-items: center;
  337.       background: hsla(0, 0%, 20%, 0.5);
  338.       border-radius: 4px;
  339.       border: none;
  340.       transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1);
  341.     }
  342.  
  343.     .preset-panel {
  344.       display: flex;
  345.       flex-wrap: wrap;
  346.       gap: 6px;
  347.     }
  348.  
  349.     .button {
  350.       background: hsla(0, 0%, 20%, 0.5);
  351.       border: none;
  352.       border-radius: 4px;
  353.       padding: 6px 12px;
  354.       cursor: pointer;
  355.       transition: background 0.2s;
  356.     }
  357.  
  358.     .button:hover {
  359.       background: hsla(0, 0%, 30%, 0.5);
  360.     }
  361.  
  362.     .tab_button:hover,
  363.     .tab_button.active {
  364.       background: hsla(0, 0%, 40%, 0.5);
  365.     }
  366.  
  367.     #backdrop {
  368.       position: fixed;
  369.       top: 0;
  370.       left: 0;
  371.       width: 100%;
  372.       height: 100%;
  373.       background-color: rgba(0, 0, 0, 0.5);
  374.       z-index: 9;
  375.       backdrop-filter: blur(5px);
  376.       -webkit-backdrop-filter: blur(5px);
  377.     }
  378.  
  379.     .watermark {
  380.       position: fixed;
  381.       top: 8px;
  382.       left: 50%;
  383.       transform: translateX(-50%);
  384.     }
  385.  
  386.     .subheading { font-weight: 600; }
  387.  
  388.     .view-option {
  389.       text-align: left;
  390.       align-items: center;
  391.       height: 28px;
  392.       display: flex;
  393.     }
  394.  
  395.     .custom-input {
  396.       background: hsla(0, 0%, 10%, 0.7);
  397.       border: 1px solid hsla(0, 0%, 100%, 0.1);
  398.       border-radius: 4px;
  399.       padding: 6px;
  400.       outline: none;
  401.     }
  402.  
  403.     .text-muted { color: #BBBBBB; }
  404.  
  405.     input::-webkit-outer-spin-button,
  406.     input::-webkit-inner-spin-button {
  407.       -webkit-appearance: none;
  408.       margin: 0;
  409.     }
  410.  
  411.     input[type=number] {
  412.       -moz-appearance: textfield;
  413.     }
  414.   `;
  415.  
  416.   backdrop.appendChild(panel);
  417.   document.body.appendChild(backdrop);
  418.   document.head.appendChild(style);
  419.  
  420.   function toggleDisplay(elementId) {
  421.     const element = document.getElementById(elementId);
  422.     const backdrop = document.getElementById("backdrop");
  423.     const isHidden = element.style.display === "none";
  424.     element.style.display = isHidden ? "block" : "none";
  425.     backdrop.style.display = isHidden ? "block" : "none";
  426.   }
  427.  
  428.   function setActiveTab(activeTab) {
  429.     [visual_tab, auto_upgrades_tab, credits_tab].forEach((tab) =>
  430.       tab.classList.remove("active"),
  431.     );
  432.     activeTab.classList.add("active");
  433.   }
  434.  
  435.   let X, Y, x, y;
  436.   let Z = false;
  437.   let radius = [];
  438.  
  439.   document.body.onkeyup = function (ctx) {
  440.     if (ctx.keyCode === 82) {
  441.       toggleDisplay("backdrop");
  442.     } else if (document.activeElement === au_input) {
  443.       const key = parseInt(ctx.key);
  444.       if (key >= 1 && key <= 8) {
  445.         au_input.value += ctx.key;
  446.         localStorage.setItem("diepModMenuBuild", au_input.value);
  447.       } else if (ctx.keyCode === 8) {
  448.         au_input.value = au_input.value.slice(0, -1);
  449.         localStorage.setItem("diepModMenuBuild", au_input.value);
  450.       }
  451.     }
  452.   };
  453.  
  454.   document.onmousemove = (event) => {
  455.     x = event.clientX;
  456.     y = event.clientY;
  457.   };
  458.   document.onmousedown = (e) => {
  459.     if (e.button === 2) Z = true;
  460.   };
  461.   document.onmouseup = (e) => {
  462.     if (e.button === 2) Z = false;
  463.   };
  464.  
  465.   const canvas = document.createElement("canvas");
  466.   canvas.style.zIndex = "11";
  467.   canvas.style.position = "absolute";
  468.   canvas.style.top = "0px";
  469.   canvas.style.left = "0px";
  470.   canvas.style.pointerEvents = "none";
  471.  
  472.   function getRadius() {
  473.     X = window.innerWidth / 2;
  474.     Y = window.innerHeight / 2;
  475.     canvas.width = window.innerWidth;
  476.     canvas.height = window.innerHeight;
  477.  
  478.     radius = [
  479.       window.innerWidth * 0.17681239669,
  480.       window.innerWidth * 0.06545454545,
  481.       window.innerWidth * 0.16751239669,
  482.       window.innerWidth * 0.36,
  483.     ];
  484.   }
  485.  
  486.   getRadius();
  487.   window.addEventListener("resize", getRadius);
  488.  
  489.   document.body.appendChild(canvas);
  490.   const ctx = canvas.getContext("2d");
  491.  
  492.   function draw() {
  493.     ctx.clearRect(0, 0, canvas.width, canvas.height);
  494.  
  495.     if (view_line_toggle.checked) {
  496.       ctx.beginPath();
  497.       ctx.moveTo(X, Y);
  498.       ctx.lineTo(x, y);
  499.       ctx.lineWidth = 50;
  500.       ctx.strokeStyle = "rgba(0, 0, 0, 0.05)";
  501.       ctx.stroke();
  502.  
  503.       ctx.beginPath();
  504.       ctx.moveTo(X, Y);
  505.       ctx.lineTo(x, y);
  506.       ctx.lineWidth = 2;
  507.       ctx.strokeStyle = "rgba(0, 0, 0, 0.7)";
  508.       ctx.stroke();
  509.     }
  510.  
  511.     if (view_circle_toggle.checked) {
  512.       ctx.lineWidth = 2;
  513.       ctx.strokeStyle = "rgba(0, 0, 0, 0.7)";
  514.  
  515.       ctx.beginPath();
  516.       ctx.arc(X, Y, radius[3], 0, 2 * Math.PI);
  517.       ctx.stroke();
  518.  
  519.       ctx.beginPath();
  520.       ctx.arc(x, y, radius[1], 0, 2 * Math.PI);
  521.       ctx.stroke();
  522.  
  523.       ctx.beginPath();
  524.       ctx.arc(x, y, Z ? radius[0] : radius[2], 0, 2 * Math.PI);
  525.       ctx.stroke();
  526.     }
  527.  
  528.     if (au_autoset_toggle.checked) {
  529.       input.execute("game_stats_build " + au_input.value);
  530.     }
  531.     requestAnimationFrame(draw);
  532.   }
  533.   draw();
  534.  
  535.   visual_tab.click();
  536. })();