その1では、必要であろうデータをExcelに作りました。
今回は、Javascriptによるプログラミングです。
プログラミングする上で、どんなものを作りたいのか。
どんな機能があることが望ましいのかを考えてみます。
1) 既に出た内閣総理大臣は、次からは出現させない。
本来のビンゴであれば、この機能が備わっているが、それをプログラムに入れ込もうとすると、いささか面倒ではあるが、やってみる価値はありそうですね。
ただ、この機能があると、動画のような、この日付のときの総理大臣を予想する楽しさはなくなるかもしれません。
2) 既に出た内閣総理大臣をログする。
これも、ビンゴではよくある風景です。
これは実装したいですね。
その1で作ったデータを、Javascriptのプログラムに合うように加工しました。
var name_str=new Array('伊藤 博文','黑田 清隆','山縣 有朋','松方 正義','大隈 重信','桂 太郎','西園寺 公望','山本 權兵衞','寺内 正毅','原 敬','高橋 是清','加藤 友三郎','清浦 奎吾','加藤 高明','若槻 禮次郎','田中 義一','濱口 雄幸','犬養 毅','齋藤 實','岡田 啓介','廣田 弘毅','林 銑十郎','近衞 文麿','平沼 騏一郎','阿部 信行','米内 光政','東條 英機','小磯 國昭','鈴木 貫太郎','東久邇宮 稔彦王','幣原 喜重郎','吉田 茂','片山 哲','芦田 均','鳩山 一郎','石橋 湛山','岸 信介','池田 勇人','佐藤 榮作','田中 角榮','三木 武夫','福田 赳夫','大平 正芳','鈴木 善幸','中曽根 康弘','竹下 登','宇野 宗佑','海部 俊樹','宮澤 喜一','細川 護煕','羽田 孜','村山 富市','橋本 龍太郎','小渕 恵三','森 喜朗','小泉 純一郎','安倍 晋三','福田 康夫','麻生 太郎','鳩山 由紀夫','菅 直人','野田 佳彦');
var name_no=new Array(0,1,2,3,0,3,0,4,2,0,5,6,5,6,5,7,4,8,9,10,11,7,12,13,14,15,16,14,17,18,19,20,21,22,23,24,25,22,22,26,27,28,29,30,31,32,33,31,31,31,31,34,34,34,35,36,36,37,37,37,38,38,38,39,39,40,41,42,42,43,44,44,44,45,46,47,47,48,49,50,51,52,52,53,54,54,55,55,55,56,57,58,59,60,61,56,56);
var start=new Array(0,860,1463,1961,2421,3923,4404,4573,4704,5414,5640,7320,8239,9381,9860,9921,10341,11248,11968,13109,13320,13767,13894,14050,14648,15093,15897,16548,16791,16956,17729,18339,18669,18791,19371,19608,19747,19935,20296,20388,21396,21655,21787,21840,22065,22432,22723,22942,23066,24418,24621,25189,25288,25536,25933,25997,26469,27237,27379,28475,28811,29641,30703,31608,31776,32493,33239,33952,34289,34540,35403,35798,36736,37208,37783,37851,38053,38668,39311,39573,39636,40196,40497,41127,41742,41832,42128,43065,43737,44107,44472,44836,45193,45458,45909,46390,47118);
var end=new Array(860,1463,1961,2421,3923,4404,4573,4704,5414,5640,7320,8239,9381,9860,9921,10341,11248,11968,13109,13320,13767,13894,14050,14648,15093,15897,16548,16791,16956,17729,18339,18669,18791,19371,19608,19747,19935,20296,20388,21396,21655,21787,21840,22065,22432,22723,22942,23066,24418,24621,25189,25288,25536,25933,25997,26469,27237,27379,28475,28811,29641,30703,31608,31776,32493,33239,33952,34289,34540,35403,35798,36736,37208,37783,37851,38053,38668,39311,39573,39636,40196,40497,41127,41742,41832,42128,43065,43737,44107,44472,44836,45193,45458,45909,46390,47118,48161);
歴代総理大臣の名前の62名を、name_str配列へ、
初代から第97代までを、name_str配列の番号で、name_no配列へ格納しました。
start配列と、end配列は、修正ユリウス通日-9897で、startは0から始まるようにしてあります。
end配列は、次の総理大臣（同じ人だったとしても）になった日としています。
つまり、先のデータでは、数値的に間が開いていたりしたものを無視して、穴が無いようにしています。
これらのデータは、window.onload=function(){}内で設定されることになります。
続いて、抽選ボタンを押されたときの挙動です。
var i;
var sum=0;
for (i=0; i<start.length; i++) {
if ( end[i] > 0 ) {
sum += end[i]-start[i];
}
}
現状の総日数を求め、sumに格納しました。
総日数が求まったので、乱数を発生させます。
var date=count=Math.floor(Math.random()*sum);
var souri_no;
var souri_str;
for (i=0; i<start.length; i++) {
if ( end[i] < 0 ) {
count += -end[i]-start[i];
} else if ( start[i] <= count && count < end[i] ) {
souri_no = name_no[i];
souri_str = name_str[souri_no];
break;
}
}
0以上sum未満の乱数がdateとcountに格納されます。
end[i] < 0
というわけの解らない判定がありますが、これがダブりをなくならせる仕組みです。
乱数からsouri_noとsouri_strが求まります。
一度出た総理大臣は、次から出なくなるようにします。
for (i=0; i<name_no.length; i++) {
if ( name_no[i] == souri_no ) {
end[i] *= -1;
}
}
end[i]の値に-1を掛けることで、レンジが逆転してしまうので、今後の判定条件から外れます。
思ったよりも、この仕組が簡単に実現出来ました。
乱数dataから、日付に変換します。
var n,a,b,y,m,d;
n = date+9897+678881;
a = 4*n+3+4*Math.floor(3*Math.floor(4*(n+1)/146097+1)/4);
b = 5*Math.floor((a%1461)/4)+2;
y = Math.floor(a/1461);
m = Math.floor(b/153)+3;
d = Math.floor((b%153)/5)+1;
if ( m > 12 ) {
y ++;
m -= 12;
}
ウィキペディアに載ってる方法をそのまま使いました。
最後に出力です。
var str = document.getElementById('log').innerHTML;
if ( sum ) {
document.getElementById('log').innerHTML = n+' '+y+'年'+('0'+m).substr(-2)+'月'+('0'+d).substr(-2)+'日 '+souri_str+'<br>'+str;
}
sumが正のうちは表示しますが、0になったら表示をやめています。
logの値を予め取得して、それを後半に付けることで、新しいデータが上に来るようにログされます。
('0'+m).substr(-2)+'月'
('0'+d).substr(-2)+'日'
は、それぞれ先頭に0を付けて、その上で右から2桁を取っています。
つまり、0パッディングで2桁にしているということです。
修正ユリウス通日であるdate+9897でもよかったのですが、ユリウス通日のnに変更しているのは、桁数が6桁で崩れないからです。
こんな感じで、これを元に改造してもいいかなと思っております。
例えば、
HTML部分で、ラジオボタンを作って、
◯ダブリあり ◎ダブリなし
とか、
◎総理大臣名表示 ◯総理大臣名伏字
とか、仕様を変更出来るようにという感じでしょうか。
HTML部分は、
<button id="chuusen" style="font-size:100px; line-height:100px; padding:10px;">抽選</button><br>
<form id="radio1"><input type="radio" name="double" value="1">ダブリあり</input> <input type="radio" name="double" value="0" checked>ダブリなし</input></form><br>
<form id="radio2"><input type="radio" name="souri" value="1" checked>総理大臣名表示</input> <input type="radio" name="souri" value="0">総理大臣名伏字</input></form>
<div id="log"></div>
CSSの部分は、
<style tyle="text/css">
.fuse {
background-color: white;
color: white;
}
form {
display: inline-block;
margin: 0;
padding: 0;
}
div#log {
height: 300px;
width: 40ch;
font-size: 15px;
overflow-x: hidden;
overflow-y: scroll;
border: 1px solid black;
}
</style>
まぁ、好きなようにスタイルを設定しましょう。
というわけで、完成したものは、
QuizKnock 総理大臣ビンゴ抽選機
https://knife1968.amebaownd.com/posts/7137816
ではでは