您只是将Y轴上的移动限制在0和startY之间，这是错误的，因为startY的值可以为负。
Here is a demo
片段

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

字符串

完整代码

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;

型

其他问题/bug

另外，在一个侧面注意到，游戏是不可玩的，因为你不能过去的一个块在中间，所以这里是css代码，以修复该块/墙

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

型

其他

您的播放器开始在起始位置，但它实际上是从播放器的方式在，见ref 1下面的图片
x1c 0d1x的数据