javascript - div 到达边界时改变移动方向

Question

我的代码有问题。我有一个 div(id - ball)，它默认移动到顶部和左侧。然后，当它到达包装器 block 的顶部(id = 字段)时，“球”应该改变其移动方向。但它改变了一切错误。这是我的代码。不要 mock 我的代码技巧，我是新手......:) 我实际上明白为什么球继续朝错误的方向飞行，但我不知道如何解决它，所以请帮助我:)

var ball = document.getElementById('ball');


     var timer = setInterval(function ()
        {
            var posTop = ball.offsetTop;
            var posLeft = ball.offsetLeft;
            var ballPositionX = parseFloat(window.getComputedStyle(ball). left) ;
            var ballPositionY = parseFloat(window.getComputedStyle(ball). top);

            ball.style.top = --posTop + 'px';
            ball.style.left = ++posLeft + 'px';

                if( ballPositionX <= 0 )
                {
                    ball.style.top = --posTop + 'px';
                }
                if( ballPositionX <= 550 )
                {
                    ball.style.top = ++posTop + 'px';
                }
                if( ballPositionY <= 0 )
                {
                    ball.style.left = ++posLeft + 'px';
                }
                if( ballPositionY >= 1000 )
                {
                    ball.style.left = --posLeft + 'px';
                }
        }, 10);

HTML 在这里:

<div class="field" id="field">
        <div id="here"></div>
        <div class="ball" id="ball"></div>
        <div class="desk" id="desk"></div>
    </div>

这是 CSS

*{
    margin: 0;
    padding: 0;
}
.field{
    margin: 15px auto;
    width: 1000px;
    height: 650px;
    border: 1px solid #000;
    background: aliceblue;
    position: relative;
    overflow: hidden;
}

.ball{
    width: 50px;
    height: 50px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    background: green;
    -webkit-border: 5px double silver;
    -moz-border: 5px double silver;
    -ms-border: 5px double silver;
    -o-border: 5px double silver;
    border: 5px double silver;
    position: absolute;
    top: 550px;
    left: 0;
}

.desk{
    width: 200px;
    height: 25px;
    background: darkblue;
    -webkit-border: 3px double silver;
    -moz-border: 3px double silver;
    -ms-border: 3px double silver;
    -o-border: 3px double silver;
    border: 3px double silver;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    position: absolute;
    top: 610px;
    left: 10px;
}

.blocks{
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 30px;
    background: brown;
    text-align: center;
    color: lightcoral;
}

演示: http://jsfiddle.net/n3skLuo3/

Answer 1

基本上，您需要存储沿 x/y 轴的方向(表示“增量/减量_x/y_坐标”的两个二进制标志就足够了)，这些方向必须在场边缘之一的反射时发生变化。

var ball  = document.getElementById('ball');
var field = document.getElementById('field');
var d_x = 1.0;
var d_y = 1.0;
var h_ball  = parseFloat(window.getComputedStyle(ball).height);
var w_ball  = parseFloat(window.getComputedStyle(ball).width);
var h_field = parseFloat(window.getComputedStyle(field).height);
var w_field = parseFloat(window.getComputedStyle(field).width);

ball.style.left = '200px';
ball.style.top  = '200px';

var timer = setInterval(function ()
        {
            var posTop  = ball.offsetTop;
            var posLeft = ball.offsetLeft;
            var ballPositionX = parseFloat(window.getComputedStyle(ball). left) ;
            var ballPositionY = parseFloat(window.getComputedStyle(ball). top);

            if ( ballPositionX <= 0 )                 { d_x =  1.0;  }
            if ( ballPositionX >= w_field - w_ball )  { d_x = -1.0; }
            if ( ballPositionY <= 0 )                 { d_y =  1.0;  }
            if ( ballPositionY >= h_field - h_ball )  { d_y = -1.0;  }

            ball.style.top  = (posTop  + d_y) + 'px';
            ball.style.left = (posLeft + d_x) + 'px';
        }, 10);

上面代码中的

d_x/y表示每个时间步的坐标变化。使用速度矢量的坐标和长度对它们进行加权和缩放。

Live demo on jsFiddle