どうも！LSSです！！
昨日のおみくじのコード解説をやってみます。
おみくじのコード
<style>
#omikuji{
width:280px;
padding:10px;
font-size:40px;
font-weight:bold;
background-color:#eeeeee;
border:1px solid black;
background-image:radial-gradient(circle 80px at 70% 30%,white,#eeeeee);
user-select:none;
}
</style>
<div id="omikuji">おみくじ</div>
<script>
cnt=0;
kuji=[
"大吉",
"吉",
"末吉",
"凶",
"大凶"
];
a=Math.floor(Math.random()*kuji.length);
omikuji.addEventListener('click',gamen_w,false);
function gamen_w(){
cnt++;
if(cnt==10){kuji.push('すっとん凶','ぴょん吉','ギリギリ吉','スーパー吉');}
if(cnt==20){kuji.push('素敵に凶','微妙に吉','最強大吉','普通');}
a+=Math.floor(Math.random()*(kuji.length-1))+1;
a%=kuji.length;
omikuji.innerHTML=kuji[a];
}
</script>
コード解説
まず、このおみくじですが「２回連続で同じものが出る事がない」という仕様になっています。
コードのうち、
#omikuji{
width:280px;
padding:10px;
font-size:40px;
font-weight:bold;
background-color:#eeeeee;
border:1px solid black;
background-image:radial-gradient(circle 80px at 70% 30%,white,#eeeeee);
user-select:none;
}
は、単におみくじの見た目をCSSで指定している部分です。
最後の行、
user-select:none;
は、何度もクリックしているうちに、文字選択状態になってしまう…という事を避けるための指定で、この１行を入れているとおみくじが文字選択の対象外となります。
次にスクリプト部分
<script>
cnt=0;
kuji=[
"大吉",
"吉",
"末吉",
"凶",
"大凶"
];
a=Math.floor(Math.random()*kuji.length);
omikuji.addEventListener('click',gamen_w,false);
function gamen_w(){
cnt++;
if(cnt==10){kuji.push('すっとん凶','ぴょん吉','ギリギリ吉','スーパー吉');}
if(cnt==20){kuji.push('素敵に凶','微妙に吉','最強大吉','普通');}
a+=Math.floor(Math.random()*(kuji.length-1))+1;
a%=kuji.length;
omikuji.innerHTML=kuji[a];
}
</script>
変数cntは「おみくじを引いた回数」のカウント、
配列変数kujiが「おみくじの結果候補」を格納しています。
a=Math.floor(Math.random()*kuji.length);
変数aに乱数を代入していますが、この「kuji.length」は「配列変数kujiの要素数」です。
くじ候補は５種類用意しているので、kuji.lengthは「5」となります。
それに「0以上1未満の乱数」となるMath.random()を掛けて、Math.floorで整数化しているので、変数aにはこの段階で「0～4のいずれかの数」が入る事になります。
あとは、
omikuji.addEventListener('click',gamen_w,false);
で、「id="omikuji"」である要素（DIVタグ）がクリックされた時、関数「gamen_w」を呼び出すというイベントリスナーを仕掛けています。
初期設定は以上です。
次に、クリック時に呼び出される関数gamen_wの内容ですが、
cnt++;
まず「おみくじを引いた回数」を+1します。
if(cnt==10){kuji.push('すっとん凶','ぴょん吉','ギリギリ吉','スーパー吉');}
if(cnt==20){kuji.push('素敵に凶','微妙に吉','最強大吉','普通');}
「おみくじを引いた回数」がちょうど10回目の時、おみくじの候補に「'すっとん凶','ぴょん吉','ギリギリ吉','スーパー吉'」という４つの候補を追加。
「おみくじを引いた回数」がちょうど20回目の時、おみくじの候補に「'素敵に凶','微妙に吉','最強大吉','普通'」という４つの候補をさらに追加しています。
a+=Math.floor(Math.random()*(kuji.length-1))+1;
a%=kuji.length;
おみくじの番号、最初に変数aに乱数を設定していましたが、ここでは「1以上おみくじの要素数-1未満」の乱数を足しています。
%=で余りを取っているので、おみくじの候補数をオーバーする事はありませんが、この２行の処理を経た変数aは「処理前と同じ値になる事はありえない、がそれ以外のどの数になるかは均等な確率でランダム」という事になります。
それらの処理を経た上で、
omikuji.innerHTML=kuji[a];
おみくじの結果として、変数aの値で選ばれたおみくじ候補が画面に出力される事になるんですね。
配列変数.lengthを使用しているので
おみくじの候補数を増やしても減らしても、その時点での候補数に応じて均等な確率でおみくじが選出される事になります^^
最初の
kuji=[
"大吉",
"吉",
"末吉",
"凶",
"大凶"
];
の候補を増やしてもいいですし、後から追加される、
if(cnt==10){kuji.push('すっとん凶','ぴょん吉','ギリギリ吉','スーパー吉');}
if(cnt==20){kuji.push('素敵に凶','微妙に吉','最強大吉','普通');}
の候補を増やしても減らしても、均等な確率で選ばれる事になります。
容赦のない均等な確率
により、「新年一発目から大凶」という方が結構おられたようで…なんだかすみません^^;
「後は上がるだけ」と解釈していただければ幸いです。
が、今にして思えば、関数内で「処理前と同じものになる事はない」ようになっているので、初期設定段階での
a=Math.floor(Math.random()*kuji.length);
を
a=4;
とでもしておけば、コード文字数が少なくて済む上に「一回目から大凶」という事態は避ける事ができましたね^^;;;（凶は出る事になりますが）
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
