<!--以下、ヘッドタグ内に板の動きの関数を作成-->
<HTML><HEAD>
<SCRIPT LANGUAGE="javaScript">
<!--
//緑板のX軸方向の初期値
LposX=172;
//マゼンタ板の〃
L2posX=100;
//緑板の方向フラグ設定
Lflg=1;
//マゼンタ板の〃
L2flg=1;
function Lmove(){
//緑板のX値が520でフラグを切り替え
if(LposX==520){
Lflg=2;
}
//緑板のX値が170でフラグを切り替え
if(LposX==172){
Lflg=1;
}
//緑板の動きの式
switch(Lflg){
//右方向への動き
case 1:
LposX=LposX+4;
break;
//左方向への動き
case 2:
LposX=LposX-4;
break;
}
//以下、同じく、マゼンタ板の動きの制御で、緑板と同じに解釈のこと
if(L2posX==644){
L2flg=2;
}
if(L2posX==100){
L2flg=1;
}
switch(L2flg){
case 1:
L2posX=L2posX+2;
break;
case 2:
L2posX=L2posX-2;
break;
}
//上の式から導き出された値を、画面上のイメージに設定
document.all("LINE1").style.left =LposX;
document.all("LINE2").style.left =L2posX;
//以上の関数をタイマー関数により、繰り返す
timeLID=window.setTimeout("Lmove()",30);
}
-->
</SCRIPT>
</HEAD>
<!--ページを開くと同時にヘッドタグ内のプログラムが実行され、板が動く-->
<BODY bgcolor="black" text="white" onLoad="Lmove()">
<b>応用編その2</b></font><br><br>
<!--ボタンを設置し、押されたときに、下に記述のプログラムを実行-->
<input type="button" name="button1" value="START" onClick="button1.disabled=true;button2.disabled=false;RS()"><br><br>
<input type="button" name="button2" value="RESET" onClick="button2.disabled=true;button1.disabled=false;Stop()"><br><br>
<br><br><br><br>
<!--以下、別途、線を右クリックしコピーしてください-->
<!--動く板のイメージはwidth、heightの値を参考に作成してください-->
<!--中枠の途切れた部分も『hline_black.jpg』で黒線のイメージです-->
<img src="vline.jpg" style="position: absolute;left: 100; top: 50" width=604>
<img src="vline.jpg" style="position: absolute;left: 100; top: 454" width=604>
<img src="hline.jpg" style="position: absolute;left: 100; top: 50" height=404>
<img src="hline.jpg" style="position: absolute;left: 704; top: 50" height=405>
<img src="vline_yellow.jpg" style="position: absolute;left: 172; top: 182" width=468>
<img src="vline_yellow.jpg" style="position: absolute;left: 172; top: 350" width=468>
<img src="hline_yellow.jpg" style="position: absolute;left: 172; top: 182" width=1 height=168>
<img src="hline_yellow.jpg" style="position: absolute;left: 640; top: 182" width=1 height=169>
<img src="hline_black.jpg" style="position: absolute;left: 400; top: 182" width=52 height=1>
<img src="hline_black.jpg" style="position: absolute;left: 400; top: 350" width=52 height=1>
<img src="hline_red.jpg" style="position: absolute;left: 173; top: 182" width=20 height=1>
<img src="vline_red.jpg" style="position: absolute;left: 640; top: 183" width=1 height=20>
<div id=LINE1 style="position: absolute;left:172;top:250"><img src="vline_green.jpg"></div>
<div id=LINE2 style="position: absolute;left:50;top:110"><img src="vline_magenta.jpg"></div>
<!--レッドラインを通過したときに表示する文字、黒色にしておく-->
<div id=FONT1 style="font-size:30; color:#000000;
position:absolute;left:200;top:5">おめでとう！レッドライン通過！</div>
<!--ボールのイメージ、単なる文字『●』です。-->
<div id=MovePoint1 style="font-size:20; color:#cccccc;
position:absolute;left:192;top:128;width=10">●</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</BODY>
<!--以下、ボールの動きをさせる関数です。-->
<SCRIPT LANGUAGE="javaScript">
<!--
var i=2;
var posX=192 ;
var posY=128 ;
var flg=Math.ceil(Math.random()*4);
var timeID;
var vX=Math.ceil(Math.random()*3)-2;
posX=posX+vX*4;
var cnt=0;
function RS(){
//外枠部分衝突方向、右
if((posX>=688)&&(flg==1)){flg=2;i=2;document.all("MovePoint1").style.color="#cccccc";}
if((posX>=688)&&(flg==4)){flg=3;i=2;document.all("MovePoint1").style.color="#cccccc";}
//下
if((posY>=436)&&(flg==1)){flg=4;i=2;document.all("MovePoint1").style.color="#cccccc";posY=posY-(Math.ceil(Math.random()*2)-1)*4;}
if((posY>=436)&&(flg==2)){flg=3;i=2;document.all("MovePoint1").style.color="#cccccc";posY=posY-(Math.ceil(Math.random()*2)-1)*4;}
//左
if((posX<=96)&&(flg==2)){flg=1;i=2;document.all("MovePoint1").style.color="#cccccc";}
if((posX<=96)&&(flg==3)){flg=4;i=2;document.all("MovePoint1").style.color="#cccccc";}
//上
if((posY<=48)&&(flg==3)){flg=2;i=2;document.all("MovePoint1").style.color="#cccccc";posY=posY-(Math.ceil(Math.random()*2)-1)*4;}
if((posY<=48)&&(flg==4)){flg=1;i=2;document.all("MovePoint1").style.color="#cccccc";posY=posY-(Math.ceil(Math.random()*2)-1)*4;}
//内枠部分衝突方向、下
if((posY==168)&&((posX>=156)&&(posX<=396)||(posX>=436)&&(posX<=636))&&(flg==1)){flg=4;i=4;document.all("MovePoint1").style.color="#ffff00";posY=posY-(Math.ceil(Math.random()*2)-1)*4;}
if((posY==168)&&((posX>=156)&&(posX<=396)||(posX>=436)&&(posX<=636))&&(flg==2)){flg=3;i=4;document.all("MovePoint1").style.color="#ffff00";posY=posY-(Math.ceil(Math.random()*2)-1)*4;}
//右
if((posX==156)&&(posY>=168)&&(posY<=348)&&(flg==1)){flg=2;i=4;document.all("MovePoint1").style.color="#ffff00";}
if((posX==156)&&(posY>=168)&&(posY<=348)&&(flg==4)){flg=3;i=4;document.all("MovePoint1").style.color="#ffff00";}
//上
if((posY==348)&&((posX>=156)&&(posX<=396)||(posX>=436)&&(posX<=636))&&(flg==3)){flg=2;i=4;document.all("MovePoint1").style.color="#ffff00";posY=posY+(Math.ceil(Math.random()*2)-1)*4;}
if((posY==348)&&((posX>=156)&&(posX<=396)||(posX>=436)&&(posX<=636))&&(flg==4)){flg=1;i=4;document.all("MovePoint1").style.color="#ffff00";posY=posY+(Math.ceil(Math.random()*2)-1)*4;}
//左
if((posX==636)&&(posY>=168)&&(posY<=348)&&(flg==2)){flg=1;i=4;document.all("MovePoint1").style.color="#ffff00";}
if((posX==636)&&(posY>=168)&&(posY<=348)&&(flg==3)){flg=4;i=4;document.all("MovePoint1").style.color="#ffff00";}
//内内
//上
if((posY==180)&&((posX>=169)&&(posX<=396)||(posX>=436)&&(posX<=624))&&(flg==3)){flg=2;i=4;document.all("MovePoint1").style.color="#ffff00";posY=posY+(Math.ceil(Math.random()*2)-1)*4;}
if((posY==180)&&((posX>=169)&&(posX<=396)||(posX>=436)&&(posX<=624))&&(flg==4)){flg=1;i=4;document.all("MovePoint1").style.color="#ffff00";posY=posY+(Math.ceil(Math.random()*2)-1)*4;}
//下
if((posY==336)&&((posX>=168)&&(posX<=396)||(posX>=436)&&(posX<=624))&&(flg==1)){flg=4;i=4;document.all("MovePoint1").style.color="#ffff00";posY=posY-(Math.ceil(Math.random()*2)-1)*4;}
if((posY==336)&&((posX>=168)&&(posX<=396)||(posX>=436)&&(posX<=624))&&(flg==2)){flg=3;i=4;document.all("MovePoint1").style.color="#ffff00";posY=posY-(Math.ceil(Math.random()*2)-1)*4;}
//右
if((posX==624)&&(posY>=181)&&(posY<=336)&&(flg==1)){flg=2;i=4;document.all("MovePoint1").style.color="#ffff00";}
if((posX==624)&&(posY>=181)&&(posY<=336)&&(flg==4)){flg=3;i=4;document.all("MovePoint1").style.color="#ffff00";}
//左
if((posX==168)&&(posY>=180)&&(posY<=336)&&(flg==2)){flg=1;i=4;document.all("MovePoint1").style.color="#ffff00";}
if((posX==168)&&(posY>=180)&&(posY<=336)&&(flg==3)){flg=4;i=4;document.all("MovePoint1").style.color="#ffff00";}
//内⇒内内
//右
if((posX==436)&&(posY>=168)&&(posY<=180)&&(flg==1)){flg=2;i=4;document.all("MovePoint1").style.color="#ffff00";}
if((posX==436)&&(posY>=168)&&(posY<=180)&&(flg==4)){flg=3;i=4;document.all("MovePoint1").style.color="#ffff00";}
if((posX==436)&&(posY>=336)&&(posY<=348)&&(flg==1)){flg=2;i=4;document.all("MovePoint1").style.color="#ffff00";}
if((posX==436)&&(posY>=336)&&(posY<=348)&&(flg==4)){flg=3;i=4;document.all("MovePoint1").style.color="#ffff00";}
//左
if((posX==396)&&(posY>=168)&&(posY<=180)&&(flg==2)){flg=1;i=4;document.all("MovePoint1").style.color="#ffff00";}
if((posX==396)&&(posY>=168)&&(posY<=180)&&(flg==3)){flg=4;i=4;document.all("MovePoint1").style.color="#ffff00";}
if((posX==396)&&(posY>=336)&&(posY<=348)&&(flg==2)){flg=1;i=4;document.all("MovePoint1").style.color="#ffff00";}
if((posX==396)&&(posY>=336)&&(posY<=348)&&(flg==3)){flg=4;i=4;document.all("MovePoint1").style.color="#ffff00";}
//中動体障害物（緑板） 下
if((posY==236)&&(posX>=LposX-16)&&(posX<=LposX+116)&&(flg==1)){flg=4;document.all("MovePoint1").style.color="#00ff00";posY=posY-(Math.ceil(Math.random()*2)-1)*4;}
if((posY==236)&&(posX>=LposX-16)&&(posX<=LposX+116)&&(flg==2)){flg=3;document.all("MovePoint1").style.color="#00ff00";posY=posY-(Math.ceil(Math.random()*2)-1)*4;}
//右
if((posX==LposX-16)&&(posY>=236)&&(posY<=248)&&(flg==1)){flg=2;document.all("MovePoint1").style.color="#00ff00";}
if((posX==LposX-16)&&(posY>=236)&&(posY<=248)&&(flg==4)){flg=3;document.all("MovePoint1").style.color="#00ff00";}
//上
if((posY==248)&&(posX>=LposX-16)&&(posX<=LposX+116)&&(flg==3)){flg=2;document.all("MovePoint1").style.color="#00ff00";posY=posY+(Math.ceil(Math.random()*2)-1)*4;}
if((posY==248)&&(posX>=LposX-16)&&(posX<=LposX+116)&&(flg==4)){flg=1;document.all("MovePoint1").style.color="#00ff00";posY=posY+(Math.ceil(Math.random()*2)-1)*4;}
//左
if((posX==LposX+116)&&(posY>=236)&&(posY<=248)&&(flg==2)){flg=1;document.all("MovePoint1").style.color="#00ff00";}
if((posX==LposX+116)&&(posY>=236)&&(posY<=248)&&(flg==3)){flg=4;document.all("MovePoint1").style.color="#00ff00";}
//外動体障害物（マゼンタ板） 下
if((posY==96)&&(posX>=L2posX-16)&&(posX<=L2posX+56)&&(flg==1)){flg=4;document.all("MovePoint1").style.color="#ff00ff";posY=posY-(Math.ceil(Math.random()*2)-1)*4;}
if((posY==96)&&(posX>=L2posX-16)&&(posX<=L2posX+56)&&(flg==2)){flg=3;document.all("MovePoint1").style.color="#ff00ff";posY=posY-(Math.ceil(Math.random()*2)-1)*4;}
//上
if((posY==108)&&(posX>=L2posX-16)&&(posX<=L2posX+56)&&(flg==3)){flg=2;document.all("MovePoint1").style.color="#ff00ff";posY=posY+(Math.ceil(Math.random()*2)-1)*4;}
if((posY==108)&&(posX>=L2posX-16)&&(posX<=L2posX+56)&&(flg==4)){flg=1;document.all("MovePoint1").style.color="#ff00ff";posY=posY+(Math.ceil(Math.random()*2)-1)*4;}
//右
if((posX==L2posX-16)&&(posY>=96)&&(posY<=108)&&(flg==1)){flg=2;document.all("MovePoint1").style.color="#ff00ff";}
if((posX==L2posX-16)&&(posY>=96)&&(posY<=108)&&(flg==4)){flg=3;document.all("MovePoint1").style.color="#ff00ff";}
//左
if((posX==L2posX+56)&&(posY>=96)&&(posY<=108)&&(flg==2)){flg=1;document.all("MovePoint1").style.color="#ff00ff";}
if((posX==L2posX+56)&&(posY>=96)&&(posY<=108)&&(flg==3)){flg=4;document.all("MovePoint1").style.color="#ff00ff";}
//レッドライン通過した場合、文字を赤に変えます
if(((posX==624)&&(posY==180))||((posX==168)&&(posY==180))){
document.all("FONT1").style.color="#ff0000";
}
switch(flg){
//移動運動、右下がり
case 1:
posX=posX+i;
posY=posY+i;
break;
//左下がり
case 2:
posX=posX-i;
posY=posY+i;
break;
//左上がり
case 3:
posX=posX-i;
posY=posY-i;
break;
//右上がり
case 4:
posX=posX+i;
posY=posY-i;
break;
}
document.all("MovePoint1").style.left =posX;
document.all("MovePoint1").style.top=posY;
timeID=window.setTimeout("RS()",0);
}
function Stop(){
flg=Math.ceil(Math.random()*4);
K=Math.ceil(Math.random()*4);
if((posX!=156)&&(posX!=684)&&(posX!=686)){posX=posX+4;}
clearTimeout(timeID);
document.all("FONT1").style.color="#000000";
switch(K){
case 1:
posX=192 ;
posY=128 ;
break;
case 2:
posX=652 ;
posY=128 ;
break;
case 3:
posX=192 ;
posY=400 ;
break;
case 4:
posX=652 ;
posY=400 ;
break;
}
document.all("MovePoint1").style.left =posX;
document.all("MovePoint1").style.top=posY;
document.all("MovePoint1").style.color="#cccccc";
}
-->
</SCRIPT>
</HTML>
<!--簡単に試すには、以上を丸々、コピーし、ｔｘｔファイルに書き込み、保存-->
<!--保存したファイルの拡張子を『.txt』から『.html』に変えます-->
<!--あとは、そのファイルをダブルクリックすれば確認できます-->
<!--尚、イメージファイルは同じフォルダーに置いてください-->
<!--イメージファイルがなくても動きますが、とても、分かりづらいです-->