JavaScript (スロットマシン) ここでは JavaScript を 使 ってスロットマシンを 作 ります スロットマシンを 作 る と 言 っても そう 難 しいものではありません 3 枚 のボードの 数 字 を0から9まで 順 番 に 表 示 して ボタンをクリックすると それぞ れの 札 の 動 きが 止 まり その 結 果 によってメッセージが 異 なる このようなものを 作 りましょう その 評 価 方 法 として 以 下 のような 異 なるメッセージが 出 るようにします 1.すべて 同 じ 番 号 ブラボー 2. 左 から 右 のボードにかけて 数 字 が1ずつ 大 きい やったね 3. 左 から 右 のボードのほうが 数 字 が 大 きい まあええか 4.それ 以 外 残 念 SlotMachine というフォルダ 内 にそのための 必 要 な 画 像 が 入 った image という 名 前 のついたフォルダがあります そこには 次 のような 画 像 があります おの k 画 像 の 下 の 文 字 列 は その 画 像 の 名 前 で す 1
原 理 は テーブルによって 数 字 を 表 示 するセルを3つ 作 り そこに 一 定 時 間 おきに0から 9までの 数 字 を 表 示 していく ということです そのために あらかじめ 表 示 するための 数 字 評 価 メッセージを 画 像 で 作 成 しておく 必 要 があります 作 成 するときに 数 の 画 像 のサイズ メッセージ 画 像 のサイズをきちんと 考 えなければなりません ここでは 数 の 画 像 サイズを 横 高 さのサイズを(200 400)としています ま た メッセージ 画 像 は(500 200)としています 1. 新 規 にhtml htmlファイル ファイルを 作 成 する CSS と JavaScript を 両 方 使 いますので (CSS & JavaScript)のスケルトンを 作 成 し て それを SlotMachine.html で SlotMachine のフォルダに 名 前 をつけて 保 存 してくだ さい <html> <head> タイトル <title>スロットマシン</title> <meta http-equiv="content-style-type" content="text/css"> スロットマシン <style type="text/css"> <!-- --> </style> function MyFunc1(){ </head> <body> ここに Web ページの 内 容 を 書 き 込 んでください </body> </html> 2.タイトル タイトルと3 桁 の 数 画 像 を 挿 入 するためのテーブル テーブルを 作 る ページの 最 上 部 にタイトルを 入 れるためのテーブルを 1 行 1 列 の 設 定 で 作 ります さらにその 下 に 数 画 像 を 挿 入 するためのテーブルを 1 行 3 列 の 設 定 で 作 ります 一 つ 目 のセルに スロットマシン と 入 力 します <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> 3. 一 つ 目 のテーブルのセ ルに dai 2つ 目 の テーブルのセルに g1 g2 g3 とういう 名 前 を つけます 2
2. 二 つ 目 のテーブル テーブルの1つ 目 のセル セルに 数 字 の1を 表 示 させる 本 文 部 の 最 後 部 に JavaScript 部 を 設 けて そこにセルg1に 表 示 させる 関 数 koma1() を 書 く ヘッダー 部 の JavaScript 部 の MyFunc() を 消 してその 箇 所 に koma1() と 書 く そこに g1に 数 の1を 表 示 させるように g1.innerhtml = "<img src =./image/s1.jpg>"; と 記 入 する function koma1(){ g1.innerhtml = "<img src =./image/s1.jpg>"; </head> <body> <table border=1> <tr> <td id = "dai">スロットマシン</td> </tr> </table> <table border=1> <tr> <td id = "g1"> </td> セルには 全 角 スペースしか 表 示 する <td id = "g2"> </td> ようになっていませんが koma1() <td id = "g3"> </td> が 実 行 されると1の 画 像 がそこに 挿 </tr> </table> 入 されることにより 画 像 のサイズが セルのサイズになる koma1(); </body> 3. 同 じようにg2 g g3のセル セルに 数 画 像 2,3を 表 示 させる 同 様 にして g2 g3に2,3の 数 を 画 像 で 表 示 させます このための 関 数 を koma2() koma3()とします このための 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>"; koma1(); koma2(); koma3(); 本 文 部 の JavaScript ヘッダー 部 の JavaScript 3
3. 一 つ 目 のセル セルの 画 像 を0から から9までの 数 を 順 番 に 入 れ 替 える 3.1 一 つ 目 の 数 画 像 を 変 数 を 使 って 表 現 する 数 画 像 を 順 番 に 入 れ 替 える 第 1 歩 として 数 画 像 の 名 前 を 変 数 で 表 します 一 つ 目 のセル に 対 しての 数 を 表 す 変 数 なので num1 を 使 いましょう もし num1=2なら "S" + num1 + ".jpg" によって "S2.jpg" となります これは2という 数 の 画 像 のファイル 名 を 意 味 します そこで 0から9までの 数 画 像 を 順 番 に 表 すためには "S" + num1 + ".jpg" として num1 の 値 を0から9まで 順 番 に 変 えていけばい いことになります またg1のセルに0から9までの 数 画 像 を 順 番 に 表 示 させるためには 今 の 場 合 には g1.innerhtml = "<img src =./image/s" + num1 + ".jpg>" として このなかの num1 の 値 を0から9まで 順 番 に 変 化 させればいいことになります num1 の 値 g1.innerhtml = "<img src =./image/s" + num1 + ".jpg>"の 結 果 0 g1.innerhtml = "<img src =./image/s0.jpg>"; 1 g1.innerhtml = "<img src =./image/s1.jpg>"; 2 g1.innerhtml = "<img src =./image/s2.jpg>"; 3 g1.innerhtml = "<img src =./image/s3.jpg>"; 4 g1.innerhtml = "<img src =./image/s4.jpg>"; 5 g1.innerhtml = "<img src =./image/s5.jpg>"; 6 g1.innerhtml = "<img src =./image/s6.jpg>"; 7 g1.innerhtml = "<img src =./image/s7.jpg>"; 8 g1.innerhtml = "<img src =./image/s8.jpg>"; 9 g1.innerhtml = "<img src =./image/s9.jpg>"; そこですることは 変 数 num1 の 宣 言 num1 に 初 期 値 を 与 える 関 数 koma1( )に 上 の 仕 組 みを 与 える ということですので ヘッダー 部 の JavaScript 部 を 次 のように 変 えます var num1; num1 = 0; function koma1(){ g1.innerhtml = "<img src =./image/s" + num1 + ".jpg>"; 変 数 num1 の 宣 言 は koma1( )の 外 側 でします 初 期 値 も koma1( )の 外 側 で 与 えます num1 の 初 期 値 として0を 与 えて いますので 一 つ 目 のセルの 数 と して0が 表 示 されています 4
3.2 一 つ 目 のセル セルの 数 を0から から9まで 順 番 に 表 示 する 一 つ 目 のセルについての 数 画 像 を 一 定 時 間 おきにひとつ 大 きい 数 の 画 像 に 変 えていきま す その 方 法 は 変 数 num1 に 初 期 値 を 与 えて 一 定 時 間 ごとに 変 数 num1 の 値 を0から 9の 値 を 繰 り 返 していって それに 対 応 する 画 像 を 表 示 します 一 定 時 間 ごとにある 処 理 を 繰 り 返 す 方 法 は settimeout メソッドを 使 います 例 えば settimeout("koma1()",1000) とすると 1000 ミリ 秒 (1 秒 ) 後 に 関 数 koma1() を 実 行 する ということになります koma1()を 1000 ミリ 秒 ごとに 繰 り 返 させるためには koma1()の 関 数 内 で settimeout("koma1()",1000)を 使 います つまり ここでは koma1(){ settimeout("koma1()",1000); やらせたい 処 理 のコードを 書 く var num1; num1 = 0; function koma1(){ settimeout("koma1()",500); num1 = num1 + 1; g1.innerhtml = "<img src =./image/s" + num1 + ".jpg>"; ここで 関 数 koma1()の 外 でのコード num1=0 は 最 初 の koma1()の 実 行 のときに 1 回 だけ 実 行 されますが 2 回 目 以 降 の koma1()の 実 行 のときは 実 行 されません このことにより 0を 出 発 点 として1,2,3,4,5 と 増 えていきます これによって ファイル 名 は S0.jpg S1.jpg S2.jpg S3.jpg S4.jpg S5.jpg と 変 化 して 表 示 される 数 は 0 1 2 3 4 5 と 変 化 していきま す しかし 9を 表 示 した 後 は が 表 示 されます これは9の 次 は10,11,12,13 となり これに 対 応 する 画 像 はない ために が 表 示 されます これを 回 避 するコードを 追 加 します 0 1 2 3 9 の 次 は0に 帰 るように 次 のコードを 追 加 します if ( num1 == 10 ) num1 = 0; 意 味 もし num1 の 値 が9に 等 しくなったら num1 の 値 を0にします このコードを 追 加 した 後 のヘッダー 部 の JavaScript 部 の 関 数 koma1()は 次 のようになり ます 5
function koma1(){ settimeout("koma1()",200); num1 = num1 + 1; if ( num1 == 10 ) num1 = 0; g1.innerhtml = "<img src =./image/s" + num1 + ".jpg>"; これで 一 つ 目 のセルについてのコードは 完 成 です 3.3 2つ 目 と3つめの つめのセル セルについても ついても1つめの つめのセル セルと 同 様 な 処 理 のコード コードを 追 加 する 1 つ 目 のセルと 同 じようにして 2つ 目 3つ 目 のセルについての 処 理 のコードをヘッ ダー 部 の JavaScript 部 に 追 加 してください 2つ 目 と3つ 目 ののセルの 変 数 をそれぞれ num2 num3 としてください num2 と num3 の 初 期 値 も0にすると 3つの 数 が 同 じ 数 で 変 化 しますので 初 期 値 を 少 し ずつ 変 えます その 部 分 のコードを 挙 げておきます var num1, num2, num3; num1 = 0; num2 = 3; num3 = 5; function koma1(){ どうでしょうか? 3 枚 のボードの 数 が 順 番 に 変 化 していくでしょうか? 4. 最 も 左 のボード ボードの 動 きを 停 止 させる 4.1 ボタンを 追 加 する クリックすると 最 も 左 の 数 画 像 の 動 きが 停 止 する そのようなボタンを 作 成 します 最 も 左 の 数 画 像 の 動 きを 停 止 させるのでそのボタンに Stop1 という 文 字 を 表 示 し ます ボタンはフォーム(アンケートのページを 作 る 仕 組 み) 上 に 使 われるものですので その 形 式 は 右 のようになっています 今 の 場 合 は テーブルのセル 中 にボタンを 配 置 しま すので スロットマシン のセルの 右 に 新 しいセル を 追 加 してその 中 にボタンを 配 置 します <table border=1> <tr> <td id = "dai">スロットマシン</td> <form> <button> ボタンに 表 示 する ためのものを 書 く </button> </form> <td> <form> <button> Stop1 </button> </form> </td> </tr> </table> こ の 部 分 を 追 加 します 6
4.2 ボタン ボタンをクリック クリックすると 動 きが 停 止 する ようにする うにする ボタンをクリック したら 動 きが 停 止 する という この 仕 組 みを 実 現 させるため には クリックしたら onclick メソッドを 使 う 動 きが 停 止 する(タイムアウト 処 理 のクリア) cleartimuout メソッドを 使 う ボタンをクリックしたら ということなので この 処 理 はボタンのタグ 内 に 仕 込 みます タイムアウト 処 理 のクリア は タイムアウトをセットするときに(setTimeout メ ソッドを 使 ったときに 返 されるIDを 取 得 しておいて そのIDをクリアする という 形 式 をとります 例 えば timeid = settimeout(" ", 1000); タイムアウト 処 理 時 に 意 識 的 にIDを 取 得 cleartimeout ( timeid ) ; 取 得 したタイムアウトIDをクリア 今 の 場 合 数 のボードが3つあるのでタイムアウトIDを timeid1, timeid2, timeid3 と します すると JavaScript 部 のコードは 次 のようになります var num1, num2, num3; ヘッダー 部 var timeid1, timeid2, timeid3; 2 番 目 と 3 番 目 の 数 のた num1 = 0; num2 = 3; めのタイムアウト ID も 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)> 本 文 部 プレビューして 動 作 確 認 しましょう 5.2つ 目 と3つ 目 の 数 画 像 についても1つ 目 と 同 じ 仕 組 みを 追 加 する 2つ 目 と3つ 目 の 数 画 像 についても 1つ 目 と 同 じ 仕 組 みを 追 加 してくださ い Stop1のセルの 右 に Stop2 Stop3 のセルを 追 加 してください 出 来 上 がりの 図 はこのとおりです 1 番 目 と 考 え 方 はまったく 同 じですので ソースコードは 挙 げませんので 独 力 で 作 り 上 げてください 6.スタートボタン スタートボタンを 追 加 する 動 きを 停 止 させた 後 再 度 動 かす ための Start ボタンを 追 加 します 7
Stop1 のボタンと 同 じように 作 ることが 出 来 ますので 作 ってください 動 きを 停 止 させた 後 この Start ボタンをクリックしたとき 再 度 動 くようにし ましょう Start ボタンをクリックすると hajime()という 関 数 を 実 行 するようにします この hajime()という 関 数 では koma1() koma2() koma3()を 実 行 させるようにします こうすると 動 きが 停 止 したときに Start ボタンをクリックすると 再 度 動 くようになり ます ヘッダーの JavaScript 部 で hajime()という 関 数 を 作 り この 関 数 内 では koma1() koma2() koma3()を 書 きます function hajime(){ koma1(); ヘッダー 部 koma2(); koma3(); hajime( ) </head> <body> <table border=1> <tr> <td> <form> <button onclick=hajime()> Start </button> </form> </td> 本 文 部 Start ボタンをクリック したときの 処 理 を 記 述 こうすると hajime( )という 関 数 を 実 行 したとき 動 きが 始 まりますので 本 文 の JavaScript 部 の koma1() koma2() koma3()の 代 わりに hajime( )を 記 述 する ほうがスマートなコードになります hajime(); </body> 動 作 を 検 証 するとわかるのですが Start ボタンを2 回 クリックすると 動 作 速 度 が 倍 にな り Start ボタンを3 回 クリックすると 動 作 速 度 が3 倍 になります さらに 動 作 速 度 に 加 えて Stop ボタンも Start ボタンをクリックした 回 数 だけ 押 さないと 止 まりません これを 避 けるために start ボタンを 押 したときの 処 理 内 でタイムアウトをクリアする 処 理 を 追 加 します つまり hajime( )の 関 数 内 にこの 処 理 を 追 加 します 3つのタイムアウト IDをクリアする 必 要 があります 本 文 の JavaScript 部 function hajime(){ cleartimeout(timeid1); cleartimeout(timeid2); cleartimeout(timeid3); koma1(); koma2(); koma3(); 8
7. 表 示 結 果 によっての 評 価 画 像 を 表 示 する つぎにやることは 数 の 動 きをすべて 停 止 させたときの3 桁 の 表 示 結 果 によって これ を 評 価 するような 画 像 を 表 示 させましょう まず 3 桁 すべて 停 止 させたことを 確 認 するための 仕 組 みを 作 ります <button onclick=cleartimeout(timeid1)> Stop1 </button> 上 記 により Stop1 のボタンを クリックしたとき ひとつ 目 のタイムアウトIDがクリアされて ひとつ 目 の 数 の 動 きが 停 止 します 同 様 な 仕 組 みが Stop2 Stop3 のボタンにも 仕 組 まれていますので それ ぞれのボタンをクリックするとやはり 該 当 の 数 画 像 の 動 きが 停 止 します しかし Stop1 Stop2 Stop3 のボタンを 順 番 にクリックする とは 限 りません そこで これらのボタンをクリックしたときは いつもすべてのボタン をクリックしたかどうかを 調 べなければなりません そのために それぞれのボタンをクリックしたとき それぞれのタイムアウトIDの 値 を nulll にします 同 時 にすべてのタイムアウトIDが null になっていれば すべての 数 画 像 の 動 きが 停 止 している と 判 断 します この 判 断 する という 仕 組 みを 組 み 込 んだ 関 数 owari()を 新 しく 作 り その 中 で すべてのタイムアウトIDが null になっていれば つまり すべての 数 の 動 きが 停 止 して いれば その3 桁 の 数 の 状 態 に 応 じてのメッセージを 表 示 するようにします 例 えば Stop1 をクリックしたときのコードは 次 のようです <button onclick=cleartimeout(timeid1);timeid1=null;owari()> Stop1 </button> そして owari() の 中 身 は function owari(){ if ( timeid1==null && timeid2==null && timeid3==null){ g4.innerhtml= "<img src =./image/brabo.gif>"; 2 行 目 の if の 意 味 は (timeid1 が null に 等 しく)かつ(timeID2 が null に 等 しく) かつ(timeID3 が null に 等 しく) という 意 味 です && は かつ という 意 味 です 今 の 場 合 仮 としてg4の 中 身 に brabo.gif を 表 示 するようにしています Stop2 Stop3のボタンにも 同 じ 仕 組 みを 追 加 して ヘッダーの JavaScript 9
部 に owari()を 上 のように 追 加 して 動 作 確 認 してください すべての 数 画 像 の 動 きが 停 止 したら brabo.gif が 表 示 されること を 確 認 してください それでは 最 初 に 話 したように 次 のようなメッセージが 表 示 するようにしましょう 1.すべて 同 じ 番 号 ブラボー (brabo.gif) 2. 左 から 右 のボードにかけて 数 字 が1ずつ 大 きい やったね (yattane.gif) 3. 左 から 右 のボードのほうが 数 字 が 大 きい まあええか (mama.gif) 4.それ 以 外 残 念 (zannen.gif) この 判 定 の 厳 しさは1が 最 も 厳 しく 2 3 4に 行 くほどゆるくなっています そこで if 文 で 判 断 するのは 4から3 2 1の 順 に 並 べていきます 最 初 にこのために 使 う 変 数 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()のコードをあげておきます 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 + ">"; これは メッセージの 代 わりにそのための 画 像 を 表 示 しています だから 原 理 は 数 画 像 の 表 示 とまったく 同 じです ただ ひとつだけまずいことは 動 きが 停 止 してそれに 対 応 したメッセージ 画 像 が 評 さ れますが Startボタンを 押 してもそのメッセージ 画 像 はそのまま 表 示 されたままで す Startボタンをクリックしたとき 表 示 されたメッセージ 画 像 を 消 すためのコード を hajime()に 追 加 します 関 数 hajime()の 最 初 の 行 に 次 のコードを 追 加 すればメッセージ 画 像 を 消 すことが 出 来 ます g4.innerhtml = ""; 10
8. 見 栄 えをよく よくする する これで 基 本 的 な 仕 組 みはすべて 完 成 しました あとは 見 栄 えをくします これにはCSS(カスケードスタ イルシート)を 使 います CSSを 使 う 前 に テーブルの 枠 をすべて 非 表 示 にし ページ の 背 景 に wave07a.jpg を 入 れ 表 示 をセンタリングします この 段 階 では 右 のようです 今 から CSSを 使 って 飾 っていきます 数 画 像 を 表 示 するセルの 境 界 の 設 定 を 境 界 線 の 幅 10 境 界 線 スタイル ridge 境 界 性 の 色 lightgreen にします つぎのコードをヘッダーの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"; ボタンの 文 字 を 飾 ります 境 界 線 太 さ10 スタイル groove 文 字 サイズ 12 ポイント 文 字 色 紫 文 字 の 太 さ 太 く 青 色 最 後 に この 飾 りを 含 めてのCSS 部 のコードを 挙 げます <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 --> </style> 11
付 録 表 示 する 画 像 の 作 り 方 数 画 像 の 作 成 は 幅 200 高 さ400のサイズで ペイントを 利 用 するなり 他 のソフ トを 利 用 するなりして 簡 単 に 作 ることが 出 来 ます そこで ここではメッセージ 画 像 をPaintShopPro Ver9 で 作 る 方 法 を 説 明 します まず PaintShop を 起 動 して 背 景 を 透 過 サイズを 幅 500 高 さ200として 新 規 作 成 します 画 像 の 新 規 作 成 でOKをクリック すると このような 背 景 の 柄 のものが 表 示 される この 背 景 模 様 が 透 過 背 景 である ここをチェッ クして 透 過 に 設 定 この 透 過 背 景 の 上 に バースト 図 形 を 挿 入 します ツールパレット の 図 形 をクリックして ツールオプション の 図 形 リ スト をクリックして 現 れたウインドウから バースト3 をクリックします 図 形 リスト を クリックする バースト3 をクリックします ツールパレット の 図 形 ツール の 図 形 をクリックする 12
左 上 から 右 下 までマウ スをドラッグして バ ースト3 を 描 きます ドラッグ ドラッグを 終 え ると 黒 く 塗 ら れています ツールパレットの 塗 りつぶしツールで 黄 色 に 塗 りつぶします ツールパレットのテ キストツールで 赤 色 の 文 字 を 書 きます 13
出 来 上 がったものを 保 存 します 背 景 を 透 過 状 態 にして 保 存 します そのためには JPEGでは 保 存 できません しかも Webで 使 いますので Gif または Png で 保 存 します ここでは Gifで 保 存 することにします これにはメニューの ファイル エク スポート GIFイメージ を 使 います 透 過 色 の 設 定 を 既 存 の 画 像 またはレイヤー の 透 過 領 域 にチェック を 入 れます フ ァ イ ル 名 を zannen にします 出 来 あがりは 確 か に 透 過 背 景 にな っている 14