車でＧｏ！プログラム

「車でＧｏ！」のプログラム（JavaScriptを記述する）

　「画面作り」で制作したＨＴＭＬの中に、JavaScript記入して行きます。
　赤色の部分がJavaScriptで記入した部分です。
　緑色の部分はコメントですので、記入する必要はありません。

<HTML>
<HEAD>
<TITLE>車でGo!プログラム</TITLE>
<SCRIPT language=JavaScript>

</SCRIPT>
</HEAD>
<BODY onload="check()">　//説明４
<CENTER>
<TABLE border="1" width="500" height="300" bgcolor="#ffffff">
<TBODY>
<TR>
<TD width="100" height="100"><IMG src="migi.gif" width="100" height="100" border="0" name="p1"></TD>　//説明２
<TD width="100" height="100"><IMG src="miti.gif" width="100" height="100" border="0" name="p2"></TD>　//説明２
<TD width="100" height="100"><IMG src="miti.gif" width="100" height="100" border="0" name="p3"></TD>　//説明２
<TD width="100" height="100"><IMG src="miti.gif" width="100" height="100" border="0" name="p4"></TD>　//説明２
<TD width="100" height="100"><IMG src="miti.gif" width="100" height="100" border="0" name="p5"></TD>　//説明２
</TR>
<TR>
<TD width="100" height="100"><IMG src="miti.gif" width="100" height="100" border="0" name="p12"></TD>　//説明２
<TD colspan="3" nowrap align="center" bgcolor="#ffeace">
<INPUT type="button" value="スタート" style="font-size:18px" onclick="hajime()">
<INPUT type="button" value="ストップ" style="font-size:18px" onclick="tomeru()">
</TD>
<TD width="100" height="100"><IMG src="miti.gif" width="100" height="100" border="0" name="p6"></TD>　　//説明２
</TR>
<TR>
<TD width="100" height="100"><IMG src="miti.gif" width="100" height="100" border="0" name="p11"></TD> 　//説明２
<TD width="100" height="100"><IMG src="conv.gif" width="100" height="100" border="0" name="p10"></TD> //説明２
<TD width="100" height="100"><IMG src="miti.gif" width="100" height="100" border="0" name="p9"></TD>　　//説明２
<TD width="100" height="100"><IMG src="miti.gif" width="100" height="100" border="0" name="p8"></TD>　　//説明２
<TD width="100" height="100"><IMG src="hidari.gif" width="100" height="100" border="0" name="p7"></TD>　//説明２
</TR>
</TBODY>
</TABLE>
</CENTER>
<FORM name="myform">　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//説明１
<P align="center">
<INPUT size="64" type="text" readonly name="mytext" style="font-size:18px" value="　しばらくお待ち下さい。">　//説明１
</P>
</FORM>
</BODY>
</HTML>

スクリプト解説

　（説明１）
　まず最初に、テキストボックスにメッセージを表示できるように準備します。
　（テキストボックスにメッセージを表示）
　テキストボックスの<FORM>タグには、myformという名前を、<INPUT>タグにmytextという名前をつけます。
　これで、myform.mytext.valueを実行すると、テキストボックスにメッセージを表示することができます。

　（説明２）
　<IMG>タグに名前をつけます。
　左上のマスの画像から、時計回りに、p1、p2、p3、・・・、p11、p12という名前を順番につけます。
　これで、document.<IMGにつけた名前>.src="ファイル名"を実行すると、その画像を切り替えることができます。
　（画像の切り替え）

　（説明３）
　最初に必要な変数を設定しておきます。（変数）
　最初に設定しておけば、いろいろな関数の中でその変数を使用することができるので便利です。
　逆に、必要となるまでに設定しておかないと、エラーとなってしまうので注意して下さい。
　それぞれの変数の意味については、スクリプト内のコメントを見てください。（コメント）

　（説明４）
　check（）関数で、ゲーム中に使用する画像が全て表示（ダウンロード）されたかを確認しています。ダウンロードが完了していないと、ゲームスタートできないようにしてあります。
　（画像のプリロード）

　ダウンロードが完了すると、b=1となり「スタート」ボタンを押すことができるようになります。

　（説明５）
　「スタート」ボタンを押すと、onclick属性によりhajime()関数がよびだされます。
　（マウスによる処理参照）
　hajime()関数は、条件式（ｉｆ文）により、b=1、a=0の２つを満たす時に動作する（スタートボタンを押せる）ようになっています。
　（条件式　if文）
　a=1にすることで、「ストップ」ボタンを押すまでは、「スタート」ボタンを再び押せないようになっています。

　（説明６）
　hasiru()関数は、hajime()関数により呼び出されます。
　hasiru()関数は、車を走らせるためのスクリプトです。この部分は、「占い」スクリプトの応用です。

　hasiru()関数は、タイマーugokuによって100/1000秒後に再びhasiru()関数を呼び出すようになっています。その為、hasiru()関数は何度も繰り返し実行されることになります。
　（タイマーセット・解除）
　しかし、実行されるごとに　i=i+1　によって、iの値が1づつ増える為、mの値も1づつずれていき（0→1→2→・・・→10→11→0→1の順番）、条件式　if文の処理内容も変化していきます。
　
　100/1000秒ごとに「車の絵は次のマスに表示し、車のいたマスには元の絵を表示する」というように、表示する画像が切り替わっていく為、車が走っているように見えるのです。
　（画像を切り替える）

　（説明７）
　「ストップ」というボタンを押すと、onclick属性によりtomeru()関数を呼び出します。
　（マウスによる処理）
　tomeru()関数は、clearTimeoutにより車が走るのを止めます。
　（タイマーセット・解除）

　また、車がコンビニに止まったかの判定も行います。（条件式　if文）
　m=8のとき、車とコンビニの画像が重なった状態となるので、成功時の処理をし、それ以外の場合は、はずれの処理をします。

　「ストップ」ボタンを押したことで、a=0に戻り、再びスタートボタンが押せるようになります。