3

私はJSプログラミングの初心者であり、スクリーンセーバーのようなことをする任務があります。画面上ですでに2つのボールが跳ね返っていますが、それらを互いに跳ね返らせるためのアルゴリズムが必要です。私はここで記事を読みましたが、コードは十分ではありません..または少なくとも私にとっては。これがコードです。

<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不便な命名規則を使用することで、自分自身 (そして私にとっても...) の生活をより困難にしていますx[i]。あなたは異なる文字を使用しています。私はそれを修正しようとはしませんが、賢明な変数を使用すると、より良いコードが得られることをお勧めします。

つまり、現在、オブジェクト(x,y)が 速度(h,v)にあり、2 番目のオブジェクト(u,i)が速度にあるということ(o,p)です。これら 2 つのオブジェクトが次の移動ステップで「衝突」するかどうかを知る必要があります。つまり、移動ステップ後のこれらのボールの距離は 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たが、「かなり」機能していることがわかります。コードを少し再配置して、b1またはの位置を更新する前にこの計算を行うb2必要がありますが、一般的な要点はこのコードから明らかなはずです (これは、物理学がまったく正しくありませんが、これはスクリーンセーバーであり、物理実験ではありません)。

于 2013-03-13T19:05:13.713 に答える