今回は、条件分岐について。
条件分岐と言えば、if文で書いてしまうのが一番シンプルな形ですが、今日はいつもと少し違った使い方をご紹介します。
まずクリックするとランダムで値を吐くボタンを作ります。
▼ボタンをクリックすると0~100までの点数が表示されます。
クリック
例えば、この結果に応じて下記のコメントを表示させるとします。
・0～29点の場合は”初心者”
・30～49点の場合は”中級者”
・50～79点の場合は”上級者”
・80～99点の場合は”達人”
・100点の場合は”神”
今はランダムで点数を吐いてるのでとても理不尽な気持ちになりますが、クイズなんかを作る時はありがちな条件ですね。
これを通常のif文で分岐させるとこうなります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(function(){ if(score == 100){ str = "神"; }else if(score >= 80 && score <= 99){ str = "達人"; }else if(score >= 50 && score <= 79){ str = "上級者"; }else if(score >= 30 && score <= 49){ str = "中級者"; }else{ str = "初心者"; } $('#resultArea').html('あなたは'+ str +'です！'); }); |
実はこのif文、もう少し簡易な書き方をすることができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function(){ var str = (function(){ if(score == 100) return '神'; if(score >= 80) return '達人'; if(score >= 50) return '上級者'; if(score >= 30) return '中級者'; return '初心者'; })(); $('#resultArea').html('あなたは'+ str +'です！'); }); |
若干スッキリしましたね。通常のif文と違って、条件文を上から見て行き、条件に合致した時点で以降の条件は無視されます。（例えば score が85点の時、2つ目のifと合致するので、3つめ以降のif文は無視されます。str には「達人」の値が代入されます。）
通常では「ここからここまで」の始点終点をしっかり書き込まなければいけませんが、この書き方だと少しだけ楽できます。
最後のreturnを書いて閉じた後の () 忘れないようにして下さいね。
デモ
▼ボタンをクリックすると0~100までの点数が表示されます。クリック
解説
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$(function(){ //ボタンをクリックした時の処理 $('#btn').click(function(){ //ランダムで0～100の値を作成、scoreに代入 var score = Math.round(Math.random()*100); //黒い所にスコアを表示する $('#btn_str').html(score+'点です') //if文を使用。スコアに応じてコメントを返す。strに代入する。 var str = (function(){ if(score == 100) return '神'; if(score >= 80) return '達人'; if(score >= 50) return '上級者'; if(score >= 30) return '中級者'; return '初心者'; })(); //黒い所の下にコメントを表示する $('#resultArea').html('あなたは'+ str +'です！'); }); }); |
応用して作ったじゃんけんゲーム
これを応用すれば、簡単にじゃんけんゲームなんかが作れます。▼ボタンをクリック!
ぐー
ちょき
ぱー
Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
$(function(){ $('.btn').click(function(){ var score = Math.round(Math.random()*2); var user = $(this).attr('data-score'); $('#g_btn_str').html('<img src="https://blog.8bit.co.jp/wp-content/uploads/2016/02/'+ score + '.png" />'); var result =(function(){ if(score == 0 && user == 0) return 'あいこ'; if(score == 0 && user == 1) return 'あなたのかち'; if(score == 0 && user == 2) return 'あなたのまけ'; if(score == 1 && user == 0) return 'あなたのかち'; if(score == 1 && user == 1) return 'あいこ'; if(score == 1 && user == 2) return 'あなたのまけ'; if(score == 2 && user == 0) return 'あなたのまけ'; if(score == 2 && user == 1) return 'あなたのかち'; return 'あいこ'; })(); $('#g_resultArea').html(result+'！') }); }); |
HTMLもこれだけ。
|
1 2 3 4 5 |
<div id="g_btn_str"></div> <div class="btn" data-score="0">ぐー</div> <div class="btn" data-score="1">ちょき</div> <div class="btn" data-score="2">ぱー</div> <div id="g_resultArea"></div> |
Javascriptを詳しく書くとこうです。
|
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 27 28 29 30 31 |
$(function(){ //class="btn"のどれかをクリックした時の処理 $('.btn').click(function(){ //0か1か2の3つをランダムで選択（0がグー、1がチョキ、2がパー）。scoreに代入。 var score = Math.round(Math.random()*2); //クリックしたbtnのdata-scoreの値を取得。userに代入。 var user = $(this).attr('data-score'); //グーチョキパーの画像を表示 $('#g_btn_str').html('<img src="https://blog.8bit.co.jp/wp-content/uploads/2016/02/'+ score + '.png" />'); //score（敵の値）とuser（自分の選択した値）を調べて、条件ごとに結果のメッセージを設定。resultに代入 var result =(function(){ if(score == 0 && user == 0) return 'あいこ'; if(score == 0 && user == 1) return 'あなたのかち'; if(score == 0 && user == 2) return 'あなたのまけ'; if(score == 1 && user == 0) return 'あなたのかち'; if(score == 1 && user == 1) return 'あいこ'; if(score == 1 && user == 2) return 'あなたのまけ'; if(score == 2 && user == 0) return 'あなたのまけ'; if(score == 2 && user == 1) return 'あなたのかち'; return 'あいこ'; })(); //resultの結果を赤文字で表示 $('#g_resultArea').html(result+'！') }); }); |
こんな感じです。色々な事に応用がきくので、是非やってみて下さいね。
