10連ガチャを作ろう! 第3回 ★とキャラ名を表示する配列をマスターシミュレータ作りで学ぶプログラミング講座

本講座では10連ガチャシミュレータを作ることで、プログラミングの考え方を1から学びます。

必要なものはメモ帳(Windowボタン→Windowsアクセサリ→メモ帳)とブラウザ。環境はパソコンです。

今回は第3回、今回で完成します！

今回のプログラムは以下のような動作をします。

前回までのおさらいと今回すること
1. キャラクター割当表
2. 確率分岐表
プログラミング

前回までのおさらいと今回すること

前回は、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 = ['織田信長','徳川家康','豊臣秀吉'];

この部分で配列を定義します。前回までは配列に数字を入れてゆきましたが、今回は最初にキャラクターを入れておきます。

★１は10キャラ、★２は7キャラ、★３は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>

詳しくは次回(未定)に.