Question

我是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创建的球，但我正在使用球的图像。如果您知道我该怎么做，请帮助我绝望。

Answer 1

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

你通过使用一个不方便的命名惯例让生活变得更加困难（而且对我来说......）而不是让{1,2}对于球1,2的x坐标（更好，有{ {1}}对于第i个球的坐标，你使用不同的字母。我不会尝试解决这个问题，但我建议您在使用合理变量时获得更好的代码。

所以现在你的x1, x2对象的速度为x[i]，而(x,y)的第二个对象的速度为(h,v)。我们需要知道在下一个移动步骤中这两个对象是否会“碰撞”。那就是 - 这些球在移动步数接近50后的距离是多少？如果发生碰撞，我们可以交换球1和2的速度 - 这大约是弹性碰撞中发生的情况：

(u,i)

我在更新(o,p)位置之前添加了这些行，它表明事情“非常”有效。您可能希望稍微重新排列代码，以便在更新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的位置之前进行此计算，但是通常的要点应该从此代码中显而易见（这似乎确实产生了大概是你想要的，即使物理学不太正确 - 但这是一个屏幕保护程序，而不是物理实验。）

使用图像碰撞检测两个球

1 个答案: