Cursor moves Component from distance

Problem IMAGE

var isGameStarted = false; // Variable pour suivre si le jeu a démarré
var isMouseDown = false;

var container, startPoint;

function initializeGame() {
    container = document.getElementById("first_div"); 
    startPoint = document.getElementById("start");
    document.getElementById("start").addEventListener("click", startGame);
    

    startPoint.addEventListener("mousedown", function (event) {
        isMouseDown = true;

        // Store the initial mouse coordinates relative to the container
        initialMouseX = event.clientX - container.offsetLeft;
        initialMouseY = event.clientY - container.offsetTop;

        // Store the initial position of the start element relative to the container
        initialStartX = startPoint.offsetLeft;
        initialStartY = startPoint.offsetTop;

        // Prevent default to avoid unwanted text selection
        event.preventDefault();
    });
}


function startGame() {
    isGameStarted = true;

    // Ajoutez un écouteur d'événements pour suivre le mouvement de la souris sur l'ensemble du document
    document.addEventListener("mousemove", moveStartPoint);

    // Changez la couleur des éléments avec la classe "walls" en vert
    var wallElements = document.getElementsByClassName("walls");
    for (var i = 0; i < wallElements.length; i++) {
        wallElements[i].style.backgroundColor = "green";
    }

    // Changez le texte de l'élément avec l'id "description"
    var descriptionElement = document.getElementById("description");
    descriptionElement.innerHTML = "<b>Trouver la sortie</b>";
}
function moveStartPoint(event) {
    if (isGameStarted && isMouseDown) {
        var mouseX = event.clientX - container.offsetLeft;
        var mouseY = event.clientY - container.offsetTop;

        // Calculate the new position of the start element directly under the cursor
        var newStartX = mouseX - initialMouseX + initialStartX;
        var newStartY = mouseY - initialMouseY + initialStartY;

        // Check boundaries to keep the start element within the walls
        var minX = 0;
        var minY = 0;
        var maxX = container.offsetWidth - startPoint.offsetWidth;
        var maxY = container.offsetHeight - startPoint.offsetHeight;

        newStartX = Math.max(minX, Math.min(newStartX, maxX));
        newStartY = Math.max(minY, Math.min(newStartY, maxY));

        // Update the position of the start element
        startPoint.style.left = newStartX + "px";
        startPoint.style.top = newStartY + "px";

        checkCollisions();
    }
}


document.getElementById("start").addEventListener("mousedown", function () {
    isMouseDown = true;
});

document.addEventListener("mouseup", function () {
    isMouseDown = false;
});

       
    

function checkCollision(element1, element2) {
    var rect1 = element1.getBoundingClientRect();
    var rect2 = element2.getBoundingClientRect();

    return (
        rect1.left < rect2.right &&
        rect1.right > rect2.left &&
        rect1.top < rect2.bottom &&
        rect1.bottom > rect2.top
    );
}

function checkCollisions() {
    var startPoint = document.getElementById("start");
    var wallElements = document.getElementsByClassName("walls");

    for (var i = 0; i < wallElements.length; i++) {
        if (checkCollision(startPoint, wallElements[i])) {
            // Collision détectée, changer la couleur en rouge et le texte
            wallElements[i].style.backgroundColor = "red";
            var descriptionElement = document.getElementById("description");
            descriptionElement.innerHTML = "<b>Désolé, vous avez perdu</b>";
            isGameStarted = false; // Arrêter le jeu en cas de collision
            document.removeEventListener("mousemove", moveStartPoint); // Supprimer l'écouteur d'événements de la souris
            break; // Sortir de la boucle, car la collision a été détectée
        }
    }
}



// Appelez la fonction d'initialisation lors du chargement de la page
window.onload = initializeGame;

Hi guys, appreciate the help. I’m expecting to move the component S (start) with my cursor and to both move n the same direction at the same time. But when I click on the component, it deplaces under the cursor !! I don’t know how to fix it. Please help. the img shows exactly what the problem is.