3

我是 JS 编程的初学者，我的任务是做一些像屏幕保护程序这样的事情。我已经有两个球在屏幕上弹跳，但我需要一种算法来让它们互相弹跳。我浏览了这里的文章，但代码还不够……或者至少对我来说。这是代码。

<html> 
<head> 
<style type="text/css"> 
    .b {position:absolute; left:0px; top:0px; width:50px; height:50px;}
    .c {position:absolute; left:0px; top:0px; width:50px; height:50px;}
</style> 
<SCRIPT language="javascript"> 


    var x =Math.random();
    var y  =0 ;
    var h  =12;
    var v  =22;
    var g  =1;
    var r  =0;
    var q  =0;
    var gg = 0;


    var u = Math.random() ;
    var i =222;
    var o = 12;
    var p = 22;
    var l  =1;
    var k =0;
    var j = 0;
    var mm = 0;

    var height=window.innerHeight;
    var width=window.innerWidth;
    function moveball() 
    {
        var b1 = document.getElementById('ball');

        v=v+g;r=q;q=y;
        if(y==r&&y>394&&g==5)return;
        x=x+h;y=y+v;
        if(x>width){x=width;h=h*-1;}
        if(y>height){y=height;v=v*-1;}
        if(x<0){x=0;h=h*-1;}
        if(y<0){y=0;v=v*-1;}
        if(v==-26&&gg==5){gg=0;g=5;}
        b1.style.top=y + 'px';
        b1.style.left=x + 'px';

        var b2 = document.getElementById('ball2');

        p=p+l;k=j;j=i;
        if(i==k&&i>394&&l==5)return;
        u=u+o;i=i+p;
        if(u>width){u=width;o=o*-1;}
        if(i>height){i=height;p=p*-1;}
        if(u<0){u=0;o=o*-1;}
        if(i<0){i=0;p=p*-1;}
        if(p==-26&&mm==5){mm=0;l=5;}
        b2.style.top=i + 'px';
        b2.style.left=u + 'px';
        t=setTimeout("moveball()",32);


}

</script> 
</head> 
<body onLoad="moveball();" > 

    <div id="ball" class="b"><img src="ballA.gif" width="50" height="50"></div> 
    <div id="ball2" class="c"><img src="trol.png" width="50" height="50"></div> 


</body>

据我所知，我的问题是我没有处理由 js2Draw 创建的球，但我使用的是球的图像。如果您知道我该怎么做，请帮助我绝望。

4

1 回答 1

2

现在，您的代码允许球从屏幕的“墙壁”反弹，但不能相互反弹。您需要做的是计算它们何时变得太近 - 也就是说，它们的中心比它们的直径相距更近。

通过使用不方便的命名约定，您让自己（和我......）的生活变得更加困难 - 而不是拥有x1, x2球 1、2 的 x 坐标（更好的是，拥有x[i]第 i 个球的坐标），您正在使用不同的字母。我不会尝试解决这个问题，但我建议您在使用合理变量时获得更好的代码。

所以现在你有一个物体(x,y)以 速度(h,v)，第二个物体(u,i)以 速度(o,p)。我们需要知道这两个对象是否会在下一步移动中“碰撞”。即——这些球在移动步后的距离是否小于 50？如果发生碰撞，我们可以交换球 1 和 2 的速度——这大约是弹性碰撞中发生的情况：

var xnew = x + h;
var ynew = y + v;
var unew = u + o;
var inew = i + p;
var newDist = Math.sqrt(Math.pow(xnew-unew,2) + Math.pow(ynew-inew,2));
if (newDist < 50) {
  v1x = o;
  v1y = p;
  o = h; p = v; h = v1x; v = v1y;
}

我在您更新位置之前添加了这些行b2，它表明事情“非常”有效。您可能希望稍微重新安排您的代码，以便在更新b1or的位置之前进行此计算b2，但是从这段代码中应该可以很明显地看出一般要点（这似乎确实产生了您想要的大致内容，即使物理学是'不太对-但这是一个屏幕保护程序，而不是物理实验）。

于 2013-03-13T19:05:13.713 回答