Conquer Online Minimap

1
i saw this code in many websites

Code: Select all

function rotatePosition(n, t) {
    var i = (n - t) * 32 + 4096,
        r = (n + t - 383) * 16 + 4096;
    return [i, r]
}

// here you get the map image element and also get the container that will handle the animation
const mapContainer = document.getElementById("mapContainer");

// Create a dynamic div with the class "seller-circle" for the seller pointer
const sellerDiv = document.createElement("div");
sellerDiv.classList.add("seller-circle");

// here you get all the table rows except the header row
const tableRows = document.querySelectorAll("#table1 tr:not(:first-child)");
// Add a mouseover event listener to each table row
tableRows.forEach(row => {
    row.addEventListener("mouseover", () => {
        // Access the row's data attributes
        const coordX1 = parseInt(row.getAttribute("data-seller-x"));
        const coordY1 = parseInt(row.getAttribute("data-seller-y"));
        var t = coordX1, i = coordY1, r = rotatePosition(t, i);
        t = r[0] * .0625;
        i = r[1] * .0625;
        var f = 512, e = 512, o = f / 512, s = e / 512;
        t *= o;
        i *= s;
        t -= 5;
        i -= 5;
        const coordX = t;
        const coordY = i;

        // Check if the values are within the valid range (0 to 512)
        if (!isNaN(coordX) && coordX >= 0 && coordX <= 512 &&
            !isNaN(coordY) && coordY >= 0 && coordY <= 512) {
            // Values are valid, you can use them here
            //console.log("Coordinates: X =", coordX, "Y =", coordY);

            // Set position for the "seller" circle relative to the game map
            sellerDiv.style.left = `${coordX}px`;
            sellerDiv.style.top = `${coordY}px`;

            // Show the "seller" pointer
            sellerDiv.style.display = "block";
            mapContainer.appendChild(sellerDiv);

        } else {
            // Values are not valid, hide the "seller" circle
            console.log("Invalid coordinates.");
        }
    });

    // Add a mouseout event listener to reset the row's style when the mouse leaves
    row.addEventListener("mouseout", () => {
        sellerDiv.style.display = "none"; // Reset to default
    });
});
this is for shown x,y in image

but this only for market, i know "383" is the floor bounds in map , and "4096" it's image size that i want to show * 8 i think like (512*8) = 4096, but i don't know "32"and "16" from where?

anyone can help?

Conquer Online Minimap

2
I'm not super knowledgeable when it comes to client stuff, nor have I tried doing rotations in Conquer Online (so super out of my element), but isn't a tile in Conquer Online 16 pixels tall and 32 pixels across?
Interested in my work?

If you wanna learn more about me and my projects: visit my portfolio website. There, you can find my free, open-source work and articles about game development. Due to contractual restrictions: I am not available for job requests or volunteer work.

About Me | GitLab Profile | Website

Conquer Online Minimap

3
Spirited wrote: Mon Jun 03, 2024 5:42 am I'm not super knowledgeable when it comes to client stuff, nor have I tried doing rotations in Conquer Online (so super out of my element), but isn't a tile in Conquer Online 16 pixels tall and 32 pixels across?
Thanks for replying, I tried it on Twin City, this number 383 I changed to 972, this number 32 I changed to 9.7, and this number 16 I changed to 7.3, and it worked well, but I still do not know where this number came from, even though Twin City is larger than the market and with The inferred numbers are lower, hahahaha

Conquer Online Minimap

4
The map coordinates is a representation of the cells on the drawn map.
the map is made of a "puzzle" which has a specific width and height and is made up from images with a specific pixel width/height typically 256
so
the real width is puzzle width * pixel width (usually 256)
real height is puzzle height * pixel height (should the same as pixel width)
map width is real width / cell width (64)
map height is real height / cell height (32)

you need to also take into account the fact that the image is a scaled down version of the map
scaleX = imageWidth / realWidth
scaleY = imageHeight / realHeight

there is more calculations that need to be done to convert from map coordinates to a coordinate on a minimap image but those should be all the variables you will need