<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
var dir = "./image/number/"; // 画像を格納しているディレクトリを指定します
var list = new Array();
for (var i = 0; i < 10; i++) {
list[i] = dir + i + ".gif"; // ここで擬似的に画像の配列をつくり
new Image().src = list[i]; // あらかじめキャッシュに入れておきます
}
var count = 0;
function slot() {
count++;
var l = Math.floor(Math.random() * 10); // 左リール用の乱数
var c = Math.floor(Math.random() * 10); // 中リール用の乱数
var r = Math.floor(Math.random() * 10); // 右リール用の乱数
document.left.src = list[l]; // name 属性に指定したそれぞれの表示部に
document.center.src = list[c]; // 上記の値に対する画像を表示します
document.right.src = list[r];
if (l == c && l == r && c == r) {
alert("あなたの当選確率は 1/" + count + " です。\n\nこの内部確率は 1/100 です。");
count = 0;
return;
}
setTimeout("slot();", 100); // リールの回転速度（10〜100程度）
}
// -->
</script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="1">
<tr>
<td><img src="./image/number/7.gif" width="18" height="24" border="0" alt="" name="left"></td>
<td><img src="./image/number/7.gif" width="18" height="24" border="0" alt="" name="center"></td>
<td><img src="./image/number/7.gif" width="18" height="24" border="0" alt="" name="right"></td>
</tr>
</table>
<form action="#">
<input type="button" value="START" onclick="if (!count) slot();">
<input type="button" value="RESET" onclick="location.reload();">
</form>
</body>
</html>
はじめに10枚の連番（0.gif 〜 9.gif のような）の画像を用意します。このページから見て image というディレクトリの内の number というディレクトリの中にある 0.gif 〜 9.gif を使って説明します。
まず、new Array() によって変数 list は配列として宣言しておきます。list[i] = dir + i + ".gif"; において変数 dir には先ほど指定した画像があるディレクトリのパスが参照されて、変数 i には for 文で0〜9回繰り返し実行されていますのでそれぞれの連番画像の値が代入されて、それと同時に 変数list[i] にも同じように代入された値が作られます。
list[0] = "./image/number/0.gif"; : list[9] = "./image/number/9.gif";
関数 slot が呼ばれる回数をカウントするために、変数 count をインクリメントさせて回数をカウントします。回転する部分については、0〜9のランダムな乱数をそれぞれ作成します。それを img タグの name 属性に指定した場所にそれぞれ表示します。これらを繰り返していき、3つの乱数が全て一致したら当たりとなり、アラート表示します。
回転中にスタートボタンを押すと次々に回転してしまうので、呼び出す関数には if (!count) slot(); のようにしておいてください。
 |
|
|