JavaScript碰撞检测bug

大家好我尝试着创造一款马里奥类型的游戏，但却遇到了一些碰撞漏洞也许有人能给我解释一下什么是不正确的，如何解决它

碰撞部分有硬编码值我不能正确地跳上盒子很难解释，如果它不是很难，只是缓存js提琴链接!

控制箭头的空间跳跃，问题在于跳跃游戏逻辑

游戏逻辑

var hero = {
    X: 200,
    Y: 450,
    gravity: 0.05,
    gravitySpeed: 0,
    speed: 2,
    height: 50,
    width: 50
}
var box = {
    X: 300,
    Y: 450,
    height: 50,
    width: 50
}
var map = {
    gravity: 0.5,
    groundY: 350
}
var optiones = {
    crashWith: function (otherobj) {
        var myleft = hero.X;
        var myright = hero.X + (50);
        var mytop = hero.Y;
        var mybottom = hero.Y + (50);
        var otherleft = box.X;
        var otherright = box.X + (50);
        var othertop = otherobj.y;
        var otherbottom = box.Y + (50);
        var crash = true;
//Hard coded values
        var Y = 450,
            X = 300,
            w = 50,
            h = 50
        // not tuching
        if ((mybottom < othertop) ||
            (mytop > otherbottom) ||
            (myright < otherleft) ||
            (myleft > otherright)) {
            crash = false;
            //            console.log("dont tuch")
            hero.Y += hero.gravitySpeed;
            hero.gravitySpeed += hero.gravity;
        } else {
            // collision rules
            if (mytop >= othertop && othertop < otherbottom) {
                if (hero.X <= X) {
                    hero.X = X - hero.width
                } else if (hero.X > X) {
                    hero.X = X + hero.width
                }
            } else if (hero.X >= X && hero.X <= X + w) {
                if (hero.Y <= Y) {
                    hero.Y = Y - hero.height
                } else if (hero.Y >= Y) {
                    hero.Y = Y + hero.height
                }
            }
        }

这里是一个完整的代码，可以在js上查看或播放js小提琴