Cursor moves component from distance I want the cursor and the component S to move in the same directions inside the walls while the cursor is above S

Issue

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

function initializeGame() {
    // Votre logique d'initialisation du jeu ici
    document.getElementById("start").addEventListener("click", startGame);
}

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) {
        // Obtenez la position de la souris par rapport à la fenêtre
        var mouseX = event.clientX;
        var mouseY = event.clientY;
        
        // Déplacez le point de départ (élément avec l'id "start") à la position de la souris
        var startPoint = document.getElementById("start");
        startPoint.style.left = mouseX + "px"  ;
        startPoint.style.top =  mouseY + "px"   ;
    }
}

var isMouseDown = false;

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

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


// Appelez la fonction d'initialisation lors du chargement de la page

window.onload = initializeGame;

In the code I gave you'll notice that after clicking on the component S to control it, t moves outside the borders far away from the cursor that is moving it. I want to drag the component S with my cursor. Any help is appreciated.

Solution

You simply are limiting the movement on the Y axis. to be between 0 and startY which is wrong, as the startY value can be negative.

Here is a demo

snippet

newStartX = Math.max(minX, Math.min(newStartX, maxX));
newStartY = newStartY; // Fixed: you cannot max, min this value, as it will be negitive due to the layout of your game, just let it assign to what ever the mouse value it is after your calcs in newstartY

Full Code

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;
        var mouseY = event.clientY;

        // Calculate the new position of the start element directly under the cursor
        var containerRect = container.getBoundingClientRect();
        var startPointRect = startPoint.getBoundingClientRect();

        var newStartX = mouseX - containerRect.left - initialMouseX;
        var newStartY = mouseY - containerRect.top - initialMouseY;

        // 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 = newStartY; // Fixed: you cannot max, min this value, as it will be negitive due to the layout of your game, just let it assign to what ever the mouse value it is after your calcs in newstartY

        // 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;

Other Issue/bug

also on a side note the game is unplayable as you cannot get past the one block in the middle, so here is the css code to fix that block/wall

#bloc4{
    margin-left: 185px;
    margin-right: 166px;
    margin-top: 85px;
    width: 135px;
    height: 164px;
    border: solid 1px;
    border-bottom: 0px;
    z-index: 200;
}

Other

Your player starts in the starting location, but its actually way up form the player at, see ref 1 image below

Answered By - Dean Van Greunen