JavaScript
（スロットマシン) ここでは、JavaScript を使ってスロットマシンを作ります。 「スロットマシンを作る」と言っても、そう難しいものではありません。 「３枚のボードの数字を０から９まで順番に表示して、ボタンをクリックすると、それぞ れの札の動きが止まり、その結果によってメッセージが異なる。」 このようなものを作りましょう。 その評価方法として、以下のような異なるメッセージが出るようにします。 １．すべて同じ番号 → 「ブラボー」 ２．左から右のボードにかけて数字が１ずつ大きい → 「やったね」 ３．左から右のボードのほうが数字が大きい → 「まあええか」 ４．それ以外 → 「残念」 「SlotMachine」というフォルダ内にそのための必要な画像が入った「image」という名前 のついたフォルダがあります。そこには次のような画像があります。 おの ｋ 画像の下の文字列は その画 像の 名前で す。原理は「テーブルによって数字を表示するセルを３つ作り、そこに一定時間おきに０から ９までの数字を表示していく」ということです。 そのために、あらかじめ表示するための数字、評価メッセージを画像で作成しておく必 要があります。作成するときに数の画像のサイズ、メッセージ画像のサイズをきちんと考 えなければなりません。 ここでは、数の画像サイズを横、高さのサイズを（２００×４００）としています。ま た、メッセージ画像は（５００×２００）としています。 １ １１ １．．．新規．新規新規に新規ににｈｔｍｌにｈｔｍｌｈｔｍｌファイルｈｔｍｌファイルをファイルファイルをを作成を作成作成する作成するする。する。。 。 CSS と JavaScript を両方使いますので、（CSS ＆ JavaScript）のスケルトンを作成し て、それを SlotMachine.html で「SlotMachine」のフォルダに名前をつけて保存してくだ さい。 ２ ２２ ２．．タイトル．．タイトルタイトルとタイトルとと３と３桁３３桁桁の桁のの数画像の数画像数画像を数画像を挿入をを挿入挿入するための挿入するためのするためのテーブルするためのテーブルテーブルをテーブルを作をを作作る作るる。る。。 。 ページの最上部にタイトルを入れるためのテーブルを 1 行 1 列の設定で作ります。 さらにその下に数画像を挿入するためのテーブルを 1 行３列の設定で作ります。 一つ目のセルに「スロットマシン」と入力します。。 3. <html> <head> <title>スロットマシン</title>
<meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css">
<!-- --> </style>
<script Language = "JavaScript"> function MyFunc1(){ } </script> </head> <body> ここに Web ページの内容を書き込んでください </body> </html> タイトル 「スロットマシン」 <body> <table border=1> <tr> <td id = "dai">スロットマシン</td> </tr> </table> <table border=1> <tr> <td id = "g1"> </td> <td id = "g2"> </td> <td id = "g3"> </td> </tr> </table> </body> 一つ目のテーブルのセ ルに「dai」、２つ目の テーブルのセルに g1、 g2、g3 とういう名前を つけます。
２ ２２
２．．二．．二二つ二つつつ目目目の目ののテーブルのテーブルのテーブルテーブルのの１の１１つ１つつ目つ目目の目のセルののセルにセルセルにに数字に数字数字の数字のの１の１を１１をを表示を表示表示させる表示させるさせる。させる。。 。
本文部の最後部に JavaScript 部を設けて、そこにセルｇ１に表示させる関数 koma1() を書く。ヘッダー部の JavaScript 部の MyFunc() を消してその箇所に koma１() と書く。 そこに、ｇ１に数の１を表示させるように、
g1.innerHTML = "<img src = ./image/S1.jpg>"; と記入する。 ３ ３３ ３．．同．．同じように同同じようにじようにじようにｇｇｇ２ｇ２、ｇ２２、ｇ３、ｇ、ｇ３３の３ののセルのセルセルにセルに数画像にに数画像２数画像数画像２２，２，，３，３３を３を表示をを表示表示させる表示させるさせる。させる。。 。 同様にして、ｇ２、ｇ３に２，３の数を画像で表示させます。このための関数を koma2()、 koma3()とします。このための JavaScript のコードをヘッダー部と本文部に追加します。
<script Language = "JavaScript"> function koma1(){
g1.innerHTML = "<img src = ./image/S1.jpg>"; } </script> </head> <body> <table border=1> <tr> <td id = "dai">スロットマシン</td> </tr> </table> <table border=1> <tr> <td id = "g1"> </td> <td id = "g2"> </td> <td id = "g3"> </td> </tr> </table>
<script Language = "JavaScript"> koma1(); </script> </body> セルには全角スペースしか表示する ようになっていませんが、koma1（） が実行されると１の画像がそこに挿 入されることにより、画像のサイズが セルのサイズになる。
<script Language = "JavaScript"> function koma1(){
g1.innerHTML = "<img src = ./image/S1.jpg>"; }
function koma2(){
g2.innerHTML = "<img src = ./image/S2.jpg>"; }
function koma3(){
g3.innerHTML = "<img src = ./image/S3.jpg>"; }
</script>
<script Language = "JavaScript"> koma1(); koma2(); koma3(); </script> ヘッダー部の JavaScript 本文部の JavaScript
<script Language = "JavaScript"> var num1;
num1 = 0;
function koma1(){
g1.innerHTML = "<img src = ./image/S" + num1 + ".jpg>"; } num1 の初期値として０を与えて いますので、一つ目のセルの数と して０が表示されています。 ３ ３３ ３．．一．．一つ一一つつつ目目目の目ののセルのセルのセルセルのの画像の画像画像を画像をを０を００から０からから９から９までの９９までの数までのまでの数数を数をを順番を順番順番に順番にに入に入れ入入れれ替れ替替える替えるえる。える。。 。 ３ ３３ ３....１１１１ 一一一一つつ目つつ目目目のののの数画像数画像数画像数画像をを変数をを変数変数変数をををを使使使使ってって表現ってって表現表現表現するするするする。。。。 数画像を順番に入れ替える第 1 歩として数画像の名前を変数で表します。一つ目のセル に対しての数を表す変数なので ｎｕｍ１ を使いましょう。 もし、ｎｕｍ１＝２なら、 "S" + num1 + ".jpg" によって "S2.jpg" となります。これは２という数の画像 のファイル名を意味します。 そこで、０から９までの数画像を順番に表すためには、 "S" + num1 + ".jpg" として、num1 の値を０から９まで順番に変えていけばい いことになります。 またｇ１のセルに０から９までの数画像を順番に表示させるためには、今の場合には、 g1.innerHTML = "<img src = ./image/S" + num1 + ".jpg>"
として、このなかの num1 の値を０から９まで順番に変化させればいいことになります。 num1 の値 g1.innerHTML = "<img src = ./image/S" + num1 + ".jpg>"の結果
０ g1.innerHTML = "<img src = ./image/S0.jpg>"; １ g1.innerHTML = "<img src = ./image/S1.jpg>"; ２ g1.innerHTML = "<img src = ./image/S2.jpg>"; ３ g1.innerHTML = "<img src = ./image/S3.jpg>"; ４ g1.innerHTML = "<img src = ./image/S4.jpg>"; ５ g1.innerHTML = "<img src = ./image/S5.jpg>"; ６ g1.innerHTML = "<img src = ./image/S6.jpg>"; ７ g1.innerHTML = "<img src = ./image/S7.jpg>"; ８ g1.innerHTML = "<img src = ./image/S8.jpg>"; ９ g1.innerHTML = "<img src = ./image/S9.jpg>"; そこですることは、 変数 num1 の宣言、 num1 に初期値を与える、 関数 koma１（ ）に上の仕組みを与える。 ということですので、ヘッダー部の JavaScript 部を次のように変えます。 変数 num1 の宣言は、koma1（ ）の外側でします。 初期値も koma1（ ）の外側で与えます。
３ ３３ ３....２２２２ 一一一一つつつつ目目の目目のののセルセルセルセルのののの数数数数をを０をを０００からからからから９９９９までまでまでまで順番順番に順番順番ににに表示表示表示表示するするするする。。。。 一つ目のセルについての数画像を一定時間おきにひとつ大きい数の画像に変えていきま す。その方法は、変数 num１ に初期値を与えて、一定時間ごとに変数 num1 の値を０から ９の値を繰り返していって、それに対応する画像を表示します。 一定時間ごとにある処理を繰り返す方法は、setTimeout メソッドを使います。 例えば、setTimeout("koma1()",1000) とすると、1000 ミリ秒（1 秒)後に関数 koma１（） を実行する、ということになります。 koma１（）を 1000 ミリ秒ごとに繰り返させるためには、 koma1（）の関数内で setTimeout（"koma1（）",1000）を使います。つまり、 ここでは、
ここで、関数 koma1（）の外でのコード num1=0 は、最初の koma1（）の実行のときに 1 回 だけ実行されますが、２回目以降の koma1（）の実行のときは実行されません。 このことにより、０を出発点として１，２，３，４，５、・・・・と増えていきます。 これによって、 ファイル名は S0.jpg S1.jpg S2.jpg S3.jpg S4.jpg S5.jpg ・・・・ と変化して、表示される数は ０、１、２、３、４、５、・・・・・ と変化していきま す。しかし、９を表示した後は×が表示されます。 これは９の次は１０，１１，１２，１３・・・・・となり、これに対応する画像はない ために、×が表示されます。 これを回避するコードを追加します。 ０、１、２、３、・・・・・９、の次は０に帰るように次のコードを追加します。 このコードを追加した後のヘッダー部の JavaScript 部の関数 koma1（）は次のようになり ます。 koma1（）{ setTimeout("koma1()",1000); やらせたい処理のコードを書く }
<script Language = "JavaScript"> var num1;
num1 = 0;
function koma1(){
setTimeout("koma1()",500); num1 = num1 + 1;
g1.innerHTML = "<img src = ./image/S" + num1 + ".jpg>"; }
if ( num1 == 10 ) num1 = 0;
これで一つ目のセルについてのコードは完成です。 ３ ３３ ３....３３３ ３ ２２２つ２つつつ目目目目とと３とと３３３つめのつめのつめのセルつめのセルセルセルにににについてもついてもついてもついても１１つめの１１つめのつめのつめのセルセルセルセルとと同様とと同様同様な同様ななな処理処理の処理処理のののコードコードコードをコードを追加をを追加追加追加するするするする。。。。 1 つ目のセルと同じようにして、２つ目、３つ目のセルについての処理のコードをヘッ ダー部の JavaScript 部に追加してください。 ２つ目と３つ目ののセルの変数をそれぞれ、num2、num3 としてください。 num2 と num3 の初期値も０にすると、３つの数が同じ数で変化しますので、初期値を少し ずつ変えます。その部分のコードを挙げておきます。 どうでしょうか？ ３枚のボードの数が順番に変化していくでしょうか？ ４ ４４ ４．．最．．最最も最ももも左左の左左ののボードのボードボードのボードの動のの動きを動動きをきを停止きを停止させる停止停止させるさせる。させる。。 。 ４ ４４ ４....１１１１ ボタンボタンボタンボタンをを追加をを追加追加追加するするするする。。。。 「クリックすると最も左の数画像の動きが停止する」そのようなボタンを作成します。 最も左の数画像の動きを停止させるのでそのボタンに「Ｓｔｏｐ１」という文字を表示し ます。 ボタンはフォーム(アンケートのページを作る仕組み)上に使われるものですので、その 形式は右のようになっています。 今の場合は、テーブルのセル中にボタンを配置しま すので、「スロットマシン」のセルの右に新しいセル を追加してその中にボタンを配置します。 function koma1(){ setTimeout("koma1()",200); num1 = num1 + 1; if ( num1 == 10 ) num1 = 0;
g1.innerHTML = "<img src = ./image/S" + num1 + ".jpg>"; }
<script Language = "JavaScript"> var num1 , num2 , num3; num1 = 0; num2 = 3; num3 = 5; function koma1(){ ・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・ <form> <button> ボタンに表示する ためのものを書く </button> </form> <table border=1> <tr> <td id = "dai">スロットマシン</td> <td> <form> <button> Ｓｔｏｐ１ </button> </form> </td> </tr> </table> こ の 部 分 を 追加します。
４ ４４ ４....２２２２ 「「「「ボタンボタンをボタンボタンをををクリッククリッククリッククリックするとするとするとすると動動きが動動きがきがきが停止停止停止停止するするするする」」よ」」よよようにするうにするうにするうにする。。。。 「ボタンをクリック」したら「動きが停止する」という、この仕組みを実現させるため には、 「クリックしたら」 → onClick メソッドを使う 「動きが停止する（タイムアウト処理のクリア）」 → clearTimuout メソッドを使う 「ボタンをクリックしたら・・・」 ということなので、 この処理はボタンのタグ内に仕込みます。 「タイムアウト処理のクリア」は、 タイムアウトをセットするときに（setTimeout メ ソッドを使ったときに返されるＩＤを取得しておいて、そのＩＤをクリアする、という形 式をとります。例えば、 timeID = setTimeout("××", 1000); タイムアウト処理時に意識的にＩＤを取得 clearTimeout ( timeID ) ; 取得したタイムアウトＩＤをクリア
今の場合、数のボードが３つあるのでタイムアウトＩＤを timeID1, timeID2, timeID3 と します。すると、JavaScript 部のコードは次のようになります。 プレビューして動作確認しましょう。 ５ ５５ ５．．２．．２つ２２つつつ目目目と目とと３と３つ３３つ目つつ目目目ののの数画像の数画像数画像についても数画像についてもについても１についても１つ１１つ目つつ目目と目とと同と同同じ同じじ仕組じ仕組みを仕組仕組みをみを追加みを追加追加する追加するする。する。。 。 ２つ目と３つ目の数画像についても １つ目と同じ仕組みを追加してくださ い。 Stop１のセルの右に Stop2、Stop3 のセルを追加してください。出来上がりの図はこのとおりです。 1 番目と考え方はまったく同じですので、ソースコードは挙げませんので、独力で作り上 げてください。 ６ ６６ ６．．．スタートボタン．スタートボタンスタートボタンをスタートボタンをを追加を追加する追加追加するする。する。。 。 動きを停止させた後、再度動かす ための「Start」ボタンを追加します。
<script Language = "JavaScript"> var num1 , num2 , num3;
var timeID1, timeID2, timeID3; num1 = 0; num2 = 3; num3 = 5; function koma1(){ timeID1 = setTimeout("koma1()",200); num1 = num1 + 1; if ( num1 == 10 ) num1 = 0;
g1.innerHTML = "<img src = ./image/S" + num1 + ".jpg>"; } <button onClick=clearTimeout(timeID1)> ヘッダー部 2 番目と 3 番目の数のた めのタイムアウト ID も 宣言しておきます。 本文部
function hajime(){ clearTimeout(timeID1); clearTimeout(timeID2); clearTimeout(timeID3); koma1(); koma2(); koma3(); } 「Ｓｔｏｐ１」のボタンと同じように作ることが出来ますので、作ってください。 動きを停止させた後、この「Ｓｔａｒｔ」ボタンをクリックしたとき、再度動くようにし ましょう。 Start ボタンをクリックすると hajime（）という関数を実行するようにします。この hajime（）という関数では、koma1（）、koma2（）、koma3（）を実行させるようにします。 こうすると、動きが停止したときに Start ボタンをクリックすると、再度動くようになり ます。
ヘッダーの JavaScript 部で hajime（）という関数を作り、この関数内では koma1（）、 koma2（）、koma3（）を書きます。 こうすると、hajime（ ）という関数を実行したとき動きが始まりますので、本文の JavaScript 部の koma1（）、koma2（）、koma3（）の代わりに、hajime（ ）を記述する ほうがスマートなコードになります。 動作を検証するとわかるのですが、Start ボタンを２回クリックすると動作速度が倍にな り、Start ボタンを３回クリックすると動作速度が３倍になります。さらに動作速度に加 えて Stop ボタンも Start ボタンをクリックした回数だけ押さないと止まりません。 これを避けるために start ボタンを押したときの処理内でタイムアウトをクリアする処 理を追加します。つまり hajime（ ）の 関数内にこの処理を追加します。 function hajime(){ koma1(); koma2(); koma3(); } </script> </head> <body> <table border=1> <tr> <td> <form> <button onClick=hajime()> Ｓｔａｒｔ </button> </form> </td> ヘッダー部 hajime（ ） 本文部 Start ボタンをクリック したときの処理を記述
<script Language = "JavaScript"> hajime(); </script> </body> 本文の JavaScript 部 ３つのタイムアウト ID をクリアする必要 があります。
７ ７７ ７．．．表示結果．表示結果表示結果によっての表示結果によってのによっての評価画像によっての評価画像評価画像を評価画像を表示をを表示表示する表示するする。する。。 。 つぎにやることは、数の動きをすべて停止させたときの３桁の表示結果によって、これ を評価するような画像を表示させましょう。 まず、３桁すべて停止させたことを確認するための仕組みを作ります。 上記により、「Ｓｔｏｐ１」のボタンを クリックしたとき、ひとつ目のタイムアウトＩＤがクリアされて、ひとつ目の数の動きが 停止します。 同様な仕組みが「Ｓｔｏｐ２」「Ｓｔｏｐ３」のボタンにも仕組まれていますので、それ ぞれのボタンをクリックするとやはり該当の数画像の動きが停止します。 しかし、「Ｓｔｏｐ１」「Ｓｔｏｐ２」「Ｓｔｏｐ３」のボタンを順番にクリックする とは限りません。そこで、これらのボタンをクリックしたときは、いつもすべてのボタン をクリックしたかどうかを調べなければなりません。 そのために、それぞれのボタンをクリックしたとき、それぞれのタイムアウトＩＤの値 を nulll にします。同時にすべてのタイムアウトＩＤが null になっていれば、すべての数 画像の動きが停止している、と判断します。 この「判断する」という仕組みを組み込んだ関数 owari（）を新しく作り、その中で、 すべてのタイムアウトＩＤが null になっていれば、つまり、すべての数の動きが停止して いれば、その３桁の数の状態に応じてのメッセージを表示するようにします。 例えば、「Sｔｏｐ１」をクリックしたときのコードは次のようです。 そして、owari() の中身は、 ２行目の if の意味は
（timeID1 が null に等しく）かつ（timeID2 が null に等しく） かつ（timeID3 が null に等しく) という意味です。「＆＆」は「かつ」という意味です。今の場合、仮としてｇ４の中身に brabo.gif を表示するようにしています。 Ｓｔｏｐ２、Ｓｔｏｐ３のボタンにも同じ仕組みを追加して、ヘッダーの JavaScript <button onClick=clearTimeout(timeID1)> Ｓｔｏｐ１ </button> <button onClick=clearTimeout(timeID1);timeID1=null;owari()> Ｓｔｏｐ１ </button> function owari(){
if ( timeID1==null && timeID2==null && timeID3==null){ g4.innerHTML= "<img src = ./image/brabo.gif>"; }
}
部に owari()を上のように追加して、動作確認してください。 すべての数画像の動きが停止したら、brabo.gif が表示されること を確認してください。 それでは、最初に話したように次のようなメッセージが表示するようにしましょう。 １．すべて同じ番号 → 「ブラボー」（brabo.gif） ２．左から右のボードにかけて数字が１ずつ大きい → 「やったね」（yattane.gif） ３．左から右のボードのほうが数字が大きい → 「まあええか」（mama.gif） ４．それ以外 → 「残念」（zannen.gif） この判定の厳しさは１が最も厳しく、２・３・４に行くほどゆるくなっています。そこで、 if 文で判断するのは、４から３・２・１の順に並べていきます。 最初にこのために使う変数 msg を宣言します。 msg = "zannen.gif"
if ( num1 <= num2 && num2 <= num3 ) msg = "mama.gif";
if ( num1+1 == num2 && num2+1 == num3 ) msg = "yattane.gif"; if ( num1 == num2 && num2 == num3 ) msg = "brabo.gif";
g4.innerHTML= "<img src = ./image/" + msg + ">";
とすれば、最初に zannen.gif が表示されるようになっていますが、条件が合致するにつ れて、対応するメッセージ画像が表示されるようになっていきます。 関数 owari（）のコードをあげておきます。 これは、メッセージの代わりにそのための画像を表示しています。だから、原理は数画 像の表示とまったく同じです。 ただ、ひとつだけまずいことは、動きが停止してそれに対応したメッセージ画像が評さ れますが、Ｓｔａｒｔボタンを押してもそのメッセージ画像はそのまま表示されたままで す。 Ｓｔａｒｔボタンをクリックしたとき、表示されたメッセージ画像を消すためのコード を hajime（）に追加します。 関数 hajime（）の最初の行に次のコードを追加すればメッセージ画像を消すことが出来 ます。 function owari(){ var msg;
if ( timeID1==null && timeID2==null && timeID3==null){ msg = "zannen.gif"
if ( num1 <= num2 && num2 <= num3 ) msg = "mama.gif";
if ( num1+1 == num2 && num2+1 == num3 ) msg = "yattane.gif"; if ( num1 == num2 && num2 == num3 ) msg = "brabo.gif";
g4.innerHTML= "<img src = ./image/" + msg + ">"; }
}
８ ８８ ８．．．見栄．見栄見栄えを見栄えをえをよくえをよくするよくよくするするする。。。 。 これで基本的な仕組みはすべて完成しました。 あとは、見栄えをくします。これにはＣＳＳ（カスケードスタ イルシート)を使います。 ＣＳＳを使う前に、テーブルの枠をすべて非表示にし、ページ の背景に wave07a.jpg を入れ、表示をセンタリングします。 この段階では右のようです。 今から、ＣＳＳを使って、飾っていきます。 数画像を表示するセルの境界の設定を 境界線の幅 １０ 境界線スタイル ridge 境界性の色 lightgreen にします。つぎのコードをヘッダーのＣＳＳ部に追加してくだ さい。 「スロットマシン」のタイトル文字を次のように飾ります ボタンの文字を飾ります。 境界線 太さ１０ スタイル groove 青色 文字サイズ 12 ポイント 文字色 紫 文字の太さ 太く 最後に、この飾りを含めてのＣＳＳ部のコードを挙げます。 #g1{border:10 ridge lightgreen}
#g2{border:10 ridge lightgreen} #g3{border:10 ridge lightgreen}
#dai{font-size:30pt;color:blue; border:10 ridge lightgreen; background-color:"yellow";}
<style type="text/css"> <!--
#g1{border:10 ridge lightgreen} #g2{border:10 ridge lightgreen} #g3{border:10 ridge lightgreen} #dai{font-size:30pt;color:blue; border:10 ridge lightgreen; background-color:"yellow";} button{border:10 groove bule;
font-size:12pt;color:purple;font-weight:bold} --> 最終的な雰囲 気はこのよう なものになり ます。
付録
付録
付録
付録
表示
表示
表示
表示する
する
する
する画像
画像
画像の
画像
の作
の
の
作
作り
作
り
り方
り
方
方
方
数画像の作成は、幅２００、高さ４００のサイズで、ペイントを利用するなり他のソフ トを利用するなりして簡単に作ることが出来ます。 そこで、ここではメッセージ画像をＰaintShopPro Ver9 で作る方法を説明します。 まず、PaintShop を起動して、背景を「透過」、サイズを幅５００、高さ２００として 新規作成します。 ここをチェッ クして「透過」 に設定 「画像の新規作成」でＯＫをクリック すると、このような背景の柄のものが 表示される。 この背景模様が「透過背景」である。 「ツールパレット」の 「図形ツール」の「図 形」をクリックする。 この透過背景の上に「バースト」図形を挿入します。 「ツールパレット」の「図形」をクリックして「ツールオプション」の「図形リ スト」をクリックして現れたウインドウから「バースト３」をクリックします。 「図形リスト」を クリックする。 「バースト３」 をクリックします
左上から右下までマウ スをドラッグして「バ ースト３」を描きます。 ドラッグ ドラッグを終え ると、黒く塗ら れています。 ツールパレットの塗 りつぶしツールで黄 色に塗りつぶします。 ツールパレットのテ キストツールで赤色 の文字を書きます。
出来上がったものを保存します。 背景を「透過」状態にして保存します。そのためには、ＪＰＥＧでは保存できません。 しかも、Ｗｅｂで使いますので、「Ｇｉｆ」または「Ｐｎｇ」で」保存します。 ここでは、Ｇｉｆで保存することにします。これにはメニューの「ファイル」「エク スポート」「ＧＩＦイメージ」を使います。 透過色の設定を、「既存 の画像またはレイヤー の透過領域」にチェック を入れます。 フ ァ イ ル 名 を 「zannen」にします。 出来あがりは、確か に「透過背景」にな っている。
