「スロットゲーム」のソースと解説

[Labyrinthe Noir]>[Top]>[Computer Forum]>[実用JavaScript集]>[こども工作教室]>

「スロットゲーム」のソースと解説

<html>
<head>
<title>スロットゲーム</title>
</head>
<body>

</body>
</html>

【保存ファイルの準備】

エディタ（メモ帳）とブラウザ（Internet Explorer）を使って基本のタグを書いたHTMLファイルを作成します。
まずはメモ帳を開き、左記のタグを記入して、デスクトップに「名前を付けて保存」します。ファイル名は「slot.html」です。
保存が出来たら、アイコンがデスクトップに出てくるので、ダブルクリックして開きます。
画面の左右にメモ帳とブラウザそれぞれのウインドウを置いて作業しましょう。
メモ帳を閉じてしまった場合は、アイコンの上で右クリックしてショートカットメニューを表示させます。「プログラムから開く」の中から「NotePad」を選ぶと、メモ帳でファイルを開くことができます。

・ <title></title>の役割を確認しよう。
・<body></body>がブラウザのどこにあるのか確認しよう。
・タグが前後で対になっていることを覚えておこう。

入力の間違いは「Back Space」キーで修正します。
カーソルの移動や編集をキーボードで操作することに慣れよう。

<html>
<head>
<title>スロットゲーム</title>
</head>
<body>
<h3>スロットゲーム</h3>
<hr>
</body>
</html>

【文字の表示】

次の工程を１つ１つ保存とブラウザの更新を繰り返して、どこがどう変わるのか確認しながらやると、わかりやすいでしょう。

（１）<body></body>の間に文字を書きます。
（２）<hr>で線を引きましょう。このように終わりのタグがない場合もあります。
（３）<h3></h3>で文字を大きくすることができます。

上書き保存は「Ctrl」キー＋「S」キー。
ウインドウの切り替えは「Alt」キー＋「Tab」キー。
ブラウザの更新は「Ctrl」キー＋「R」キー。

<html>
<head>
<title>スロットゲーム</title>
</head>
<body>
<h3>スロットゲーム</h3>
<hr>
<table border="2">
<tr><td>☆</td><td>☆</td><td>☆</td></tr>
<tr><td>☆</td><td>☆</td><td>☆</td></tr>
</table>
</body>
</html>

【テーブルの作成】

テーブルをタグの意味を考えながら作成しましょう。
改めてタグの入れ子構造（タグの中にタグを書くこと）を理解しよう。

入れ子構造（いれここうぞう）とは、次のような状態です。

下の状態は間違っています。

終わりのタグが必要なのに抜けてしまったりしないように注意しましょう。

（１）<table></table>で大きな棚を作ります。
（２）<tr></tr>で棚を横に仕切るために、物を入れるための板を用意します。
（３）<td></td>で棚板を縦に仕切るために、仕切り板を用意します。これがデータを入れる箱になります。
（４）テーブル全体を表示させるために、borderオプションで枠の大きさを指定します。また、<td></td>の間には仮のデータとして文字を入れましょう。

範囲指定は、「Shift」キー＋カーソルキー。
複写（コピー）は「Ctrl」キー＋「C」キー。
貼り付け（ペースト）は「Ctrl」キー＋「V」キー。
失敗したときの取り消し（アンドゥ）は「Ctrl」キー＋「Z」キー。

【スクリプトの準備】

スクリプトを書くための準備をしましょう。<script>タグを用意します。

次に初期設定を作ります。
「img」というデータの入れ物（変数）を用意して、そこにスロットの出目となる絵柄を入れておきます。
ここでは、配列変数という複数のデータを１つの箱で管理します。この大きな箱には学校の下駄箱のように小さな箱（要素）に分かれていて、名前が番号で付けられています。

変数の名前	img
要素の名前	0	1	2	3	4	5
要素のデータ	－	●	■	♪	☆	★

上の例では要素の数は６ですが、要素の番号は０～５になります。１つの小箱を指す場合は「img[0]」と「[]」に要素の番号を入れて書きます。

スクリプトの各行の最後には「;」が必要になることも忘れないでください。

絵柄は自由に考えてみましょう。「ほし」「まる」「おんぷ」「しかく」「きごう」などで変換すると色々な記号が見つかります。
ここで大事なことは、一番左（０番）がハズレで、右に行くほど点数が高くなるように作りますので、それを意識して絵柄を決めてください。

<html>
<head>
<title>スロットゲーム</title>
</head>
<body>
<h3>スロットゲーム</h3>
<hr>
<table border="2">
<tr>
<td><div id="dram0">☆</div></td>
<td><div id="dram1">☆</div></td>
<td><div id="dram2">☆</div></td>
</tr>
<tr>
<td><input type="button" value="おす"></td>
<td><input type="button" value="おす"></td>
<td><input type="button" value="おす"></td>
</tr>
</table>

【表示場所の作成】

スロットの絵柄（出目）を表示するために、テーブル内の箱に名前をつけます。
テーブルの1行目がスロットの表示部分になります。先ほど並列変数imgで用意した絵柄を置くために、場所を示す名前が必要です。そこで、<div>タグを使ってIDで名称を付けておきます。表示部は３つありますので、それぞれ似ているけども違う名前を付けておきます。今回は「dram」（ドラム）という言葉の後に数字を付けて、どれが何番目の絵柄かわかるようにしておきます。

次に、テーブルの2行目にはスロットらしく停止ボタンを置きます。「☆」を消して、<input>タグを書きます。これで見た目はスロットらしくなりました。
ボタンの<input>タグには、必ずtypeオプションでbutton（ボタン）だと書いておかなければいけません。valueオプションはボタンの上に表示される文字です。このタグも終わりのタグはありません。

テーブルが横に長くなると判りにくいので、改行を入れて、見た目を整頓しています。こうしておくとコピーもしやすくなります。

行をコピーするときは、行の先頭にカーソルを置いて、「Shift」＋「↓」で簡単に範囲指定できます。
１つの行をコピーして３つにする場合、行を範囲指定して「Ctrl」＋「C」で複写したら、一旦指定を解除するために「↓」を押します。「↑」で上に戻ってから、「Ctrl」＋「V」を２回押して、２回貼り付けをしましょう。

document.getElementById("dram0").innerHTML = img[0];
document.getElementById("dram1").innerHTML = img[0];
document.getElementById("dram2").innerHTML = img[0];
</script>
</body>
</html>

【初期設定】

スクリプトに出目の最初の状態がハズレになるように書きましょう。これがページを開いたときの最初の状態になります。
このように最初の状態を決めるのが初期設定の役割です。

ここでは配列変数imgから絵柄を取り出して、テーブルの３つの箱に入れています。
配列変数の要素のように、数字の順番を数えるとき、「１」から数えるのではなく「０」から数えることがプログラムではよくあります。そのため、テーブルの箱にも「dram0」から名前を付けてあります。

スクリプトを細かく見ると、追加の3行はそれぞれ３つの箱を示しています。違いは箱のIDを示す部分ですね。
「document」とは、画面に表示された内容を指しています。その中から「dram0」というIDを探しなさいというのが「getElemenetById("dram0")」です。さらに「innerHTML」は、そのIDで示された部分に「HTMLの書式」で書かれたデータを入れなさいということです。

HTMLの書式（しょしき）というのは、タグを使った表現のことです。
ただ文字を書くだけでなくタグがあったら、ちゃんとタグとして表現してくださいという意味になります。
「innerHTML」と違って、タグを無視しなさいという指示もできます。その場合は「innerText」または「innerContent」を使います。
Internet Explorerでは「innerText」を、Firefoxでは「innerContent」を使います。ここはブラウザによって変わる部分なので、少し扱いが難しくなります。

プログラムで使われる「=」は、右から左へデータを移し替える「代入」という意味になります。
「img[0]」というのは、配列変数imgの0番要素のことですから、「－」ということになります。
「－」をID「dram0」に入れなさいというのが1行目です。後の2行も別の箱に「－」を入れています。

代入（だいにゅう）は、プログラムの中では何度も使われます。
データを足したり、消したり、形を変えることで、色々なことを行うのがプログラムです。
変数を使って、データを取り出し、データを加工して、データを表示するというのが、基本的なデータの流れになると思います。
これがユーザーが入力し、計算し、答えを出すというコンピュータの基本動作となります。プログラムはそれの繰り返しで、色々な仕事をしています。

<html>
<head>
<title>スロットゲーム</title>
</head>
<body>
<h3>スロットゲーム</h3>
<hr>
<table border="2">
<tr>
<td><div id="dram0">☆</div></td>
<td><div id="dram1">☆</div></td>
<td><div id="dram2">☆</div></td>
</tr>
<tr>
<td><input type="button" value="おす" onClick="dramstop(0)"></td>
<td><input type="button" value="おす" onClick="dramstop(1)"></td>
<td><input type="button" value="おす" onClick="dramstop(2)"></td>
</tr>
</table>

document.getElementById("dram0").innerHTML = img[0];
document.getElementById("dram1").innerHTML = img[0];
document.getElementById("dram2").innerHTML = img[0];

function dramstop(btn) {
r = Math.floor(Math.random() * 6);
document.getElementById("dram"+btn).innerHTML = img[r];
}
</script>
</body>
</html>

【ボタンにイベントを追加】

ボタンを押すと、出目の絵柄が変化するようにプログラムを書いてみましょう。
押したときだけプログラムを実行するために「dramstop()」という名前のプログラム（ユーザー関数）を作ります。
そして、ボタンからそのプログラムを呼び出します。この時、どのボタンが押されたか分かるように、ボタンからユーザー関数内にある変数btnに対して数値が送られています。

ユーザー関数とは、名前の付けられた１つのプログラムです。

ユーザー関数は、スクリプトの初期設定やメインルーチンから呼び出したり、ボタン（イベント）から呼び出して使うだけでなく、同じユーザー関数（サブルーチン）からも呼び出すことができます。

ボタンには「onClick」というイベント対応の指示を書いています。これはボタンをクリックしたら次のことをしなさいという意味になります。ここでは、次のこととは「dramstop()」を呼び出すことです。このとき、()の中に引き渡したいデータを置くことができます。
ボタンと出目は連動しますので、0番のボタンを押すと0番の出目が表示されないといけません。そこで、ただ「ボタンを押したよ」と伝えるだけでは説明が足りないので、「0番のボタンを押したよ」伝えているのです。

では、次にユーザー関数「dramstop()」の方を見てみましょう。
必ず「funciotn」で始めるのが約束事です。その後にユーザー関数名を書いて、続く()の中に送られてくるデータを引き継ぐための変数名を書きます。そして「{」を置いて、次の「}」までが１つのユーザー関数であることを示しています。

次の「}」までと書きましたが、この「{」と「}」は、if文やfor文などの命令でも使われます。もちろん、それらは入れ子構造になりますので、一番外側にある「}」が最後ということになります。

dramstop()の1行目は、変数ｒに代入する式です。
Mathは、計算をさせるという意味で、それに続く命令文で計算方法が変わります。
Math.floor()は、小数点以下を切り捨てる計算をします。
Math.random()は、０から１までの数字（乱数）をパソコンが勝手に作り出します。
計算式や命令の書式は()の中から実行されますので、順番に見てみましょう。
最初にMath.random()が実行され、乱数が発生します。これに絵柄の数である６を掛けているので、０から６の間の数字がでてきます。この数字は、「０」とか「５」という綺麗な数字（整数）ではありません。「1.5768」とか「3.8694」というような小数です。そこで、Math.floor()を使って小数点以下を切って「1.5768」を「1」という整数にしてしまいます。これで「0」～「5」の６つの数字が出てくるのです。
ゲームには、偶然性を出すためにこのように乱数が使われます。何が起こるか分からないから面白いのです。

コンピュータでは「*」は掛け算の記号、「/」が割り算の記号です。

次に2行目を見てみましょう。
ここは、初期設定で作った部分に似ていますね。
「=」の右にある変数配列img[]には、変数rが使われています。乱数によって発生した数字が変数rに入っていますので、それを要素の番号にして、絵柄を決めているところです。
出目を表示する場所を示すのに「"dram"+btn」を使っています。これは「dram」という文字列に変数btnの内容を付け足すという意味です。変数btnには、ボタンが押されたときに数値が送られています。この数値はボタンの場所と対応した出目の表示場所を示す番号です。
真ん中のボタンを押すと「1」が送られてきて、組み合わさると「dram1」となるので、ID「dram1」に対して絵柄を表示しているのです。

ユーザーがマウスやキーボードを使った時に反応させることイベント処理と言います。

<html>
<head>
<title>スロットゲーム</title>
</head>
<body>
<h3>スロットゲーム</h3>
<hr>
<table border="2">
<tr>
<td><div id="dram0">☆</div></td>
<td><div id="dram1">☆</div></td>
<td><div id="dram2">☆</div></td>
</tr>
<tr>
<td><input type="button" value="おす" onClick="dramstop(0)"></td>
<td><input type="button" value="おす" onClick="dramstop(1)"></td>
<td><input type="button" value="おす" onClick="dramstop(2)"></td>
</tr>
<tr>
<td colspan="3"><input type="button" value="リセット" onClick="dramreset()"></td>
</tr>
</table>

dramreset();

function dramreset() {
document.getElementById("dram0").innerHTML = img[0];
document.getElementById("dram1").innerHTML = img[0];
document.getElementById("dram2").innerHTML = img[0];
}

function dramstop(btn) {
r = Math.floor(Math.random() * 6);
document.getElementById("dram"+btn).innerHTML = img[r];
}
</script>
</body>
</html>

【初期化用のボタンを追加】

スロットを使ったら、表示を最初の状態にリセットする機能を作りましょう。
テーブルに3行目を追加して、<td>のオプションとして「colspan」を使い、横に並ぶ３つの箱を１つにします。

リセットの機能は「dramreset()」というユーザー関数にまとめて、ボタンから呼び出しましょう。
初期設定の中でドラムをハズレ３つの状態にしていましたが、これをdramreset()の中に移動します。
そして、初期設定の最後で「dramreset()」を呼び出して、ドラムの初期化を実行させます。

このように動作中に変化した部分を最初の状態に戻すことを初期化といいます。

変数配列imgは、なぜdramreset()の中に入れないのか分かりますか？
ドラムの絵柄の元のデータであり、これは途中で変わるわけではありません。
<div id="dram0"></div>の部分は出目として変化しますので、元の状態に戻す場合、dram0を初期化する必要があります。
しかし、配列変数imgは中身を取り出していますが、中身は変わりませんので、最初に1度だけ設定すれば、あとは設定をやり直す必要がないのです。

<html>
<head>
<title>スロットゲーム</title>
</head>
<body>
<h3>スロットゲーム</h3>
<hr>
<form name="slot">
<table border="2">
<tr>
<td><div id="dram0">☆</div></td>
<td><div id="dram1">☆</div></td>
<td><div id="dram2">☆</div></td>
</tr>
<tr>
<td><input type="button" value="おす" onClick="dramstop(0)"></td>
<td><input type="button" value="おす" onClick="dramstop(1)"></td>
<td><input type="button" value="おす" onClick="dramstop(2)"></td>
</tr>
<tr>
<td colspan="3"><input type="button" value="リセット" onClick="dramreset()"></td>
</tr>
</table>
</form>

dramreset();

function dramreset() {
document.getElementById("dram0").innerHTML = img[0];
document.getElementById("dram1").innerHTML = img[0];
document.getElementById("dram2").innerHTML = img[0];
document.slot.elements[0].disabled = false;
document.slot.elements[1].disabled = false;
document.slot.elements[2].disabled = false;
}

function dramstop(btn) {
r = Math.floor(Math.random() * 6);
document.getElementById("dram"+btn).innerHTML = img[r];
document.slot.elements[btn].disabled = true;
}
</script>
</body>
</html>

【問題点：出目を選べる】

同じボタンを何度も押して絵柄を替えることができたのでは、公正な遊びができません。
そこで、ドラムを止めるボタンは1度しか押せないようにしましょう。
そして、リセットボタンを押すと、また使える状態に戻るようにします。

プログラムからボタンを選ぶ必要があるので、テーブルの前後に<form></form>を追加してフォームに名前を付けます。
ボタンにも名前を付けてもいいのですが、フォームに名前があるのでフォームの部品として番号で呼び出すことができるようになります。

<input>は、正しくは<form>タグの中で使われるものです。
そのため、名前を付ける付けないにかかわらず、<form>タグを書いておくようにしましょう。

<input>にnameまたはidオプションで名前を付けると、「<input name="btn0" id="btn0">」のようになります。２つとも付けてもかまいません。

スクリプトから呼び出す３つの方法を並べてみましょう。。

	btn0を直接指示する場合	変数btnで指示する場合
部品番号	document.slot.elements[0]	document.slot.elements[btn]
name	document.slot.btn0 document.slot.elements["btn0"]	document.slot.elements["btn"+btn]
id	document.getElementById("btn0")	document.getElementById("btn"+btn)

まず初期化のプログラムを書きましょう。
リセットの処理「dramreset()」に、使えなくなったボタンを元に戻すプログラムを書きます。
３つのボタンに対して、３つの同じような指示が並んでいます。
これらは、それぞれのボタンに対して、使用禁止の状態にするかどうかを決めています。
その１つ目を見てみましょう。
「document」は、表示の内容全体を指していましたね。次の「slot」はフォームの名前です。次にそのフォームの中の部品を番号で示しています。そして、「disabled」が使用禁止の意味です。
「=」の右にある「false」は、使用禁止の状態にする（true）か、しない（false）かを決めています。ここでは、禁止にしないので、「false」になります。

２つの状態を表すのに、よく「0」と「1」が使われます。
これはコンピュータが２進数という、２つの数字で全てを表現しているからです。
例えば、yes（はい）とno（いいえ）、正しいか間違いかをどっちの数字で表すのか、ちょっとわかりにくいですね。
そこでこういう場合に２つの言葉を使って表現するのです。それが「true」と「false」です。
「true」は、真（しん）のことで、「はい」「正しい」という意味になります。
「false」は、偽（ぎ）のことで、「いいえ」「間違い」という意味になります。

次に、dramstop()で、ボタンを押した時に、ボタンを使用禁止にします。
ここでは、押されたボタンだけを使用禁止にします。変数btnを使えば送られてきたボタンの番号がわかります。「elements[btn]」で、フォームの部品番号を示しています。
ボタンの使用禁止状態は「true」で、使用禁止となります。ボタンが平面的なグレー表示になり、クリックできない状態に変化します。

このように、部品の状態を表す項目をプロパティと呼びます。

<html>
<head>
<title>スロットゲーム</title>
</head>
<body>
<h3>スロットゲーム</h3>
<hr>
<form name="slot">
<table border="2">
<tr>
<th colspan="3"><div id="score">0点</div></th>
</tr>
<tr>
<td><div id="dram0">☆</div></td>
<td><div id="dram1">☆</div></td>
<td><div id="dram2">☆</div></td>
</tr>
<tr>
<td><input type="button" value="おす" onClick="dramstop(0)"></td>
<td><input type="button" value="おす" onClick="dramstop(1)"></td>
<td><input type="button" value="おす" onClick="dramstop(2)"></td>
</tr>
<tr>
<td colspan="3"><input type="button" value="リセット" onClick="dramreset()"></td>
</tr>
</table>
</form>

（省略）

【改良点：得点の表示(1)】

スロットの出目の上に得点が表示されるようにしましょう。

テーブルの1行目に表示の場所を新たに作ります。
ここでは<td></td>ではなく、<th></th>を使ってみます。見た目ではっきりと違いが分かると思います。
<td>は普通の箱ですが、<th>はヘッダという意味を持っています。下の表で、左のようにタグを書くと、右のように表示されます。<br>は改行です。

タグ	表示
<td>☆<br>☆☆<br>☆☆☆</td>	☆ ☆☆ ☆☆☆
<th>☆<br>☆☆<br>☆☆☆</th>	☆ ☆☆ ☆☆☆

得点表示部分も横に３つの箱を１つにして使います。「colspan」が<th>タグ内にあります。
そして、<div>タグを使って「score」というIDを付けています。その内側に最初の点数を書いておきます。

（省略）

dramreset();

function dramstop(btn) {
r = Math.floor(Math.random() * 6);
document.getElementById("dram"+btn).innerHTML = img[r];
document.slot.elements[btn].disabled = true;
scr += r;
document.getElementById("score").innerHTML = scr + "点";
}
</script>
</body>
</html>

【改良点：得点の表示(2)】

それではスクリプトを書きましょう。
得点は変数scrに入れることにします。初期化のとき（初期設定とリセットボタンを押したとき）に「0」にする必要があるので、dramreset()内で変数scrを「0」にしています。

次に、絵柄ごとに得点を決めましょう。絵柄の番号がハズレは「0」で、一番上が「5」でした。絵柄の順番がそのまま得点にできそうです。
ボタンの絵柄は乱数を処理して変数ｒに入れらます。これをそのまま点数にします。
得点をscrに足すのはボタンを押してドラムを止めたときになりますので、dramstop()に足し算の代入式を書きます。
変数rを利用するので、それより後ろにします。

「scr += r」は「scr = scr + r」を省略したものです。
代入式は右から見るとわかりやすいと思います。長い式から「scrとrを足して、これをscrに入れなさい」ということが分かります。
省略した方を言葉にしてみると「ｓｃｒをrの分だけ増やしなさい」という感じでしょうか。
どちらも結果は同じですね。

得点の表示部分はIDが「score」になっていますので、getElementById()を使っています。
scrをそのまま代入すると「点」が消えてしまうので、これも付け足して表示させます。

これでほぼ基本的なスロットゲームとしての機能を組み入れたことになります。

【この時点の slot.html を別枠で表示】

【完成】

今後は、点数を大きくしたり、背景に色を付けたり、絵柄に色を付けたり、絵柄を画像に置き換えたり、スロットの絵柄の組み合わせ（役）で点数を加算する仕組みなど、を考えて改良しましょう。

改良のためのヒント：
・点数を大きくしたい
　乱数に掛け算します。例：r = r * 10;
・絵柄に色を付けたい
　 <font>タグとcolorオプションを使う。ただし、「"」の中では「"」は使えないので「'」を使うこと。例："<font color='#FFFF00'>★</font>"
・絵柄を画像にしたい
　<img>タグを使いましょう。ファイル名はsrcで指定します。例："<img src='photo.jpg'>"
・絵柄が揃ったら点数を加算したい
　ボタンを押した後に、３つの絵柄が同じことを確認して点数を増やします。

戻る