スロットマシーンプログラム

「スロットマシーン」のプログラム（JavaScriptを記述する）

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

<HTML>
<HEAD>
<TITLE>スロットマシーン</TITLE>
<SCRIPT language=JavaScript>

</SCRIPT>
</HEAD>
<BODY onload="check()">　//説明４
<CENTER>
<TABLE border="1" bgcolor="#000000">
<TBODY>
<TR>
<TD bgcolor="#ffffff"><IMG src="image0.gif" width="100" height="100" border="0" name="p1"></TD>　//説明２
<TD bgcolor="#ffffff"><IMG src="image1.gif" width="100" height="100" border="0" name="p2"></TD>　//説明２
<TD bgcolor="#ffffff"><IMG src="image2.gif" width="100" height="100" border="0" name="p3"></TD>　//説明２
<TD align="center" valign="middle">
<FORM name="coinform"><FONT color="#ffffff"><BR>　//説明１
所持金<BR>
</FONT><BR>
<INPUT size="10" type="text" style="font-size:18px" name="cointext" readonly></FORM>　//説明１
</TD>
</TR>
<TR>
<TD align="center"><INPUT type="button" value="STOP" style="font-size:18px" onclick="stop1()"></TD>　//説明７
<TD align="center"><INPUT type="button" value="STOP" style="font-size:18px" onclick="stop2()"></TD>　//説明７
<TD align="center"><INPUT type="button" value="STOP" style="font-size:18px" onclick="stop3()"></TD>　//説明７
<TD align="center"><INPUT type="button" value="START" style="font-size:18px" onclick="hajime()"></TD>　//説明５
</TR>
</TBODY>
</TABLE>
<FORM name="myform">　//説明１
<INPUT size="50" type="text" value="　しばらくお待ち下さい。" style="font-size:18px" name="mytext" readonly>　//説明１
</FORM>
<TABLE border="1">
<TBODY>
<TR>
<TD colspan="5" align="center">当たり図柄</TD>
</TR>
<TR>
<TD><IMG src="image0.gif" width="50" height="50" border="0"></TD>
<TD><IMG src="image1.gif" width="50" height="50" border="0"></TD>
<TD><IMG src="image2.gif" width="50" height="50" border="0"></TD>
<TD><IMG src="image3.gif" width="50" height="50" border="0"></TD>
<TD><IMG src="image4.gif" width="50" height="50" border="0"></TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
</BODY>
</HTML>

スクリプト解説

　（説明１）
　まず最初に、テキストボックスにメッセージを表示できるように準備します。
　（テキストボックスにメッセージを表示）
　テキストボックスは、コインの枚数表示部分と、メッセージ表示部分の、２つありますので、それぞれについて設定します。

　コイン枚数表示部分の<FORM>タグにcoinformという名前を、<INPUT>タグにcointextという名前をつけます。
　これで、coinform.cointext.valueを実行すると、コインの枚数表示部にメッセージを表示することができます。

　メッセージ表示部分の<FORM>タグには、myformという名前を、<INPUT>タグにmytextという名前をつけます。ここでつける名前は、コイン表示部と同じにならないように注意して下さい。
　これで、myform.mytext.valueを実行すると、メッセージ表示部のテキストボックスにメッセージを表示することができます。

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

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

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

　ダウンロードが完了すると、次の３つのスクリプトが実行されます。
　　b=1;
　　myform.mytext.value="　START　を押して下さい。";
　　coinform.cointext.value="　＄　"+coin;

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

　（説明６）
　doramu1()は左、doramu2()は中央、doramu3()は右、のドラムを回転させるための関数ですが、内容的にはどれも同じです。このdoramu()関数は、「車でＧｏ！」で車を走らせるhasiru()関数と全く同じ仕組みです。

　kaiten1()関数を例に解説していきます。
　kaiten1()関数は、タイマーugoki1によって150/1000秒後に再びkaiten1()関数を呼び出すようになっています。その為、kaiten1()関数は何度も繰り返し実行されることになります。
　（タイマーセット・解除）
　しかし、実行されるごとに　doramu1=doramu1+1　によって、doramu1の値が1づつ増える為、m1の値も1づつずれていき（0→1→2→3→4→0→1→2の順番）、条件式　if文の処理内容も変化していきます。
　150/1000秒ごとに表示される画像が切り替わっていく為、ドラムが回転しているように見えるのです。
　（画像を切り替える）

　（説明７）
　「STOP」というボタンを押すと、onclick属性によりstop()関数をそれぞれ呼び出します。
　（マウスによる処理）
　stop()関数は、clearTimeoutによりドラムの回転を止めます。
　（タイマーセット・解除）
　左のドラムを止めるのはstop1()関数、中央はstop2()関数、右はstop3()関数になります。
　jyun=0の時は左、jyun=1の時は中央、jyun=2の時は右のＳＴＯＰボタンを動作させることができます。
　これによって、ドラムは左から順番にしか止められないようになっています。

　stop3()関数が実行されると、hantei()関数を実行するようになっています。
　また、ドラムが３つとも止まったので、jyun=3とします。

　（説明８）
　ドラムの絵柄がそろったかの判定を行います。（条件式　if文）
　m1=m2、m2=m3、m3=m1なら絵柄が全て揃っているということなので、大当たりの判定をします。それ以外の場合は、はずれの判定をします。

　最後にcoinが残っているかの判定をします。0枚なら、ゲームオーバーと表示します。