2022/10/24

ソシャゲのガチャプログラムの作り方【JavaScript編】

JavaScript

この記事では、ソシャゲのガチャプログラムの作り方にについて解説しています。フロントエンドの技術（JavaScript）で作るガチャシステムに興味がある方は参考にしてみてください。作成したガチャツールも無料公開しています。

目次【本記事の内容】 [ click ]

１.ガチャプログラムの作り方
２.ガチャプログラムの作成例

ガチャプログラムの作り方

ここで作るガチャプログラムの仕様としては、アイテム別で排出確率が決まっているものとします。つまり、レアリティ毎に確率が定められていてその中からアイテムを再抽選する仕様ではないと言うことです。基本的なガチャロジックは下記の通りです。

ガチャロジック

// ガチャデータを取得する
function getConfig() {
  return [
    { id: '大当たり', val: 1 },
    { id: '当たり', val: 10 },
    { id: 'はずれ', val: 89 },
  ];
}

// 設定データを元にガチャ抽選を行う
function gachaRun(config) {

    const min = 1; // 最小値
    const max = 100; // 最大値

    // 乱数生成（抽選）
    const randomNum = Math.floor(Math.random() * (max + 1 - min)) + min;

    let result = [];
    let totalProb = 0;
    for (let i = 0; i < config.length; i++) {
        totalProb += config[i].val;
        if( randomNum <= totalProb ) {
            result = config[i];
            break;
        }
    };

    return result;
}

// 実行
const config = getConfig();
console.log(gachaRun(config));

2行目のgetConfig()でガチャデータを取得しています、本番では設定データをJSONファイルにまとめてそれを取得する的な感じにすればいいかと思います。ちなみに、配列内で指定しているvalは排出確率になります、「1」なら「1%」といった感じですね。

11行目のgachaRun(config)でガチャデータを渡してガチャ処理を行なっています。17行目で乱数を生成して、生成した乱数とガチャデータの値を21行目のfor文の中で評価することでガチャ抽選を実装しています。ロジック自体は割とシンプルなので、これをベースにして色々作れると思います。

参考記事Qiita - PHPでガチャ

ガチャプログラムの作成例

せっかくなので、先ほど紹介したコードを使ってガチャシュミレーター的なものを作ってみましたので紹介しておきます、最近よく遊んでいるPUBGモバイルの10連ガチャをPUBGモバイル公式の確率表記通りに実装してみました。

PUBGモバイルガチャシュミレーター

PUBGモバイル10連ガチャシュミレーター

loading now

{{ item.prob }}%

10連ガチャを引く

ガチャシュミレーターの補足

ガチャデータに関してはJSON形式でまとめて外部ファイル化、Ajaxで読み込んでVue.jsで出力させています。ガチャロジック自体は冒頭で紹介したコードをそのまま使用しています、抽選で得た値をあらかじめ用意しておいた画像ファイルにパスが通るように設定する事で、ボタンを押すとガチャ結果が得られるといった仕組みになります。