早くも4回目、エディターが学ぶ初めてのプログラミング！！SRIAのエディター若栁がお送りします。
ここから何回かで、第2回で作ったスロットゲームの不具合を改修したり、別の方法で作り直したりして、JavaScriptにさらに慣れていきます！
今回の課題
スタートボタンを押す前にストップボタンを押しても、あたり画面が開く動作を直したい。
現状
スロットゲームでランダムに画像を表示させるために、以下のようなコードを書きました。
（詳細は「第2回 エディターが学ぶ初めてのプログラミング（JavaScript編）」をお読みください。）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
var timerID, picture1, picture2, picture3; function start_slot() { picture1 = Math.floor(Math.random() * 3 + 1); picture2 = Math.floor(Math.random() * 3 + 1); picture3 = Math.floor(Math.random() * 3 + 1); document.getElementById('slot1').src = "img/" + picture1 + ".png"; document.getElementById('slot2').src = "img/" + picture2 + ".png"; document.getElementById('slot3').src = "img/" + picture3 + ".png"; timerID = setTimeout(start_slot, 80); } function stop_slot() { clearTimeout(timerID); if (picture1 === picture2 && picture2 === picture3) { window.open("ooatari.html") } } } |
スタートボタンを押す前にストップボタンを押した場合、picture1〜3の中には、何の数値も入っていません。ランダムな数値が生成されていないからです。それでも、何の数値も入っていない状態が3つ揃っているので、あたり画面が出てしまいます。
どうしたいか
スタートボタンが押された後にだけ、ストップボタンの処理が有効になるようにしたい。
- スタートボタンを押す前は、picture1〜3の中は何もない。つまり、undefinedの状態。
- スタートボタンを押すと、ランダムな整数が生成されて、picture1〜3に代入される。
もし、picture1〜3の中がundefinedではなく数値が入っていたら、ストップボタンの処理をしてね、と条件づけをすれば、希望の動作になりそうです。
解決策
if〜else構文を使って、条件ごとの処理を分ける。
if〜else構文とは？
もし◯◯が△△なら□□□、そうでなければ✖️✖️✖️、というように、指定した条件に合っていたら処理をする、そこに当てはまらなければ、次の条件に当てはまるか見ていく・・・という、条件に応じて進む方向がわかれていく（＝分岐する）構文です。
たとえば、ゲームやテストの点数でランクを分ける時は、以下のように何段階かに分かれます。
- 90点以上：ランクS
- 80〜89点：ランクA
- 65〜79点：ランクB
- それ以下：不合格
判定する数値が、70点だった場合はランクBですが、JavaScriptで書くとこうなります。
|
1 2 3 4 5 6 7 8 9 10 11 |
var score = 70; if (score >= 90) { document.write("ランクSです"); } else if (score >= 80) { document.write("ランクAです"); } else if (score >= 65) { document.write("ランクBです"); } else { document.write("不合格"); } |
スロットゲームでif〜else文を使うために、自分が最初に書いたコードに2箇所に手を加えました。
- 1行目：picture1〜3は、この時点ではnullです、と宣言する。
- 16行目：picture1がnullではなかったら、という条件文を追加する。
変更前（1行目）
|
1 |
var timerID, picture1, picture2, picture3; |
変更後（1行目）
|
1 2 3 4 |
var timerID; var picture1 = null; var picture2 = null; var picture3 = null; |
当初は1行で宣言箇所を書いていましたが、修正や見た目のわかりやすさを考慮して1行ずつに分解しました。
追加（16行目）
|
1 2 3 |
if (picture1 !== null) { //処理内容は省略 } |
これで、スタートボタンを押す前の状態、つまりpicture1〜3がnullだった場合には、あたり判定の処理が入らないようになりました。
変更・追加を反映した、今回の修正後のコードはこちらです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
var timerID; var picture1 = null; var picture2 = null; var picture3 = null; function start_slot() { picture1 = Math.floor(Math.random() * 3 + 1); picture2 = Math.floor(Math.random() * 3 + 1); picture3 = Math.floor(Math.random() * 3 + 1); document.getElementById('slot1').src = "img/" + picture1 + ".png"; document.getElementById('slot2').src = "img/" + picture2 + ".png"; document.getElementById('slot3').src = "img/" + picture3 + ".png"; timerID = setTimeout(start_slot, 80); } function stop_slot() { if (picture1 !== null) { clearTimeout(timerID); if (picture1 === picture2 && picture2 === picture3) { window.open("ooatari.html") } } } |
本来if構文は、”もし（if）●●なら△△（何らかの処理）、そうでなければ（else)□□（何らかの処理）”と、else文も一緒に書くのですが、今回は”条件に合わなければ何もしない”なので、else文以下は省略しています。
これで、スタートボタンを押す前にストップボタンを押しても、何も起こらないようになりました。できたー！
以上、if〜else構文についてお送りしました。
が、今回の目的は達成されたものの、実はまだ不具合がありました。
- あたりが出た画面でストップボタンを押すと、あたり判定が出てしまう。
- スタートボタンを押した数だけ、絵柄の切り替わりが早くなる。
絵柄の動かし方や関数の使い方を、根本的に見直さないといけないようです。
次回は、この部分の改修を進めていこうと思います！
