Show HP%, FPS, CPS, Ping, Big Shop, Transparent Shop & Clan menu. Use 75% page zoom for best results. Add Ghost mode & Hitbox. Press f2 to ON/OFF ghost mode & f4 to ON/OFF hitbox.
Version au
// ==UserScript==
// @name Sploop.io Legit Script
// @namespace http://tampermonkey.net/
// @version 1.3
// @description Show HP%, FPS, CPS, Ping, Big Shop, Transparent Shop & Clan menu. Use 75% page zoom for best results. Add Ghost mode & Hitbox. Press f2 to ON/OFF ghost mode & f4 to ON/OFF hitbox.
// @match *://sploop.io/*
// @icon https://i.postimg.cc/vBz07fcS/Screenshot-2025-08-28-090152.png
// @grant none
// @author Normalplayer part of the script belongs to Fizzixw
// ==/UserScript==
// =========//i got hitbox from fizzixww//========= //
// =========//This is a completely legal script made by me and a compilation of scripts from other authors.//========== //
// ==/UserScript==
(function() {
'use strict';
// ---------------- Better Health Bar ----------------
function lerpColor(a, b, amount) {
const ah = parseInt(a.replace(/#/g, ''), 16),
ar = ah >> 16, ag = (ah >> 8) & 0xff, ab = ah & 0xff;
const bh = parseInt(b.replace(/#/g, ''), 16),
br = bh >> 16, bg = (bh >> 8) & 0xff, bb = bh & 0xff;
const rr = ar + amount * (br - ar),
rg = ag + amount * (bg - ag),
rb = ab + amount * (bb - ab);
return '#' + (((1 << 24) + (rr << 16) + (rg << 8) + rb) | 0).toString(16).slice(1);
}
function drawHpText(ctx, text, xPos, yPos, color) {
ctx.save();
ctx.font = "20px 'Baloo Paaji'";
ctx.textAlign = "center";
ctx.textBaseline = "top";
ctx.fillStyle = color;
ctx.fillText(text, xPos, yPos);
ctx.restore();
}
const enhanceFillRect = function (fill) {
return function (x, y, width, height) {
const fullWidth = 95;
const hpPercent = Math.max(0, Math.min(1, width / fullWidth));
const percentText = `${~~(width / fullWidth * 100)}%`;
const centerX = x + fullWidth / 2;
let color;
if (this.fillStyle === "#a4cc4f") {
color = hpPercent > 0.5 ? lerpColor("#a4cc4f", "#e09f3e", (1 - hpPercent) * 2)
: lerpColor("#e09f3e", "#cc5151", (0.5 - hpPercent) * 2);
this.fillStyle = color;
drawHpText(this, percentText, centerX, y + height + 9, color);
}
if (this.fillStyle === "#cc5151") {
color = hpPercent > 0.5 ? lerpColor("#cc5151", "#e09f3e", (1 - hpPercent) * 2)
: lerpColor("#e09f3e", "#a4cc4f", (0.5 - hpPercent) * 2);
this.fillStyle = color;
drawHpText(this, percentText, centerX, y + height + 9, color);
}
fill.call(this, x, y, width, height);
};
};
const FillRect = CanvasRenderingContext2D.prototype.fillRect;
CanvasRenderingContext2D.prototype.fillRect = enhanceFillRect(FillRect);
const { fillText } = CanvasRenderingContext2D.prototype;
CanvasRenderingContext2D.prototype.fillText = function (...args) {
if (typeof args[0] === "string") {
this.lineWidth = 8;
this.strokeStyle = "#313131";
this.strokeText.apply(this, args);
}
return fillText.apply(this, args);
};
const { strokeRect } = CanvasRenderingContext2D.prototype;
CanvasRenderingContext2D.prototype.strokeRect = function(x, y, w, h) {
if ((w === 40 && h === 40) || this.strokeStyle === "#bfbfbf" || this.strokeStyle === "#dedede") {
return;
}
return strokeRect.call(this, x, y, w, h);
};
const { stroke } = CanvasRenderingContext2D.prototype;
CanvasRenderingContext2D.prototype.stroke = function(...args) {
if (this.strokeStyle === "#bfbfbf" || this.strokeStyle === "#dedede") {
return;
}
return stroke.apply(this, args);
};
// ---------------- Overlay ----------------
const overlay = document.createElement("canvas");
overlay.width = window.innerWidth;
overlay.height = window.innerHeight;
overlay.style.position = "absolute";
overlay.style.top = "0";
overlay.style.left = "0";
overlay.style.pointerEvents = "none";
overlay.style.zIndex = "9999";
document.body.appendChild(overlay);
const octx = overlay.getContext("2d");
let frameCount = 0, fpsStartTime = performance.now(), fps=0, cps=0;
let lastFrameTime = performance.now(), ping='...';
// ---------------- Ping, FPS, CPS ----------------
setInterval(()=>{
const now = performance.now();
ping = Math.round(now - lastFrameTime);
lastFrameTime = now;
}, 50);
document.addEventListener("mousedown", ()=>{
cps++; setTimeout(()=>cps--,1000);
});
// ---------------- Server Info ----------------
let serverName = "Unknown";
function updateServerName() {
const select = document.getElementById("server-select");
if (select && select.options.length > 0) {
serverName = select.options[select.selectedIndex].text;
}
}
setInterval(updateServerName, 2000);
function loop(){
const now = performance.now();
frameCount++;
if(now - fpsStartTime >= 1000){
fps = frameCount;
frameCount=0;
fpsStartTime=now;
}
octx.clearRect(0,0,overlay.width,overlay.height);
octx.save();
octx.font = "20px 'Baloo Paaji'";
octx.textBaseline = "top";
octx.strokeStyle="#313131";
octx.lineWidth=4;
// SERVER
octx.strokeText(`SERVER: ${serverName}`,10,5);
octx.fillStyle="white";
octx.fillText(`SERVER: ${serverName}`,10,5);
// FPS
octx.strokeText(`FPS: ${fps}`,10,30);
octx.fillText(`FPS: ${fps}`,10,30);
// CPS
octx.strokeText(`CPS: ${cps}`,10,55);
octx.fillText(`CPS: ${cps}`,10,55);
// PING
octx.strokeText(`PING: ${ping}ms`,10,80);
octx.fillText(`PING: ${ping}ms`,10,80);
octx.restore();
requestAnimationFrame(loop);
}
loop();
window.addEventListener("resize", ()=>{
overlay.width = window.innerWidth;
overlay.height = window.innerHeight;
});
// ---------------- Auto Toggle ----------------
['#grid-toggle','#native-friendly-indicator'].forEach(id=>{
const el = document.querySelector(id); if(el) el.click();
});
// ---------------- Ad Remove ----------------
const styleAdRemove = document.createElement('style');
styleAdRemove.type = 'text/css';
styleAdRemove.appendChild(document.createTextNode(`
#cross-promo,#bottom-wrap,#google_play,#game-left-content-main,#game-bottom-content,#game-right-content-main,#left-content,#right-content{
display:none !important;
}
`));
document.head.appendChild(styleAdRemove);
document.querySelector('#game-content').style.justifyContent='center';
document.querySelector('#main-content').style.width='auto';
// ---------------- Big Shop, Clan -------------------
(function() {
var style = document.createElement("style");
style.innerHTML = `
/* --- SHOP --- */
#hat-menu {
width: 500px !important;
height: 790px !important;
background: rgba(0,0,0,0) !important;
opacity: 0.95 !important;
border: 5px solid black !important;
box-shadow: none !important;
}
#hat_menu_content {
max-height: 780px !important;
overflow-y: auto !important;
background: transparent !important;
}
/* --- CLAN MENU --- */
#clan-menu {
background: rgba(0,0,0,0) !important; /* trong suốt */
opacity: 0.95 !important;
border: 5px solid black !important; /* vẫn giữ viền */
box-shadow: none !important;
}
#clan_menu_content {
background: transparent !important;
}
`;
document.head.appendChild(style);
})();
// ------------------ Background --------------------
window.addEventListener("load", () => {
const homepage = document.getElementById("homepage");
if (homepage) {
homepage.style.backgroundImage = "url('https://4kwallpapers.com/images/wallpapers/satoru-gojo-black-3440x1440-14684.png')";
homepage.style.backgroundSize = "cover";
homepage.style.backgroundPosition = "center";
homepage.style.backgroundRepeat = "no-repeat";
}
});
// --------------- UI --------------
const customReplacements = [
{
selector: "#logo",
image: "https://i.postimg.cc/HW8qMWLM/logo.png"
},
];
function applyCustomUI() {
customReplacements.forEach(item => {
const el = document.querySelector(item.selector);
if (el) {
if (el.tagName === "IMG") {
el.src = item.image;
} else {
el.style.backgroundImage = `url(${item.image})`;
el.style.backgroundSize = "cover";
el.style.backgroundPosition = "center";
el.style.backgroundRepeat = "no-repeat";
}
}
});
}
applyCustomUI();
setInterval(applyCustomUI, 2000);
function clearStyles(el) {
if (!el) return;
el.style.border = 'none';
el.style.outline = 'none';
el.style.boxShadow = 'none';
el.style.background = 'transparent';
el.style.backgroundColor = 'transparent';
el.style.opacity = '0.7';
el.style.setProperty('background-color', 'transparent', 'important');
el.style.setProperty('box-shadow', 'none', 'important');
el.style.setProperty('border', 'none', 'important');
el.style.setProperty('outline', 'none', 'important');
}
window.addEventListener('load', () => {
['nav-img-profile', 'nav-img-shop', 'nav-img-game', 'nav-img-skins', 'nav-img-ranking']
.forEach(id => {
const el = document.getElementById(id);
if (el) el.style.display = 'none';
});
[
'nav-profile', 'nav-game', 'nav-shop', 'nav-skins', 'nav-ranking',
'menu-nickname', 'server-select', 'play-text',
'ffa-mode', 'sandbox-mode', 'event-mode'
].forEach(id => {
const el = document.getElementById(id);
if (el) {
el.style.opacity = '0.5';
el.style.color = '#5262ab';
}
});
const nicknameInput = document.getElementById('nickname');
if (nicknameInput) {
clearStyles(nicknameInput);
nicknameInput.style.background = 'transparent';
nicknameInput.style.backgroundColor = 'transparent';
nicknameInput.style.color = '#5262ab';
nicknameInput.style.caretColor = '#ffffff';
nicknameInput.style.opacity = '0.5';
nicknameInput.style.border = 'none';
nicknameInput.style.outline = 'none';
}
const serverSelect = document.getElementById('server-select');
if (serverSelect) {
clearStyles(serverSelect);
serverSelect.style.backgroundColor = 'rgba(0, 0, 0, 0.3)';
serverSelect.style.color = '#5262ab';
serverSelect.style.opacity = '1';
serverSelect.style.border = 'none';
serverSelect.style.outline = 'none';
serverSelect.style.boxShadow = 'none';
serverSelect.style.setProperty('background-color', 'rgba(0, 0, 0, 0.3)', 'important');
}
const playBtn = document.getElementById('play-text');
clearStyles(playBtn);
if (playBtn?.parentElement) clearStyles(playBtn.parentElement);
['ffa-mode', 'sandbox-mode', 'event-mode'].forEach(id => {
const el = document.getElementById(id);
clearStyles(el);
if (el?.parentElement) clearStyles(el.parentElement);
});
const container = document.getElementById('game-middle-main');
clearStyles(container);
if (container) {
container.querySelectorAll('*').forEach(child => clearStyles(child));
}
});
// ================== Toggle States ==================
let ghostModeEnabled = false;
let hitboxEnabled = true;
document.addEventListener("keydown", e => {
switch (e.key.toLowerCase()) {
case "f2": ghostModeEnabled = !ghostModeEnabled; break;
case "f4": hitboxEnabled = !hitboxEnabled; hitboxPlayerEnabled = hitboxEnabled; break;
}
console.log(`Ghost=${ghostModeEnabled} | Hitbox=${hitboxEnabled}`);
});
// ================== Keywords (chia loại) ==================
const excludedKeywords = [
"player", "cow", "duck", "wolf", "shark",
"mammoth", "gcow", "dragon"
];
const resourceKeywords = [
"tree", "rock", "bush", "cactus", "ruby", "wood", "stone", "gold",
"wall", "spike", "windmill", "trap", "boost", "turret",
"heal_pad", "platform", "roof", "bed", "teleporter", "lootbox", "tornado",
"inv_", "ice", "cave_stone","chest"
];
// ============= Texture ============
const customTextures = {
"/img/entity/hat_1.png": "https://i.postimg.cc/pTkr1g9K/hat-1.png",
"/img/entity/hat_2.png": "https://i.postimg.cc/8kKsdggS/hat-2.png",
"/img/entity/hat_3.png": "https://i.postimg.cc/yYDxvp7S/hat-3.png",
"/img/entity/hat_4.png": "https://i.postimg.cc/pr6TPzJT/hat-4.png",
"/img/entity/hat_5.png": "https://i.postimg.cc/QxvtPgMY/hat-5.png",
"/img/entity/hat_6.png": "https://i.postimg.cc/yNHN6VcF/hat-6.png",
"/img/entity/hat_7.png": "https://i.postimg.cc/ydf6Tc5P/hat-12.png",
"/img/entity/hat_8.png": "https://i.postimg.cc/dVd1K7ks/hat-8.png",
"/img/entity/hat_9.png": "https://i.postimg.cc/26j8v2Hy/hat-9.png",
"/img/entity/hat_11.png": "https://i.postimg.cc/R0LZNjL2/hat-11.png",
"/img/entity/hat_14.png": "https://i.postimg.cc/JnmCvqS8/hat-14.png",
"/img/entity/skid_hat.png": "https://i.postimg.cc/MHv63XJ8/hat-13.png",
"/img/entity/stone_toolhammer.png": "https://i.postimg.cc/qvj2q8PG/stone-toolhammer.png",
"/img/items/g_toolhammer.png": "https://i.postimg.cc/m2PFkLZY/g-toolhammer.png",
"/img/items/d_toolhammer.png": "https://i.postimg.cc/dQ48DN2Y/d-toolhammer.png",
"/img/items/r_toolhammer.png": "https://i.postimg.cc/0jT5bqZn/r-toolhammer.png",
"/img/entity/stone_sword.png": "https://i.postimg.cc/jSVCjyFT/i-sword.png",
"/img/entity/katana.png": "https://i.postimg.cc/GtH94KRL/i-katana.png",
"/img/items/g_katana.png": "https://i.postimg.cc/KzmM8t4j/g-katana.png",
"/img/items/d_katana.png": "https://i.postimg.cc/26xnQ2gn/d-katana.png",
"/img/items/c_katana.png": "https://i.postimg.cc/rpjpg3Fy/r-katana.png",
"/img/entity/stone_axe.png": "https://i.postimg.cc/RV2Jnkqj/i-axe.png",
"/img/items/g_axe.png": "https://i.postimg.cc/L65jPkDZ/g-axe.png",
"/img/items/d_axe.png": "https://i.postimg.cc/nchGkfFr/d-axe.png",
"/img/entity/great_axe.png": "https://i.postimg.cc/SsQnhqtz/i-great-axe.png",
"/img/items/g_great_axe.png": "https://i.postimg.cc/43kcjDgz/g-great-axe.png",
"/img/items/d_great_axe.png": "https://i.postimg.cc/9Q4P6Pqj/d-great-axe.png",
"/img/entity/stone_spear.png": "https://i.postimg.cc/Xqmqd5Nw/i-spear.png",
"/img/items/g_spear.png": "https://i.postimg.cc/nrz9vZ4t/g-spear.png",
"/img/items/d_spear.png": "https://i.postimg.cc/prXzqKt4/d-spear.png",
"/img/entity/cut_spear.png": "https://i.postimg.cc/jj4DmCvb/i-cutsspear.png",
"/img/items/g_cutspear.png": "https://i.postimg.cc/Hk75ZpfY/g-cutspear.png",
"/img/items/d_cutspear.png": "https://i.postimg.cc/157c77XH/d-cutspear.png",
"/img/entity/stick.png": "https://i.postimg.cc/c1brVp7r/i-stick.png",
"/img/items/g_stick.png": "https://i.postimg.cc/Y0sGRVRL/g-stick.png",
"/img/items/d_stick.png": "https://i.postimg.cc/brCbMdyJ/d-stick.png",
"/img/items/r_stick.png": "https://i.postimg.cc/90RFmfPz/r-stick.png",
"/img/items/bat.png": "https://i.postimg.cc/DwsJQxXm/i-bat.png",
"/img/entity/g_bat.png": "https://i.postimg.cc/pdVNRZPJ/g-bat.png",
"/img/entity/d_bat.png": "https://i.postimg.cc/13rxkT1z/d-bat.png",
"/img/entity/r_bat.png": "https://i.postimg.cc/0NVTQwQR/r-bat.png",
"/img/entity/s_dagger.png": "https://i.postimg.cc/jjbWMyHc/i-dagger.png",
"/img/items/g_dagger.png": "https://i.postimg.cc/rFHxNdZZ/g-dagger.png",
"/img/items/d_dagger.png": "https://i.postimg.cc/5tLB0x37/d-dagger.png",
"/img/items/r_dagger.png": "https://i.postimg.cc/fRxySkG9/r-dagger.png",
"/img/entity/s_healing_staff.png": "https://i.postimg.cc/9MxrXSvg/i-healing-staff.png",
"/img/items/g_healing_staff.png": "https://i.postimg.cc/3wXGht8z/g-healing-staff.png",
"/img/items/d_healing_staff.png": "https://i.postimg.cc/Y971LJDp/d-healing-staff.png",
"/img/items/r_healing_staff.png": "https://i.postimg.cc/NM0jnD56/r-healing-staff.png",
"/img/entity/hammer.png": "https://i.postimg.cc/HWZyTcmW/hammer.png",
"/img/entity/g_hammer.png": "https://i.postimg.cc/G2zs89sQ/g-hammer.png",
"/img/entity/d_hammer.png": "https://i.postimg.cc/DwtQnWq4/d-hammer.png",
"/img/entity/r_hammer.png": "https://i.postimg.cc/nLpz4pxw/r-hammer.png",
"/img/entity/shield.png": "https://i.postimg.cc/wTNTn7TG/shield.png",
"/img/entity/s_musket.png": "https://i.postimg.cc/jSrdTtDd/w-musket.png",
"/img/entity/bow.png": "https://i.postimg.cc/cLM14237/wbow.png",
"/img/entity/Xbow.png": "https://i.postimg.cc/R0SS3d1k/Xbow.png",
"/img/items/scythe.png": "https://i.postimg.cc/V6HkPtC3/r-scythe.png",
};
const customCache = {};
// ================== Image Radii ==================
const imageRadii = {
// Nature //
"https://sploop.io/img/entity/tree.png?v=1923912": 90,
"https://sploop.io/img/entity/cherry_tree.png?v=1923912": 90,
"https://sploop.io/img/entity/palm_tree.png?v=1923912": 90,
"https://sploop.io/img/entity/wood_farm.png?v=1923912": 80,
"https://sploop.io/img/entity/wood_farm_cherry.png?v=1923912": 80,
"https://sploop.io/img/entity/rock.png?v=1923912": 75,
"https://sploop.io/img/entity/stone_farm.png?v=1923912":75,
"https://sploop.io/img/entity/bush.png?v=1923912": 50,
"https://sploop.io/img/entity/berry_farm.png?v=1923912": 50,
"https://sploop.io/img/entity/cactus.png?v=1923912": 50,
"https://sploop.io/img/entity/gold.png?v=1923912": 76,
"https://sploop.io/img/entity/ruby.png?v=1923912": 100,
"https://sploop.io/img/entity/tornado.png?v=1923912": 220,
"https://sploop.io/img/entity/cave_stone0.png?v=1923912": 92,
"https://sploop.io/img/entity/cave_stone1.png?v=1923912": 92,
"https://sploop.io/img/entity/cave_stone2.png?v=1923912": 58,
"https://sploop.io/img/entity/fireball.png?v=1923912": 100,
"https://sploop.io/img/entity/ice0.png?v=1923912": 92,
"https://sploop.io/img/entity/ice1.png?v=1923912": 20,
"https://sploop.io/img/entity/chest.png?v=1923912": 40,
// Player //
"https://sploop.io/img/entity/wall.png?v=1923912": 45,
"https://sploop.io/img/entity/castle_wall.png?v=1923912": 59,
"https://sploop.io/img/entity/spike.png?v=1923912": 45,
"https://sploop.io/img/entity/hard_spike.png?v=1923912": 45,
"https://sploop.io/img/entity/ice_spike.png?v=1923912": 45,
"https://sploop.io/img/entity/castle_spike.png?v=1923912": 45,
"https://sploop.io/img/entity/windmill_base.png?v=1923912": 45,
"https://sploop.io/img/entity/trap.png?v=1923912": 40,
"https://sploop.io/img/entity/boost.png?v=1923912": 40,
"https://sploop.io/img/entity/turret_base.png?v=1923912": 45,
"https://sploop.io/img/entity/heal_pad.png?v=1923912":50,
"https://sploop.io/img/entity/platform.png?v=1923912": 60,
"https://sploop.io/img/entity/roof.png?v=1923912": 50,
"https://sploop.io/img/entity/bed.png?v=1923912": 50,
"https://sploop.io/img/entity/teleporter.png?v=1923912": 35,
"https://sploop.io/img/entity/lootbox.png?v=1923912": 40,
// Animals //
"https://sploop.io/img/entity/wolf.png?v=1923912": 50,
"https://sploop.io/img/entity/duck.png?v=1923912": 20,
"https://sploop.io/img/entity/cow.png?v=1923912": 90,
"https://sploop.io/img/entity/shark.png?v=1923912": 90,
// Bosses //
"https://sploop.io/img/entity/mammoth_body.png?v=1923912": 90,
"https://sploop.io/img/entity/dragon_2_body.png?v=1923912": 100,
"https://sploop.io/img/entity/gcow.png?v=1923912": 90,
};
// ================== Hook ==================
const origDrawImage = CanvasRenderingContext2D.prototype.drawImage;
CanvasRenderingContext2D.prototype.drawImage = function (...args) {
const img = args[0];
if (!img || !img.src) return origDrawImage.apply(this, args);
const src = img.src;
if (Object.keys(customTextures).length) {
for (let key in customTextures) {
if (src.includes(key)) {
if (!customCache[key]) {
const newImg = new Image();
newImg.src = customTextures[key];
customCache[key] = newImg;
}
if (customCache[key].complete) args[0] = customCache[key];
break;
}
}
}
if (ghostModeEnabled) {
if (excludedKeywords.some(k => src.includes(k))) {
origDrawImage.apply(this, args);
} else if (resourceKeywords.some(k => src.includes(k))) {
this.save();
this.globalAlpha = 0.25;
origDrawImage.apply(this, args);
this.restore();
} else {
origDrawImage.apply(this, args);
}
} else {
origDrawImage.apply(this, args);
}
if (hitboxEnabled && args.length >= 5) {
if (resourceKeywords.some(k => src.includes(k))) {
const radius = imageRadii[src];
if (radius) {
const [x, y, w, h] = args.slice(1, 5);
this.save();
this.beginPath();
this.strokeStyle = "black";
this.lineWidth = 2;
this.arc(x + w / 2, y + h / 2, radius, 0, 2 * Math.PI);
this.stroke();
this.restore();
}
}
}
try {
if (
this.canvas?.id === 'game-canvas' &&
skinFragments.some(f => src.includes(f)) &&
args.length >= 4
) {
const transform = this.getTransform();
const [x, y, width, height] = args.slice(1, 5);
circlesToDraw.push({ x, y, width, height, transform });
}
} catch (e) {}
};
// ================== Hitbox Player (overlay) ==================
const skinFragments = [
'body0.png','body1.png','body2.png','body3.png','body4.png','body5.png','body6.png','body7.png',
'body8.png','body9.png','body10.png','body11.png','body12.png','body13.png','body14.png','body15.png',
'body16.png','body17.png','body18.png','body19.png','body20.png','body21.png','body22.png','body23.png',
'body24.png','body25.png','body26.png','body27.png','body28.png','body29.png','body30.png','body31.png',
'body32.png','body33.png','body34.png','body35.png','body36.png','body37.png','body38.png','body39.png',
'body40.png','body41.png','body42.png','body43.png','body44.png','body45.png','body46.png','body47.png',
'body48.png','body49.png','body50.png','body51.png','body52.png','body53.png','body54.png','body55.png',
'body56.png','body57.png','body58.png','body59.png','body60.png','body61.png','body62.png','body63.png',
'body64.png','body65.png','body66.png','body67.png','body68.png','body69.png','body70.png','body71.png',
'body72.png','body73.png','body74.png','body75.png','body76.png','body77.png','body78.png','body79.png',
'body80.png','body81.png','body82.png','body83.png','body84.png','body85.png','body86.png','body87.png',
'body88.png','body89.png','body90.png','body91.png','body92.png','body93.png','body94.png','body95.png',
'body96.png','body97.png','body98.png','body99.png','body100.png','body101.png','body102.png','body103.png',
'body104.png','body105.png'
];
const circleColor = 'black';
const circleLineWidth = 2;
const playerRadius = 35;
let overlayCanvas, overlayCtx;
let gameCanvas = null;
const circlesToDraw = [];
let hitboxPlayerEnabled = false;
function createOverlayCanvas() {
overlayCanvas = document.createElement('canvas');
overlayCanvas.id = 'overlay-canvas';
overlayCanvas.style.position = 'absolute';
overlayCanvas.style.pointerEvents = 'none';
overlayCanvas.style.zIndex = '999999';
overlayCanvas.style.top = '0';
overlayCanvas.style.left = '0';
document.body.appendChild(overlayCanvas);
overlayCtx = overlayCanvas.getContext('2d');
}
function syncCanvasSize() {
const rect = gameCanvas.getBoundingClientRect();
overlayCanvas.style.left = rect.left + 'px';
overlayCanvas.style.top = rect.top + 'px';
overlayCanvas.width = rect.width;
overlayCanvas.height = rect.height;
}
function initOverlay() {
gameCanvas = document.getElementById('game-canvas');
if (!gameCanvas) return setTimeout(initOverlay, 500);
createOverlayCanvas();
syncCanvasSize();
new ResizeObserver(syncCanvasSize).observe(gameCanvas);
window.addEventListener('resize', syncCanvasSize);
function loop() {
overlayCtx.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);
if (hitboxPlayerEnabled) {
for (const circle of circlesToDraw) {
overlayCtx.save();
overlayCtx.setTransform(circle.transform);
const cx = circle.x + circle.width / 2;
const cy = circle.y + circle.height / 2;
overlayCtx.beginPath();
overlayCtx.arc(cx, cy, playerRadius, 0, 2 * Math.PI);
overlayCtx.lineWidth = circleLineWidth;
overlayCtx.strokeStyle = circleColor;
overlayCtx.stroke();
overlayCtx.restore();
}
}
circlesToDraw.length = 0;
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
}
initOverlay();
})();