JS碰撞检测有问题

Question

我正在尝试制作一个可以在网站上玩的非常简单的街机游戏。在游戏中，你扮演一个红色的立方体，试图抓住一个蓝色的立方体。我的问题是碰撞检测。它有时会起作用，但我能得到的最高分是 20，然后碰撞检测就停止了。它通常停在屏幕的左侧，这令人困惑。

我对 Javascript 还很陌生，所以如果你帮忙，它会很有帮助。

这是网站的链接：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);
    }
}

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