新教科「情報」授業アイデア集
JavaScriptでスロットマシーンを作ろう!

 

2002,2,19更新
ついにスロットマシーンのJavaScript版がバージョンアップ!
軽さもGood!ただ、教材にするにはもう少し噛み砕かないといけませんね。
もっとすっきりしたプログラムにしたいのでアドバイスお願いします。(作:柴田功)
■演習2

ヘッダー

<head>〜
</head>の
部分に入れる
<script language="JavaScript">
<!--
tID = 0;
function start_slot(){
x=Math.floor(Math.random(1)*7+1)
y=Math.floor(Math.random(1)*7+1)
z=Math.floor(Math.random(1)*7+1)

document.left.src="gif/" + x + ".gif"
document.center.src="gif/" + y + ".gif"
document.right.src="gif/" + z + ".gif"

tID=setTimeout("start_slot()",100);
}
function stop_slot() {
clearTimeout(tID);
if(x==y && y==z){window.open
("atari.htm","win");}
}
//-->
</script>
1行目:JavaScriptであることを宣言
2行目:コメントにして隠す
3行目:タイマーのスイッチをOFF
4行目:関数の定義の始まり
5〜7行目:0から1までの乱数を発生させ、
それを7倍し小数部分を切り捨て整数化


8行目:xが○なら画像○.gifを表示せよ
9行目:yが△なら画像△.gifを表示せよ
10行目:もしzが□なら画像□.gifを表示せよ

タイマーを100/1000秒に1回ONにする

タイマーを止める関数の定義

もしx=y and y=z ならば大当たりと表示

ボディ

<body>〜
</body>の
部分に入れる
<TABLE border="5">
<TR>
<TD width="100" height="150" align="center">
<IMG src="gif/1.gif" name="left" border="0">
</TD>
<TD width="100" height="150" align="center">
<IMG src="gif/1.gif" name="center" border="0">
</TD>
<TD width="100" height="150" align="center">
<IMG src="gif/1.gif" name="right" border="0">
</TD>
</TR>
</TABLE>
<form>
<input type="button" value="start"
onClick="clearTimeout(tID);start_slot()">
<input type="button" value="stop" onClick="stop_slot();">
</form>
1行3列の表を作成し、3つの画像を貼る


画像にはnameオプションで名前をつける










フォームでスタートボタンと
ストップボタンを作る

index