Javascript，游戏，如何确定 div 元素相对于 javascript 中的父 div 的位置(x，y)？

Question

我做了一个愚蠢的“游戏”。我想通过让 Angular 色能够跳过一个从右到左无限滚动(循环)的 block 来改进这个愚蠢的游戏。我想弄清楚如何确定字符 div 的位置和滚动 block div 的位置。

我想知道这一点，以便我可以设置一个条件语句来检查 Angular 色位置 (x) == 方 block 位置 (x)，然后它会结束游戏。 else if 字符位置 (x) == block 位置 (x) && 字符位置 (y) ==! block position(y) 一个点被授予(跳过 block )。

到目前为止，我已经尝试使用 positon()，每次遇到移动 Angular 色的按键事件时，我都会记录到控制台。这样我就可以追踪 Angular 色的位置。我必须这样做才能手动确定我的背景的边界 (div id='bg') 并使用这些边界来限制 Angular 色移动到它们之外。然而，当我在 map 中间引入一个静态 block 时，它总是说 position() = 0 而不管它放在哪里。这只是一个简单的正方形，我放在背景 div 中来表示一个 block 。

我真的不知道我在做什么，我只是想做点好玩的，现在很困惑。我已经编码了一个星期，但不知道自己在做什么。我陷入了碰撞检测文档的困境，但它远远超出了我的理解范围。这似乎是一项简单的任务，也许我的想法是错误的。

这是我的 stupid game

这是我现在的代码

$(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();    

});

});

Answer 1

可以使用offset函数来比较定位:var difference = $('#character').offset().left - $('#another-div').offset().left;