閉鎖部分でのバウンド運動





RESETで
進行方向を
ランダムに
決めます。

















方向を変えたい位置で、運動方向を変え、
いかにも、閉鎖部分内を動くように見せています。
それらの変化は、すべて命令句『if』で変数『flg』を決め、
その変数に従い、命令句『switch』で方向を変えます。

非常に簡単なプログラムですが、衝突面をいろいろ移動したり、
運動方向を変えたり、運動関数を変えたりすれば、複雑な動きも可能だと思います。

ただ、衝突面の位置を勘違いしたり、書き間違えすると
どこか、遠くへ消えうせてしまいますので、ご注意を!

また、同じ軌道を無限に繰り返さないよう、外枠の上方向衝突7回で、微妙に、
位置をずらすよう書いていますので、決して、同じ動きの繰り返しはしないと思います。
と言うより、滅多にしないと言った方が正しい?
まあ、限られた部分内の動きですので、そのうち、同じところを通るとは思いますが・・・

以下、プログラムソースです(本プログラムとは少し異なります)。

<HTML><HEAD></HEAD>
<BODY bgcolor="black" text="white">
<input type="button" name="button1" value="START"
onClick="button1.disabled=true;button2.disabled=false;RS()"> 
<input type="button" name="button2" value="STOP"
onClick="button2.disabled=true;button1.disabled=false;Stop()"> 
<img src="../move/vline.jpg" style="position: absolute;left: 100; top: 50">
<img src="../move/vline.jpg" style="position: absolute;left: 101; top: 450">
<img src="../move/hline.jpg" style="position: absolute;left: 100; top: 51">
<img src="../move/hline.jpg" style="position: absolute;left: 700; top: 50">
<img src="vline.jpg" style="position: absolute;left: 171; top: 180">
<img src="vline.jpg" style="position: absolute;left: 171; top: 350">
<img src="hline.jpg" style="position: absolute;left: 171; top: 181">
<img src="hline.jpg" style="position: absolute;left: 640; top: 180">
<div id=MovePoint1 style="font-size:20; color:#cccccc;
position:absolute;top:96;left:102;width=10">●</div>
</BODY>
<SCRIPT LANGUAGE="javaScript">
<!--
var posX=102 ;
var posY=98 ;
var flg=1;
var timeID;
var cnt=0;
function RS(){
//外枠部分衝突方向、右
if((posX==686)&&(flg==1)){flg=2;}
if((posX==686)&&(flg==4)){flg=3;}
//下
if((posY==436)&&(flg==1)){flg=4;}
if((posY==436)&&(flg==2)){flg=3;}
//左
if((posX==98)&&(flg==2)){flg=1;}
if((posX==98)&&(flg==3)){flg=4;}
//上
if((posY==48)&&(flg==3)){flg=2;cnt=cnt+1;}
if((posY==48)&&(flg==4)){flg=1;cnt=cnt+1;}

//無限ループ回避目的の微調整
//上方向衝突回数が7回でY座標を2ピクセル移動する
if(cnt==7){posY=posY+2;cnt=0;}

//内枠部分衝突方向、下
if((posY==166)&&(posX>=156)&&(posX<=638)&&(flg==1)){flg=4;}
if((posY==166)&&(posX>=156)&&(posX<=638)&&(flg==2)){flg=3;}
//右
if((posX==156)&&(posY>=166)&&(posY<=348)&&(flg==1)){flg=2;}
if((posX==156)&&(posY>=166)&&(posY<=348)&&(flg==4)){flg=3;}
//上
if((posY==348)&&(posX>=156)&&(posX<=638)&&(flg==3)){flg=2;}
if((posY==348)&&(posX>=156)&&(posX<=638)&&(flg==4)){flg=1;}
//左
if((posX==638)&&(posY>=166)&&(posY<=348)&&(flg==2)){flg=1;}
if((posX==638)&&(posY>=166)&&(posY<=348)&&(flg==3)){flg=4;}

switch(flg){
case 1://移動運動、右下がり
posX=posX+2;
posY=posY+2;
break;
case 2://左下がり
posX=posX-2;
posY=posY+2;
break;
case 3://左上がり
posX=posX-2;
posY=posY-2;
break;
case 4://右上がり
posX=posX+2;
posY=posY-2;
break;
}
document.all("MovePoint1").style.left =posX;
document.all("MovePoint1").style.top=posY;
timeID=window.setTimeout("RS()",0);
}

function Stop(){
//alert(textX.value);
clearTimeout(timeID);
}

-->
</SCRIPT>
</HTML>