Обновление расстояния между элементами - PullRequest
Новая
       12

Обновление расстояния между элементами

0 голосов
/ 28 мая 2018

У меня есть два элемента, и один движется навстречу другому.Я пытаюсь получить новое расстояние по мере приближения.Рассмотрим приведенный ниже код: 

<html>
    <center>
    <body onload = 'start()'>
    <div class='field'>



  <div id='bull'></div>
    <div id='mount'></div>
    </div>
    <button id='one'>DO</button>
    </body>
    </center>


<style>
.field{
    width: 440px;
    height: 260px;
    background: rgba(0, 0, 0, .2);
    margin-top: 30px;
    border: 1px solid #222;
    border-radius: 10px;
}
#bull{
    width: 15px;
    height: 10px;
    background: #000;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    position: absolute;
}
#mount{
    width: 60px;
    height: 30px;
    background: rgba(20, 10, 45);
    color: #fff;
    border-radius: 4px;
    margin-top: 210px;
}
</style>
<script type='text/javascript'>
function start() {
    var ball = document.getElementById('bull');
    var button = document.getElementById('one');
    var mount = document.getElementById('mount');
    button.addEventListener('click', go);

    var x_pos = 0;
    var y_pos = 0;
    var bounce_point = 200;
    var ball_dim = ball.getBoundingClientRect();
    var ball_h_half = ball_dim.width / 2;
    var ball_w_half = ball_dim.height / 2;

    var mount_dim = mount.getBoundingClientRect();
    var mount_h_half = mount_dim.width / 2;
    var mount_w_half = mount_dim.height / 2;

    function go() {
        for(x_pos = 0; bounce_point > x_pos; x_pos++) {
            ball.style.margin = x_pos + "px";
            ball.style.transition = x_pos/2 + "s";
            var dist = ((ball_h_half - mount_h_half)*(ball_w_half - mount_w_half)) + ((mount_h_half - ball_h_half)*(mount_w_half - ball_w_half));
            console.log(dist);
            if(dist < 3) {
                console.log('One');
            }
        }
    }
}
</script>

Когда бык достигает 3px от монтирования, ничего не происходит ... Я в значительной степени объяснил проблему как можно лучше.** Когда бык достигает 3px от горы, ничего не происходит ... Я в значительной степени объяснил проблему как можно лучше. **

1 Ответ

0 голосов
/ 28 мая 2018

Ну, я попробовал немного больше, и ваша логика, кажется, не соответствует тому, что вы хотите сделать.Прежде всего, вы, вероятно, заметили, что ваше значение в журнале не меняется.

Это могло произойти потому, что значения извлекаются вне цикла, но не только (они на самом деле должны быть в цикле, чтобыобновлено).У вас есть две другие проблемы: во-первых, вы измеряете ширину и высоту элементов, которые не учитывают поля или другое расположение.Ваши элементы не меняют размер, поэтому значение также не изменится.Другая проблема - это сам переход на движение.Из-за задержки все ваши итерации цикла, скорее всего, выполнены, и маржа уже установлена ​​на свое окончательное значение, когда ваш «бык» фактически начинает двигаться.Это означает, что в цикле вы не можете обнаружить изменение положения, элемент еще не начал двигаться.Использование только что установленного значения (margin) вместо определения реальной позиции элемента должно показать прогрессию для значения, но это усложнит обнаружение столкновения, потому что ваши 2 элемента не имеют одинаковых правил позиционирования, и вы можетене сравнивайте поля.

Вот краткий пример, который получает обновленные значения (потому что переход был отключен, если вы включите обратно, проблема снова возникнет).Вы заметите, что ваш расчет для столкновения тоже неверен.Вы не можете просто сравнить расстояние между 2 углами для этого, для прямоугольника это скорее "вышло за левый вертикальный край и вышло за верхний горизонтальный край" (это, конечно, принимает во внимание только верхний левый угол, чтобы быть полным), также следует добавить, что он еще не достиг правого или нижнего края).

Ну, я не могу предложить вам полностью готовое решение, но это решает основные проблемы вашего кода: 

<html>
    <center>
    <body onload = 'start()'>
    <div class='field'>



  <div id='bull'></div>
    <div id='mount'></div>
    </div>
    <button id='one'>DO</button>
    </body>
    </center>


<style>
.field{
    width: 440px;
    height: 260px;
    background: rgba(0, 0, 0, .2);
    margin-top: 30px;
    border: 1px solid #222;
    border-radius: 10px;
}
#bull{
    width: 15px;
    height: 10px;
    background: #000;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    position: absolute;
}
#mount{
    width: 60px;
    height: 30px;
    background: rgba(20, 10, 45);
    color: #fff;
    border-radius: 4px;
    margin-top: 210px;
}
</style>
<script type='text/javascript'>
function start() {
    var ball = document.getElementById('bull');
    var button = document.getElementById('one');
    var mount = document.getElementById('mount');
    button.addEventListener('click', go);

    var x_pos = 0;
    var y_pos = 0;
    var bounce_point = 200;
    var ball_dim, ball_x, ball_y, mount_dim, mount_x, mount_y, diff_x, diff_y;
    
    var stayInLoop = true;
    //ball.style.transition = "0.4s"; //i don't know why you updated the transition time based on position, changed to a fixed value outside the loop because it's quicker for the example
    
    function go() {
        for(x_pos = 0; bounce_point > x_pos && stayInLoop; x_pos++) {
            
            ball_dim = ball.getBoundingClientRect();
            ball_y = ball_dim.top + 10; // +10 because we're considering the bottom edge of bull
            ball_x = ball_dim.left + 15; // +15 because we're considering the right edge of bull

            mount_dim = mount.getBoundingClientRect();
            mount_y = mount_dim.top;
            mount_x = mount_dim.left;
            
            diff_x = mount_x - ball_x;
            diff_y = mount_y - ball_y;
            console.log(diff_x, diff_y);
            
            ball.style.margin = x_pos + "px";
            
            if(diff_x < 3 && diff_y < 3) {
                console.log('One');
                stayInLoop = false;
            }
        }
    }
}
</script>

РЕДАКТИРОВАНИЕ / ПРЕДЛОЖЕНИЕ : я предлагаю посмотреть window.requestAnimationFrame() документ MDN здесь для лучшего контроля над анимацией

...