Question

我的代码出了问题。我有一个div（id - ball），它默认移动到顶部和左边。然后，当它到达包装块的顶部（id = field）时，“ball”应改变其移动方向。但它改变了一切都错了。这是我的代码。不要嘲笑我的代码技巧，我是新手...... :) 我真的明白为什么球继续飞向错误的方向，但我没有任何想法如何解决它，所以请帮助我：）

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;
}

DEMO： http://jsfiddle.net/n3skLuo3/

Answer 1

基本上你需要沿x / y轴存储方向（两个二进制标志代表＆＃39; increment / decrement_x / y_coordinate＆＃39;足够），它们必须在其中一个场边缘反射时改变。

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

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

1 个答案: