javascript - Having problems with JS collision detection

Question

I am trying to make a very simple arcade game that you can play on a website. In the game you play as a red cube trying to catch a blue cube. My problem is with the collision detection. It works some of the time but the highest score I can get to is 20 and then the collision detection just stops. It stops usually on the left side of the screen which is confusing.

I am fairly new to Javascript so it would help a ton if you help.

Here is the link to the website: here

player = document.getElementById("player");
block = document.getElementById("block");
var score = 0;
var highscore = localStorage.getItem("highscore/catch", 0);

document.addEventListener("mousemove", function(event) {
event.preventDefault();
if (isDown) {
    mousePosition = {

        x : event.clientX,
        y : event.clientY

    };
    player.style.left = (mousePosition.x + offset[0]) + "px";
    player.style.top = (mousePosition.y + offset[1]) + "px";
    is_colliding();
    }
}, true);

function moveBlock(){
    block.style.position = 'absolute';
    block.style.top = Math.floor(Math.random() * 90 + 5) + '%';
    block.style.left = Math.floor(Math.random() * 90 + 5) + '%';
}

var is_colliding = function() {
    var d1_height = player.offsetHeight;
    var d1_width = player.offsetWidth;
    var d1_distance_from_top = player.offsetTop + d1_height;
    var d1_distance_from_left = player.offsetLeft + d1_width;

    var d2_height = block.offsetHeight;
    var d2_width = block.offsetWidth;
    var d2_distance_from_top = block.offsetTop + d2_height;
    var d2_distance_from_left = block.offsetLeft + d2_width;

    var not_colliding =
        d1_distance_from_top < block.offsetTop ||
        player.offsetTop > d2_distance_from_top ||
        d1_distance_from_left < block.offsetTop ||
        player.offsetLeft > d2_distance_from_left  
                                             
    if (!not_colliding) {
        console.log("collide");
        moveBlock();
        highScore();
        score++;
    }

return !not_colliding;

};

function highScore () {
    if (highscore != null) {
        if (score > highscore) {
            localStorage.setItem("highscore/catch", score);
        }
    } else {
        localStorage.setItem("highscore/catch", score);
    }
}

The CSS:

#block {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 800px;
    background: blue;
    color: blue;
    display: none;
}

#player {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100px;
    height: 100px;
    background: red;
    color: blue;
}

question from:https://stackoverflow.com/questions/65945037/having-problems-with-js-collision-detection

Answer 1

Waitting for answers