JavaScriptでソシャゲのガチャのようなものを簡易的に実装してみました！！

2016 / 7 / 2 2016 / 8 / 15

JavaScript

＊
はじめに!!

お疲れ様です！ぴーすけです！

今回はJavaScriptでガチャを作成いたしましたので、その実装方法をご紹介したいと思います！

＊
まずはやってみてください!!

ドラクエのモンスターガチャと武器ガチャを作成しました。試しに何度かクリックしてみてください！レア度が高いアイテムはなかなか取得できないと思います！

もんすたーがちゃ

もんすたーがちゃ結果

ぶきがちゃ

ぶきがちゃ結果

どうでしょうか？きちんとレア度に応じて出現頻度が調節されているはずだと思います。

＊
実装方法!!

「もんすたーがちゃ」をピックアップして説明いたします。実装は汎用的に使えるようにしたつもりなので、中身が違うガチャをいくつも作ることは比較的簡単だと思います。

ここでは説明のため、一行ずつコメントを入れていますが、最後にコピー用のコメントなしのソースも置いておきます。

ガチャガチャクラス
/**
 * ガチャガチャ機能を有する変数（クラス）
 * 引数　gachalist(アイテム名と重みの多重配列）
 * 例） スライム１０匹に対してはぐれメタルが１匹程度の割合
 *       [
 *        ['スライム', 10],
 *        ['はぐれメタル', 1]
 *       ] 
 */
var Gacha = function(gachalist) {
	//thisを扱い易くするために変数に保存
	var self = this;

	//引数のガチャの中身と重み（多重配列）を保存
	self.lists = gachalist;

	//引数のガチャの中身と重み（多重配列）を元に全体の重みを計算
	self.totalWeight = (function() {
		var sum = 0;//合計保存用変数

		//listsの中を全て取り出すループ
		self.lists.forEach(function(list) {
			sum += list[1];//配列に入っている確率の値を足す
		});
		return sum;//全ての確率値を足した値を
	}());
}

/**
 * ガチャを一回回すメソッド
 * Gachaオブジェクト生成時に渡した多重配列を元に一つ出力する
 */
Gacha.prototype.gacha = function() {
	//ランダムで値を生成（0〜totalWeightの間の数）
	var r = Math.random() * this.totalWeight;

	//重み保存用変数
	var s = 0.0;

	//リストを順に取り出して、ランダムで生成した値rと比べて対象のアイテムを決めるて返す
	for (list in this.lists) {
		s += this.lists[list][1];//ガチャの中身から重みを取得
		
		//ランダムの値と取得した重みを比べて対象のアイテムだった場合
		if (r < s) {
			//アイテム名を取得し、返す
			return this.lists[list][0];
		}
	}
}

上記の記述をすることで、ガチャガチャの機能を有するクラスが作られます。JavaScriptのクラスの作り方や使い方についてはまた別の記事で書きたいと思いますが、簡単に言うと配列などで使うArray()を自分で作るイメージです。

「Gacha」というクラスを作ったので、「new Gacha()」の記述でガチャガチャオブジェクトを作成できます。

このGachaクラスでオブジェクトを作る際に、ガチャガチャの中身の情報として多重配列を渡します。そうすることで、Gacha.gacha()メソッドを使用する際に、多重配列からアイテムを取り出す仕様になっています。

仕様では、newする際に多重配列を渡す前提で作成していますが、今回はエラーハンドリングなどはしていないので、newの際に値を渡さなかったり、変な値を渡すをエラーになってしまいます。ちゃんとクラスを作る際には、想定している引数以外が来た場合にはそれに応じた処理を行うべきですね。

ガチャガチャクラスの使い方
//Gachaクラスを使用し、monsterオブジェクトを生成
var monster = new Gacha([['スライム', 100], ['はぐれメタル', 5], ['メタルキング', 1]]);

//クリックされた時にガチャを一回回し、アラートで表示
document.getElementById('mon').addEventListener('click', function() {
    alert(monster.gacha());
});

説明しているソースでは、「Gachaクラスのgachaメソッド」を使用した時にはアラートで結果を表示するようにしてあるので、画面上部のDEMOとは少し違います！DEMOの場合には、今までの結果も分かるようにちょこちょこしています！

＊
コメントなしのソース!!

ガチャガチャクラス
var Gacha = function(gachalist) {
  var self = this;
  self.lists = gachalist,
  self.totalWeight = (function() {
    var sum = 0;
    self.lists.forEach(function(list) {
      sum += list[1];
    });
    return sum;
  }());
}
Gacha.prototype.gacha = function() {
  var r = Math.random() * this.totalWeight,
      s = 0.0;
  for (list in this.lists) {
    s += this.lists[list][1];
    if (r < s) {
      return this.lists[list][0];
    }
  }
}

ガチャガチャクラスの使い方
var monster = new Gacha([['スライム', 100], ['はぐれメタル', 5], ['メタルキング', 1]]);
document.getElementById('mon').addEventListener('click', function() {
  alert(monster.gacha());
});