10連ガチャを作ろう! 第2回 ★とキャラ番号を割り当てる IF文をマスター シミュレータ作りで学ぶプログラミング講座

2023.03.14
スポンサーリンク

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

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

今回は第2回、今回でほとんど仕組みは完成します！

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

スポンサーリンク

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

前回は、0〜99の数、合計100個を発生させました。

今回はその数に応じて、星を決定し、さらに乱数を発生させてキャラクター番号を割り当てます。

作成した確率表を再度掲載します。

キャラクター割当表

★

82%

丹羽長秀、本田忠勝、前田利家、明智光秀、石田三成、宇喜多秀家、松永久秀、斎藤道三、黒田官兵衛、高山右近

10キャラ

★★

14%

伊達政宗、柴田勝家、上杉謙信、武田信玄、毛利元就、真田幸村、島津義弘

7キャラ

★★★

3%

織田信長、徳川家康、豊臣秀吉

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="generateRandomNumbers()">0～99までの整数の中から10個の乱数を表示</button>
<div id="numbers_div"></div>
<script>
function generateRandomNumbers() {
  var numbers = [];
  for (var i = 0; i < 10; i++) {
    var randomNum = Math.floor(Math.random() * 100) ;
    numbers.push(randomNum);
  }
  var numbersDiv = document.getElementById("numbers_div");
  numbersDiv.innerHTML = "10個の乱数: " + numbers.join(", ");
}
</script>
</body>
</html>

今回説明するプログラム

次のプログラムを前回のプログラムにコピーペストして保存(前回のプログラムを消してしまいます)をしてください。消したくないときは新たにファイルを作って同様に保存をしてください。

<!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>

保存をして実行をしてみると、

結果: ★-5 ,★★-2 ,★-2 ,★-2 ,★-3 ,★-0 ,★-4 ,★-0 ,★★★-0 ,★-3

のように、★の数と数字が表示されます。

★であれば0〜9、★★であれば0〜6、★★★であれば0〜２が表示されます。

if文の使い方

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);
  }
}

上から、randomStarNumの数(0〜99)に応じて、分岐してゆきます。

if(randomStarNum <=82 ){
  var randomStar1CharaNum = Math.floor(Math.random() * 10) ;
  numbers.push("★-"+randomStar1CharaNum);
}

この部分はrandomStarNumが82以下のときに実行されます。

82以下の時は、再び0〜9までの乱数を発生させ、randomStar1CharNumという変数に入れます。

numbersと名付けた配列(箱)に「“★-“+randomStar1CharNum」という文字を入れます。

★-43のような文字が入ります。

次の文に移ります。

}else if( randomStarNum <= 96){
  var randomStar2CharaNum = Math.floor(Math.random() * 7) ;
  numbers.push("★★-"+randomStar2CharaNum);
}

ここでは96以下の場合に実行されます。

ここで注意してほしいことがあります。96以下ですが、82以下は実行されないということです。

else if()とはその前の条件を除外して判断します。もし、次のようにした場合は、43の時も実行されてしまいます。

if(randomStarNum <=82 ){
  var randomStar1CharaNum = Math.floor(Math.random() * 10) ;
  numbers.push("★-"+randomStar1CharaNum);
}if( randomStarNum <= 96){
  var randomStar2CharaNum = Math.floor(Math.random() * 7) ;
  numbers.push("★★-"+randomStar2CharaNum);
}

else ifとすることで、上のifを満たした場合は除外されます。一つのグループとして考えることができるようになるわけです。

次のように書くこともできますが、通常はelse ifを用います

if(randomStarNum <=82 ){
  var randomStar1CharaNum = Math.floor(Math.random() * 10) ;
  numbers.push("★-"+randomStar1CharaNum);
}
if( 83 < randomStarNum <= 96){
  var randomStar2CharaNum = Math.floor(Math.random() * 7) ;
  numbers.push("★★-"+randomStar2CharaNum);
}

では最後のelseです。これは上記２つのif、else ifを満たさないときにのみ実行されます。つまり、97以上の数字の時に実行されることになります。

else{
  var randomStar3CharaNum = Math.floor(Math.random() * 3) ;
  numbers.push("★★★-"+randomStar3CharaNum);
}

実際は97以上の数字、文字などその他あらゆるものが該当しますが、このプログラムでは97,98,99の3つの数字以外はいることはないため上記のようにします。

再度見てみましょう。

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(" ,");
}

47だったらどういう道をたどるか?98だったら？86だったら？

とプログラムを見ながら考えてみてください。

第2回は以上です。

次は各数値に応じてキャラクターを表示するプログラムの説明です。

スポンサーリンク