Javascript，game，如何确定div元素相对于Javascript中父div的位置（x，y）？

我做了一个愚蠢的“游戏”。我想通过让角色能够跳过一个从右向左无限滚动（循环）的方块来改进这个愚蠢的游戏。我试图找出如何确定字符div和滚动块div的位置

我想知道这一点，这样我就可以设置一个条件语句来检查角色位置（x）=块位置（x），然后它将结束游戏。否则，如果字符位置（x）=块位置（x）&&字符位置（y）=！拦网位置（y）：扣分（跳过拦网）

到目前为止，我已经尝试使用position（），每次遇到移动角色的keydown事件时，我都会登录到控制台。这样我可以追踪角色的位置。我必须这样做才能手动确定背景的边界（div id='bg'），并使用这些边界来限制角色移出它们。但是，当我在地图中间引入一个静态块时，它总是说位置（）= 0，而不管它放置在哪里。这只是一个简单的正方形，我放在背景div中表示一个块

我真的不知道我在做什么，我只是想做点好玩的东西，现在我很困惑。我已经写了一个星期的代码，不知道我在做什么。我下了一个碰撞检测文档的兔子洞，但它离我的头太远了。这似乎是一个简单的任务，也许我的想法是错误的

这是我的

这是我现在的代码

$(document).ready(function() {

// movement functions
$(document).keydown(function(key) {
    switch(parseInt(key.which,10)) {
        // Left arrow key pressed - move left
        case 37:
            if($('#character').position().left > 0){
                $('#character').animate({left: "-=10px"}, 'fast'); 
                console.log($('#character').position());
            }

            else{
                $('#character').clearQueue();
            }
            break;
        // Right Arrow Pressed - move right
        case 39:

            // condition to keep in bounds of bg div

            if($('#character').position().left < 720){
                $('#character').animate({left: '+=10px'}, 'fast');
            console.log($('#character').position());
            }

            // clear animate request if cndtn fails
            else{
                $('#character').clearQueue();
            }
            break;

        // Space key pressed - (jump animation)
        case 32:
            if($('#character').position().left < 720){
            $('#character').animate({top: '-=50px'}, 'fast').animate({left: '+=10px'}, 'fast').animate({top: '+=50px'}, 'fast');
            console.log($('#character').position());
            }
            else{
                $('#character').clearQueue();
            }
            break;
    }
});

// hide rules once keys are pressed
$(document).on('keydown', function(){
    $('#rules').fadeOut(1000);
    $('#res').fadeOut(100);
    });

// character select button
$('#charSelect').click(function(){

   var input = prompt("paste image link here");
   $('#character').css('background-image','url('+input+')');
   $('#res').show();



 }); 

// background select button
$('#bgSelect').click(function(){
 var input = prompt("paste image link here");
    $('#bg').css('background-image', 'url('+input+')');
    $('#res').show();

});

//reset button 
$('#reset').click(function(){
   $('#character').css('background-image','url(Character.jpg)');
    $('#character').css('left','0px');
   $('#bg').css('background-image','url("Background.jpg")');
$('#rules').show();
$('#res').show();    

});

});

$（文档）.ready（函数（）{
//运动功能
$（文档）.keydown（函数（键）{
开关（parseInt（key.which，10））{
//按下左箭头键-向左移动
案例37：
if（$（'#字符'）.position（）.left>0）{
$（'#character'）。设置动画（{left:“-=10px”}，'fast'）；
console.log（$（'#character'）.position（））；
}
否则{
$（“#字符”）.clearQueue（）；
}
打破
//按下向右箭头-向右移动
案例39：
//保持在bg div边界内的条件
if（$（'#字符'）.position（）.left<720）{
$（'#character'）。动画（{left:'+=10px'}，'fast'）；
console.log（$（'#character'）.position（））；
}
//如果cndtn失败，请清除动画请求
否则{
$（“#字符”）.clearQueue（）；
}
打破
//按下空格键-（跳跃动画）
案例32：
if（$（'#字符'）.position（）.left<720）{
$（'#character'）。动画（{top:'-=50px'}，'fast'）。动画（{left:'+=10px'}，'fast'）。动画（{top:'+=50px'}，'fast'）；
console.log（$（'#character'）.position（））；
}
否则{
$（“#字符”）.clearQueue（）；
}
打破
}
});
//按下键后隐藏规则
$（文档）.on（'keydown'，function（）{
$（“#规则”）。淡出（1000）；
$（'res'）。淡出（100）；
});
//字符选择按钮
$（'#charSelect'）。单击（函数（）{
var input=提示（“在此处粘贴图像链接”）；
$（'#character'）.css（'background-image'，'url（'+input+'））；
$（'#res'）.show（）；
}); 
//背景选择按钮
$（'#bgSelect'）。单击（函数（）{
var input=提示（“在此处粘贴图像链接”）；
$（'#bg'）.css（'background-image'，'url（'+input+'））；
$（'#res'）.show（）；
});
//复位按钮
$（“#重置”）。单击（函数（）{
$（'#character'）.css（'background-image'，'url（character.jpg）'）；
$（'#character'）.css（'left'，'0px'）；
$（'#bg'）.css（'background-image'，'url（“background.jpg”））；
$（“#规则”）.show（）；
$（'#res'）.show（）；
});
});

您可以使用偏移功能来比较定位：

---

变量差=$（'#character'）.offset（）.left-$（'#另一个div'）.offset（）.left

谢谢你，效果很好，我不知道这个函数。