- 第1回 設計〜仕組みを考える – 乱数とfor文をマスター
- 第2回 ★とキャラ番号を割り当てる – IF文をマスター
- 第3回 ★とキャラ名を表示する – 配列をマスター
本講座では10連ガチャシミュレータを作ることで、プログラミングの考え方を1から学びます。
必要なものはメモ帳(Windowボタン→Windowsアクセサリ→メモ帳)とブラウザ。環境はパソコンです。
今回は第3回、今回で完成します!
今回のプログラムは以下のような動作をします。
前回までのおさらいと今回すること
前回は、0〜99の数を発生させ、その数に応じて★を割り当て、更にキャラクターの番号を割り当てました。
キャラクター割当表
★ | 丹羽長秀、本田忠勝、前田利家、明智光秀、石田三成、宇喜多秀家、本田忠勝、斎藤道三、黒田官兵衛、高山右近 10キャラ |
★★ | 伊達政宗、柴田勝家、上杉謙信、武田信玄、毛利元就、真田幸村、島津義弘 7キャラ |
★★★ | 織田信長、徳川家康、豊臣秀吉 3キャラ |
確率分岐表
0〜99の乱数を発生させて★を決定 | 0〜9の乱数を発生させて★キャラを決定 | |||||
---|---|---|---|---|---|---|
0〜82
| → | ★ | → | 0 | → | 丹羽長秀 |
1 | 本田忠勝 | |||||
2 | 前田利家 | |||||
3 | 明智光秀 | |||||
4 | 石田三成 | |||||
5 | 宇喜多秀家 | |||||
6 | 本田忠勝 | |||||
7 | 斎藤道三 | |||||
8 | 黒田官兵衛 | |||||
9 | 高山右近 | |||||
※82%の10分の1ですから、全体で見れば各キャラは8.2%です | ||||||
– | – | 0〜6の乱数を発生させて★★キャラを決定 | ||||
83〜96
| → | ★★ | → | 0 | → | 伊達政宗 |
1 | 柴田勝家 | |||||
2 | 上杉謙信 | |||||
3 | 武田信玄 | |||||
4 | 毛利元就 | |||||
5 | 真田幸村 | |||||
6 | 島津義弘 | |||||
※14%の7分の1ですから、全体で見れば各キャラは2%です | ||||||
– | – | 0〜2の乱数を発生発生させて★★★キャラを決定 | ||||
97〜99
| → | ★★★ | → | 0 | → | 織田信長 |
1 | 徳川家康 | |||||
2 | 豊臣秀吉 | |||||
※3%の3分の1ですから全体で見れば各キャラは1%です |
プログラミング
前回作成したプログラム
<!DOCTYPE html>
<html>
<head>
<title>0~99までの乱数を発生させる</title>
</head>
<body>
<button onclick="generateRandom10Chara()">10連ガチャシミュレータ</button>
<div id="numbers_div"></div>
<script>
function generateRandom10Chara() {
var numbers = [];
for (var i = 0; i < 10; i++) {
var randomStarNum = Math.floor(Math.random() * 100) ;
if(randomStarNum <=82 ){
var randomStar1CharaNum = Math.floor(Math.random() * 10) ;
numbers.push("★-"+randomStar1CharaNum);
}else if( randomStarNum <= 96){
var randomStar2CharaNum = Math.floor(Math.random() * 7) ;
numbers.push("★★-"+randomStar2CharaNum);
}else{
var randomStar3CharaNum = Math.floor(Math.random() * 3) ;
numbers.push("★★★-"+randomStar3CharaNum);
}
}
var numbersDiv = document.getElementById("numbers_div");
numbersDiv.innerHTML = "結果: " + numbers.join(" ,");
}
</script>
</body>
</html>
今回作成するプログラム
<!DOCTYPE html>
<html>
<head>
<title>0~99までの乱数を発生させる</title>
</head>
<body>
<button onclick="generateRandom10Chara()">10連ガチャシミュレータ</button>
<div id="chara_div"></div>
<script>
function generateRandom10Chara() {
var chara = [];
var star1Chara = ['丹羽長秀','本田忠勝','前田利家','明智光秀','石田三成','宇喜多秀家','松永久秀','斎藤道三','黒田官兵','衛高山右近'];
var star2Chara = ['伊達政宗','柴田勝家','上杉謙信','武田信玄','毛利元就','真田幸村','島津義弘'];
var star3Chara = ['織田信長','徳川家康','豊臣秀吉'];
var star1Prob = 82;
var star2Prob = 96;
var star1CharaTotal = 10;
var star2CharaTotal = 7;
var star3CharaTotal = 3;
for (var i = 0; i < 10; i++) {
var randomStarNum = Math.floor(Math.random() * 100) ;
if(randomStarNum <=star1Prob ){
var randomStar1CharaNum = Math.floor(Math.random() * star1CharaTotal) ;
chara.push("★-"+star1Chara[randomStar1CharaNum]);
}else if( randomStarNum <= star2Prob){
var randomStar2CharaNum = Math.floor(Math.random() * star1CharaTota2) ;
chara.push("★★-"+star2Chara[randomStar2CharaNum]);
}else{
var randomStar3CharaNum = Math.floor(Math.random() * star1CharaTota3) ;
chara.push("★★★-"+star3Chara[randomStar3CharaNum]);
}
}
var numbersDiv = document.getElementById("chara_div");
numbersDiv.innerHTML = "結果: " + chara.join(" ,");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
少しづつ見てゆきます。
配列の定義
var star1Chara = ['丹羽長秀','本田忠勝','前田利家','明智光秀','石田三成','宇喜多秀家','松永久秀','斎藤道三','黒田官兵','衛高山右近'];
var star2Chara = ['伊達政宗','柴田勝家','上杉謙信','武田信玄','毛利元就','真田幸村','島津義弘'];
var star3Chara = ['織田信長','徳川家康','豊臣秀吉'];
この部分で配列を定義します。前回までは配列に数字を入れてゆきましたが、今回は最初にキャラクターを入れておきます。
★1は10キャラ、★2は7キャラ、★3は3キャラです。‘丹羽長秀’のようにシングルクォーテーションで囲み、カンマで区切ります。
★の確率の定義
次に1回目の★決定の際に用いる82と96を定義します。
var star1Prob = 82;
var star2Prob = 96;
前回まではif文の中に直接書き込んでいましたが、このように定義しておくことで、確率が変わった時でも簡単に変更できるようになります。
キャラクター数を定義(2回目の乱数の範囲)
var star1CharaTotal = 10;
var star2CharaTotal = 7;
var star3CharaTotal = 3;
同様の理由で定義をしておきます。
まとめ
再度見てみましょう。
function generateRandom10Chara() {
var chara = [];
var star1Chara = ['丹羽長秀','本田忠勝','前田利家','明智光秀','石田三成','宇喜多秀家','松永久秀','斎藤道三','黒田官兵衛','高山右近'];
var star2Chara = ['伊達政宗','柴田勝家','上杉謙信','武田信玄','毛利元就','真田幸村','島津義弘'];
var star3Chara = ['織田信長','徳川家康','豊臣秀吉'];
var star1Prob = 82;
var star2Prob = 96;
var star1CharaTotal = 10;
var star2CharaTotal = 7;
var star3CharaTotal = 3;
for (var i = 0; i < 10; i++) {
var randomStarNum = Math.floor(Math.random() * 100) ;
if(randomStarNum <=star1Prob ){
var randomStar1CharaNum = Math.floor(Math.random() * star1CharaTotal) ;
chara.push("★-"+star1Chara[randomStar1CharaNum]);
}else if( randomStarNum <= star2Prob){
var randomStar2CharaNum = Math.floor(Math.random() * star2CharaTotal) ;
chara.push("★★-"+star2Chara[randomStar2CharaNum]);
}else{
var randomStar3CharaNum = Math.floor(Math.random() * star3CharaTotal) ;
chara.push("★★★-"+star3Chara[randomStar3CharaNum]);
}
}
var numbersDiv = document.getElementById("numbers_div");
numbersDiv.innerHTML = "結果: " + chara.join(" ,");
}
もし★のキャラクターが増加した場合は、star1Charaにキャラクターを追加し、追加した分の数をstar1CharaTotalに加えてください。1キャラ増えるとすれば11になります。この方法にすることで、わざわざ確率を設定したりする必要はありません。キャラクターが増えても上記定義部分を変更するだけです。★★、★★★も同様です。
★の確率が変わった際はstar1Probの部分を変更し、★★も変更します。余った数が★★★の確率です。
後で見てもわかるように適切なコメント(注意書き)を加えておくとよいでしょう。
コメントを加えた10連ガチャシミュレータの完成プログラム
1行のコメントは // とし、複数行のコメントは/* */で囲みます
<!DOCTYPE html>
<html>
<head>
<title>10連ガチャシミュレータ</title>
</head>
<body>
<button onclick="generateRandom10Chara()">10連ガチャシミュレータ</button>
<div id="gacha_div"></div>
<script>
function generateRandom10Chara() {
var chara = [];
var star1Chara = ['丹羽長秀','本田忠勝','前田利家','明智光秀','石田三成','宇喜多秀家','松永久秀','斎藤道三','黒田官兵衛','高山右近'];
//★のキャラ、現在10キャラです
var star2Chara = ['伊達政宗','柴田勝家','上杉謙信','武田信玄','毛利元就','真田幸村','島津義弘'];
//★★のキャラ、現在7キャラです
var star3Chara = ['織田信長','徳川家康','豊臣秀吉'];
//★のキャラ、現在3キャラです
var star1Prob = 82; //★の確率は82%です
var star2Prob = 96; //★★の確率は96-82の14%です。★★★は残りの99-96の3%です
var star1CharaTotal = 10; //★のキャラ、現在10キャラですので10を定義
var star2CharaTotal = 7; //★★のキャラ、現在7キャラですので7を定義
var star3CharaTotal = 3; //★★★のキャラ、現在3キャラですので3を定義
/*
以下は関数の本文です。
複数行に渡るコメントは
このように書きます。
*/
for (var i = 0; i < 10; i++) {
var randomStarNum = Math.floor(Math.random() * 100) ;
if(randomStarNum <=star1Prob ){
var randomStar1CharaNum = Math.floor(Math.random() * star1CharaTotal) ;
chara.push("★-"+star1Chara[randomStar1CharaNum]);
}else if( randomStarNum <= star2Prob){
var randomStar2CharaNum = Math.floor(Math.random() * star2CharaTotal) ;
chara.push("★★-"+star2Chara[randomStar2CharaNum]);
}else{
var randomStar3CharaNum = Math.floor(Math.random() * star3CharaTotal) ;
chara.push("★★★-"+star3Chara[randomStar3CharaNum]);
}
}
var gachaDiv = document.getElementById("gacha_div");
gachaDiv.innerHTML = "結果: " + chara.join(" ,");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
以上で一通りの説明は終了です。
画像も表示したい!
模試画像を表示させたいときは、画像名を入れた配列を別途用意して、読み込みを行い、chara.push()に一緒に入れてしまいます。
var star1CharaPic = [‘niwa.jpg’,’honda.jpg’,,,,,];のようにして、
chara.push(“★-“+star1Chara[randomStar1CharaNum]+”<img src=\”https://画像が置いてあるアドレス/”+star1CharaPic+”\””);
のようにします。
横並びにしたいときは例えば、以下のようになるようにします。
<div class="gacha_div">
<div style="display:inline-block; width:10%;text-align:center;">
<img src="画像アドレス" />
<span>キャラクター名</span>
</div>
<div style="display:inline-block; width:10%;text-align:center;">
<img src="画像アドレス" />
<span>キャラクター名</span>
</div>
/*
順次残りの8キャラが表示されてゆく
*/
</div>
詳しくは次回(未定)に.
- 第1回 設計〜仕組みを考える – 乱数とfor文をマスター
- 第2回 ★とキャラ番号を割り当てる – IF文をマスター
- 第3回 ★とキャラ名を表示する – 配列をマスター