10連ガチャを作ろう! 第1回 設計 仕組みを考える 乱数とfor文をマスター シュレータ作りで学ぶプログラミング講座

2023.03.14
スポンサーリンク

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

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

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

スポンサーリンク

仕組みを考えよう

確率の設定(定義)

まず、ガチャの確率を考えてみましょう。★、★★、★★★の三種類があるものとし、確率を以下のように設定します。

★ ★★ ★★★
83% 14% 3%

各々の★に応じて、各キャラクターを設定します。ここでは戦国武将の名前を割り当ててみます。合計で20キャラ設定します。

★

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

10キャラ
★★

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

7キャラ
★★★

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

3キャラ

それぞれのキャラは星ごとに確率は均一とします。

キャラクターの確率は、それぞれ以下のようになります。

★キャラ…8.3% (8.3%×10キャラで83%)

★★キャラ…2% (2%×7キャラで14%)

★★★キャラ…1％ (1%×3キャラで3%)

仕組みを考える

次の流れのプログラムを書くこととします。

  1. ガチャを回す
  2. 0～99の数字をランダムで選ぶ
  3. 得られた数字に応じて、★の数(レア度)を選ぶ
  4. 0～82の数字であれば★、83〜96の数字であれば★★、97〜99であれば★★★となります。
  5. 次に、再度、それぞれのレア度に応じて乱数を発生させてキャラクターを割り当てます。2段階で乱数を発生させてキャラを決定します。
※もし、★の確率自体は変わらずに特定のキャラの確率が2倍になっているとしたら、その人に2つの数字を割り当てます。例えば高山右近の発生確率が2倍であるのならば、0-10の11個の乱数を発生させ、高山右近を9，10にすればよいわけです。つまり、高山右近が2人いる扱いにして作ってしまうことになります。丹羽長秀、本田忠勝、前田利家、明智光秀、石田三成、宇喜多秀家、松永久秀、斎藤道三、黒田官兵衛、高山右近、高山右近の11キャラにするということです。確率が2倍になるから、、他がその分下がって、云々と考えず、発想を転換しましょう。プログラミングにおいてはとても大切なことです。

0〜99の乱数を発生させて★を決定

 0〜9の乱数を発生させて★のキャラを決定

0〜82

 

 →

 ★ → 0 → 丹羽長秀
1 本田忠勝
2 前田利家
3 明智光秀
4 石田三成
5 宇喜多秀家
6 松永久秀
7 斎藤道三
8 黒田官兵衛
9 高山右近
※83％の10分の1ですから、全体で見れば各キャラは8.3％です

–

 –

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%です

プログラミング

まずは乱数を発生するプログラムを書いてみよう

  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>
  2. 一旦保存をしましょう。ファイル→名前を付けて保存→ファイル名を10rengacha.htmlとし、ファイルの種類をすべてのファイル(*.*)とします。文字コードはUTF-8でよいです。

プログラムの説明

HTML部分

上記のプログラムはHTML文章の中にJavascriptのプログラムを書き込んでいます。以下の文はhtmlで書く時のきまりの文章と考えてください。

<!DOCTYPE html>
<html>
<head>
<title>タイトルを記入します</title>
</head>
<body>
この部分にプログラムなどの色々な文章を書いていきます。
</body>
</html>

ではその中身を具体的に見てゆきます。

<button onclick="generateRandomNumbers()">0～99までの整数の中から10個の乱数を表示</button>

この分は表示されるボタンです。「0～99までの整数の中から10個の乱数を表示」というボタンを表示させて、クリックをするとgenerateRandomNumbers()という関数を実行させます。

Javascriptで実行される関数

generateRandomNumbers()の内容を見てゆきます。

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");
numbersDiv.innerHTML = "Random Numbers: " + numbers.join(", ");
}

var numbers = []; では、numbersという名前の配列という箱を用意することを宣言します。

for文とは何か

forとは繰り返しループです。for(スタートで実行 ; 繰り返しの終わりの条件 ; 繰り返すたびに実行すること)　を意味します。

for(){  } で{}の中を繰り返しの終わり条件を満たしている限り繰り返し続けます。

for (var i = 0; i < 10; i++) {
  var randomNum = Math.floor(Math.random() * 100) ;
  numbers.push(randomNum);
}

この分では、まず、i=0として、スタートを決定します。

次に、その{}で囲まれた中身が実行され、最後に i++が実行されます。i++とはiに1を加えるという意味です。つまり、iは繰り返すたびに0,1,2,3,4,5,6,7,8,9と増えてゆきます。　1回目の実行ではiは0、2回目でiは1となってゆきます。

i<10が終了条件ですから、iが10まで増えてしまったら、{}は実行されません。つまり、0〜9までの10回実行される。ということになります。

ではまず、i=0つまり、1回目の時の実行を見ます。

for文の中身。乱数を発生させる

var randomNum = Math.floor(Math.random() * 100) ;
numbers.push(randomNum);

この部分が最も重要です。Math.floor(Math.random()*100)とは何でしょうか。

数学と同じように()の中から実行されてゆきますので、まず、Math.random()が実行されます。

Math.random()は0以上1未満の数を発生させます。0.1575657966965325のような数字です。

ですが、これでは扱いにくいです。

そこで、100倍します。すると0.1575657966965325は15.75657966965325となります。

次に小数点以下を切り捨てます。Math.floor(小数点以下の数)を用います。

Math.floor(Math.random() * 100)

とします。すると、15.75657966965325は15になります。

このようにして得ることができた数(randomNum)を、最初に作ったnumbersという配列(箱)に入れておきます。

配列に乱数を入れてゆく

それが次の文です。

numbers.push(randomNum);

numbersという名称の配列にrandomNumを入れます。

配列のイメージ

プログラミング言語によっては配列の数を最初に決めておかなければなりませんがJavascriptでは必要ありません。

numbers[i] 0 1 2 3 4 5 6 7 〜
入った数 40 10 54 13 97 44 50 70 〜

もう一度見てみましょう。

for (var i = 0; i < 10; i++) {
  var randomNum = Math.floor(Math.random() * 100) ;
  numbers.push(randomNum);
}

「0〜99までの数字からランダムで得られた一つの数(randomNum)をnumbersに入れる」という動作がfor分を使って0から9までの計10回実行されます。

iが10になるとforを抜け出して次のプログラムに移ります。

numbers_divというidが振り当てられた場所(div)をnumbersDivとプログラムで使えるように定義(用意)します。

var numbersDiv = document.getElementById("numbers_div");

振り当てられた場所(div)は、以下の文の位置です。

<div id="numbers_div"></div>

そして、その場所にnumbersに収められた10個の数をカンマで区切ってnumbersDivに表示(innerHTML)します。

numbers.join(“,”) で、numbers配列をカンマで区切って表示させます。

numbersDiv.innerHTML = "10個の乱数: " + numbers.join(", ");

第1回はここまで。

スポンサーリンク