テキストエディタ（メモ帳）を使って基本のタグを書いたHTMLファイルを作成します。
Winidowsの場合、メモ帳アプリを開き、下記のタグを記入します。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>スロットゲーム</title>
</head>
<body>
</body>
</html>
「名前を付けて保存」をするときは、文字コードに気をつけてください。HTML内に<meta>タグで記述したのと同じ「UFT-8」にしてからファイル名を「slot.html」としてから保存します。
保存が出来たら、アイコンがデスクトップに出てくるので、ダブルクリックしてブラウザで開きます。
メモ帳とブラウザの画面を両方開いたまま、切替ながら作業をしましょう。
メモ帳を閉じてしまった場合は、アイコンの上で右クリックしてショートカットメニューを表示させます。「プログラムから開く」の中から「メモ帳」を選ぶとファイルを開くことができます。
入力の間違いは「Back Space」キーで修正します。
カーソルの移動や編集をキーボードで操作することに慣れましょう。
データの保存とブラウザの更新を作業ごとに繰り返しながら、画面のどこに変化が見られるか確認しましょう。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>スロットゲーム</title> </head> <body> <h3>スロットゲーム</h3> <hr>
</body> </html>
（１）<body></body>の間にテキストを入力します。
（２）<hr>で線を引きましょう。このように終わりのタグがない場合もあります。
（３）<h3></h3>で文字を大きくすることができます。
上書き保存は「Ctrl」キー＋「S」キー。
ウインドウの切り替えは「Alt」キー＋「Tab」キー。
ブラウザ画面の更新（再読込）は「Ctrl」キー＋「R」キー。
テーブルをタグの意味を考えながら作成しましょう。
改めてタグの入れ子構造（タグの中にタグを書くこと）を理解しよう。
入れ子構造（いれここうぞう）とは、次のような状態です。
<html><body></body></html>
下の状態は間違っています。
<html><body></html></body>
終わりのタグが必要なのに抜けてしまったりしないように注意しましょう。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<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>
(1) <table></table>で大きな棚を作ります。
(2)
<tr></tr>で棚を横に仕切るために、物を入れるための板を用意します。
(3)
<td></td>で棚板を縦に仕切るために、仕切り板を用意します。これがデータを入れる箱になります。
(4) テーブル全体を表示させるために、borderオプションで枠の大きさを指定します。また、<td></td>の間には仮のデータとして文字を入れましょう。
入力作業をするときは、マウスを使って操作するよりもキーボードの操作を覚えた方が作業がしやすくなります。
範囲指定は、「Shift」キー＋カーソルキー。
複写（コピー）は「Ctrl」キー＋「C」キー。
貼り付け（ペースト）は「Ctrl」キー＋「V」キー。
失敗したときの取り消し（アンドゥ）は「Ctrl」キー＋「Z」キー。
スクリプトを書くための準備をしましょう。<script>タグを用意して、初期設定を作ります。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<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> <script type="text/javascript"> img = new Array("－","●","■","♪","☆","★"); </script> </body> </html>
変数imgはデータの入れ物です。そこにスロットの出目となる絵柄を入れておきます。
ここでは、一つの変数の中に６つのデータを入れるため、特別な変数を用意します。これを配列変数と呼び、複数のデータを１つの箱で管理します。イメージとしては、学校の大きな下駄箱に１つ１つ仕切りがあるように、仕切りの中にデータを入れて、名札の代わりに番号を付けます。この１つの仕切りを要素と言います。
| 変数の名前 | img | |||||
|---|---|---|---|---|---|---|
| 要素の番号 | 0 | 1 | 2 | 3 | 4 | 5 |
| 要素のデータ | － | ● | ■ | ♪ | ☆ | ★ |
上の例では要素の数は6ですが、要素の番号は0～5になります。必ず0から始まります。
１つの小箱を指す場合は「img[0]」と「[]」に要素の番号を入れて書きます。
スクリプトの各行の最後には「;」が必要になることも忘れないでください。
絵柄は自由に考えてみましょう。「ほし」「まる」「おんぷ」「しかく」「きごう」などで変換すると色々な記号が見つかります。
ここで大事なことは、一番左（０番）がハズレで、右に行くほど点数が高くなるように作りますので、それを意識して絵柄を決めてください。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<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="おす"></td><td><input type="button" value="おす"></td><td><input type="button" value="おす"></td></tr> </table> </form> <script type="text/javascript"> img = new Array("－","●","■","♪","☆","★"); </script> </body> </html>
スロットの絵柄（出目）を表示するために、テーブル内の箱に名前をつけます。
テーブルの1行目がスロットの表示部分になります。先ほど並列変数imgで用意した絵柄を置くために、場所を示す名前が必要です。そこで、<div>タグを使ってIDで名称を付けておきます。表示部は３つありますので、それぞれ似ているけども違う名前を付けておきます。今回は「dram」（ドラム）という言葉の後に数字を付けて、どれが何番目の絵柄かわかるようにしておきます。
次に、テーブルの2行目にはスロットらしく停止ボタンを置きます。「☆」を消して、<input>タグを書きます。これで見た目はスロットらしくなりました。
<input>タグはフォーム用のタグなのでテーブルの前後を<form>タグで囲います。（HTML5以降は不要になります）
ボタンの<input>タグには、必ずtypeオプションでbutton（ボタン）だと書いておかなければいけません。valueオプションはボタンの上に表示される文字です。このタグも終わりのタグはありません。
（省略）
<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> （省略）
テーブルが横に長くなると判りにくいので、改行を入れて、tabキーでずらしておくと見やすくなります。
行をコピーするときは、行の先頭にカーソルを置いて、「Shift」＋「↓」で簡単に範囲指定できます。
１つの行をコピーして３つにする場合、行を範囲指定して「Ctrl」＋「C」で複写したら、一旦指定を解除するために「↓」を押します。「↑」で上に戻ってから、「Ctrl」＋「V」を２回押して、２回貼り付けをしましょう。
スクリプトに出目の最初の状態がハズレになるように書きましょう。これがページを開いたときの最初の状態になります。
このように最初の状態を決めるのが初期設定の役割です。
（省略） <script type="text/javascript"> img = new Array("－","●","■","♪","☆","★"); document.getElementById("dram0").innerHTML = img[0]; document.getElementById("dram1").innerHTML = img[0]; document.getElementById("dram2").innerHTML = img[0]; </script> （省略）
ここでは配列変数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行も別の箱に「－」を入れています。
代入（だいにゅう）は、プログラムの中では何度も使われます。
データを足したり、消したり、形を変えることで、色々なことを行うのがプログラムです。
変数を使って、データを取り出し、データを加工して、データを表示するというのが、基本的なデータの流れになると思います。
これがユーザーが入力し、計算し、答えを出すというコンピュータの基本動作となります。プログラムはそれの繰り返しで、色々な仕事をしています。
ボタンを押すと、出目の絵柄が変化するようにプログラムを書いてみましょう。
押したときだけプログラムを実行するために「dramstop()」という名前のプログラム（ユーザー関数）を作ります。
そして、ボタンからそのプログラムを呼び出します。この時、どのボタンが押されたか分かるように、ボタンからユーザー関数内にある変数btnに対して数値が送られています。
ユーザー関数とは、名前の付けられた１つのプログラムです。
<script>タグ内に置きますが、名前を呼んであげないと、実行はされません。
これは必要な時にだけ、呼び出して使うものだからです。
初期設定の後に実行するプログラムをメインルーチンと呼びますが、必要な時にだけ呼び出すプログラムをサブルーチンと呼びます。
ユーザー関数は、スクリプトの初期設定やメインルーチンから呼び出したり、ボタン（イベント）から呼び出して使うだけでなく、同じユーザー関数（サブルーチン）からも呼び出すことができます。
（省略） <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> </table> </form> <script type="text/javascript"> img = new Array("－","●","■","♪","☆","★"); 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> （省略）
ボタンには「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」に対して絵柄を表示しているのです。
ユーザーがマウスやキーボードを使った時に反応させることイベント処理と言います。
スロットを使ったら、表示を最初の状態にリセットする機能を作りましょう。
（省略） <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> <script type="text/javascript"> img = new Array("－","●","■","♪","☆","★"); 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> （省略）
テーブルに3行目を追加して、<td>のオプションとして「colspan」を使い、横に並ぶ３つの箱を１つにします。
リセットの機能は「dramreset()」というユーザー関数にまとめて、ボタンから呼び出しましょう。
初期設定の中でドラムをハズレ３つの状態にしていましたが、これをdramreset()の中に移動します。
そして、初期設定の最後で「dramreset()」を呼び出して、ドラムの初期化を実行させます。
このように動作中に変化した部分を最初の状態に戻すことを初期化といいます。
変数配列imgは、なぜdramreset()の中に入れないのか分かりますか？
ドラムの絵柄の元のデータであり、これは途中で変わるわけではありません。
<div id="dram0"></div>の部分は出目として変化しますので、元の状態に戻す場合、dram0を初期化する必要があります。
しかし、配列変数imgは中身を取り出していますが、中身は変わりませんので、最初に1度だけ設定すれば、あとは設定をやり直す必要がないのです。
同じボタンを何度も押して絵柄を替えることができたのでは、公正な遊びができません。
そこで、ドラムを止めるボタンは1度しか押せないようにしましょう。
そして、リセットボタンを押すと、また使える状態に戻るようにします。
（省略） <script type="text/javascript"> img = new Array("－","●","■","♪","☆","★"); 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> （省略）
まず初期化のプログラムを書きましょう。
リセットの処理「dramreset()」に、使えなくなったボタンを元に戻すプログラムを書きます。
３つのボタンに対して、３つの同じような指示が並んでいます。
これらは、それぞれのボタンに対して、使用禁止の状態にするかどうかを決めています。
その１つ目を見てみましょう。
「document」は、表示の内容全体を指していましたね。次の「slot」はフォームの名前です。次にそのフォームの中の部品を番号で示しています。そして、「disabled」が使用禁止の意味です。
「=」の右にある「false」は、使用禁止の状態にする（true）か、しない（false）かを決めています。ここでは、禁止にしないので、「false」になります。
２つの状態を表すのに、よく「0」と「1」が使われます。
これはコンピュータが２進数という、２つの数字で全てを表現しているからです。
例えば、yes（はい）とno（いいえ）、正しいか間違いかをどっちの数字で表すのか、ちょっとわかりにくいですね。
そこでこういう場合に２つの言葉を使って表現するのです。それが「true」と「false」です。
「true」は、真（しん）のことで、「はい」「正しい」という意味になります。
「false」は、偽（ぎ）のことで、「いいえ」「間違い」という意味になります。
次に、dramstop()で、ボタンを押した時に、ボタンを使用禁止にします。
ここでは、押されたボタンだけを使用禁止にします。変数btnを使えば送られてきたボタンの番号がわかります。「elements[btn]」で、フォームの部品番号を示しています。
ボタンの使用禁止状態は「true」で、使用禁止となります。ボタンが平面的なグレー表示になり、クリックできない状態に変化します。
このように、部品の状態を表す項目をプロパティと呼びます。
スロットの出目の上に得点が表示されるようにします。
まずは、テーブル内に追加の項目を作ります。
（省略） <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行目の上に新たな行を作ります。
ここでは<td>タグではなく、<th>タグを使ってみましょう。見た目にハッキリとした違いがあります。
<td>は普通の箱ですが、<th>はヘッダという意味を持っています。下の表で見比べてみてください。
| タグ | 表示 | |
|---|---|---|
| <td>タグ | <td>☆<br>☆☆<br>☆☆☆</td> | ☆ |
| <th>タグ | <th>☆<br>☆☆<br>☆☆☆</th> | ☆ ☆☆ ☆☆☆ |
得点表示部分も横に３つの箱を１つにして使います。「colspan」が<th>タグ内にあります。
そして、<div>タグを使って「score」というIDを付けています。その内側に最初の点数を書いておきます。
次はスクリプト部分を書きましょう。
（省略） <script type="text/javascript"> img = new Array("－","●","■","♪","☆","★"); 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; scr = 0; } 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> （省略）
得点は変数scrに入れることにします。初期化のとき（初期設定とリセットボタンを押したとき）に「0」にする必要があるので、dramreset()内で変数scrを「0」にしています。
次に、絵柄ごとに得点を決めましょう。絵柄の番号がハズレは「0」で、一番上が「5」でした。絵柄の順番がそのまま得点にできそうです。
ボタンの絵柄は乱数を処理して変数ｒに入れらます。これをそのまま点数にします。
得点をscrに足すのはボタンを押してドラムを止めたときになりますので、dramstop()に足し算の代入式を書きます。
変数rを利用するので、それより後ろにします。
「scr += r」は「scr = scr + r」を省略したものです。
代入式は右から見るとわかりやすいと思います。長い式から「scrとrを足して、これをscrに入れなさい」ということが分かります。
省略した方を言葉にしてみると「ｓｃｒをrの分だけ増やしなさい」という感じでしょうか。
どちらも結果は同じですね。
得点の表示部分はIDが「score」になっていますので、getElementById()を使っています。
scrをそのまま代入すると「点」が消えてしまうので、これも付け足して表示させます。
これでほぼ基本的なスロットゲームとしての機能を組み入れたことになります。
今後は、点数を大きくしたり、背景に色を付けたり、絵柄に色を付けたり、絵柄を画像に置き換えたり、スロットの絵柄の組み合わせ（役）で点数を加算する仕組みなど、を考えて改良しましょう。
改良のためのヒント：
・点数を大きくしたい
乱数に掛け算します。例：r = r * 10;
・絵柄に色を付けたい
<font>タグとcolorオプションを使う。ただし、「"」の中では「"」は使えないので「'」を使うこと。例："<font color='#FFFF00'>★</font>"
・絵柄を画像にしたい
<img>タグを使いましょう。ファイル名はsrcで指定します。例："<img src='photo.jpg'>"
・絵柄が揃ったら点数を加算したい
ボタンを押した後に、３つの絵柄が同じことを確認して点数を増やします。