レアリティの抽選処理

乱数で1～100までの値を生成し、それが各レアリティのどの部分にヒットするか、みたいなイメージでやってみます。

JavaScriptの乱数生成をMDNで調べてみると、ちょうど欲しい具体例↓がありました。

Math.floor(Math.random() * 10);

これで整数の0～9が返るそうです。

となると、データをこの↓ような形で用意して、

[
  { rarity: 5, rate: 10 },
  { rarity: 4, rate: 30 },
  { rarity: 3, rate: 60 },
]

乱数が0～9なら★5、10～29なら★4、30～99なら★3のように処理してやればよさそうです。

具体的なコードにするとこんな↓感じ。

//乱数を生成
const value = Math.floor(Math.random() * 100);

//確率処理用の現在値
let current = 0;

//レアリティの配列でループ
for ( let i = 0; i < json.length; i++ ) {
  //現在値に確率を加算
  current += json.rate;
  
  //乱数が現在値未満なら当たり
  if ( value < current ) {
    //当たりの処理
  }
}

実際のガチャには小数点第1位まであるレアリティもあるので、乱数は1000までで生成してその後に10で割ります。

レアリティ内の均等抽選処理

まず、各レアリティで均等に当たるキャラを配列↓で用意します。

[
  'アルベルト',
  'ジャミル',
  'グレイ',
  'ホーク',
  'アイシャ',
  …
]

シンプルに名前のテキストにしていますが、オブジェクトでも大丈夫です。

あとはランダムに配列から1要素取り出せばいいだけなので、先ほどと同様に乱数を利用して、当たりの判定はこの↓ようになります。

//乱数を生成
const value = Math.floor(Math.random() * json.length);

//INDEXが乱数のキャラが当たり
const match = json(value);

ガチャのデータ構造を考える

ここまでの流れから実際のガチャに即してデータ構造を考えると、

• レアリティごとに確率を設定
• キャラと装備の区別
• レアリティごとにキャラや装備を配列で持たせる

[
  {
    rarity: 5,
    rate: 10,
    isEquipment: false,
    aLineup: [
      'アルベルト',
      'ジャミル',
      'グレイ',
      'ホーク',
      'アイシャ',
      …
    ],
  },
  …
]

最終的なガチャの処理

上記ガチャデータを変数「json」に持っているものとして、1回のガチャの抽選処理はこの↓ようになります。

//乱数を生成
const value = Math.floor(Math.random() * 1000) / 10;

//確率処理用の現在値
let current = 0;

//レアリティの配列でループ
for ( let i = 0; i < json.length; i++ ) {
  //現在値に確率を加算
  current += json.rate;
  
  //乱数が現在値未満なら当たり
  if ( value < current ) {
    //配列から取り出す用の乱数を生成
    const index = Math.floor(Math.random() * json[i].aLineup.length);
    
    当たりの確定
    const match = json[i].aLineup[index]
    
    //以下、当たりの処理
  }
}

あとは10連目だけ★5の確率が高いとか、★4保証があるとかのボーナスがあるケースがあるので、それの処理を挟んで、10連分の処理をすればこの↓通り。

やってみるとちょっと楽しいですねコレ。

まだ公開できるような状態ではないので、完成次第、URLを紹介したいと思います。