JavaScriptでトランプのカードをシャッフルする

JavaScriptでトランプゲームを作る用に、トランプのデータ生成からシャッフルまでの実装を試してみました。

サンプルコード

今回はシャッフルしたトランプのデータ作成と、ボタンをクリックしてカードを引く(consoleに表示する)ところまでを実装してみます。
カードを引くボタンを設置します。

<button id="btn">カード選択</button>

トランプのデータ生成とシャッフルを行う処理を記述します。

// 使用するカードの種類と数字を設定
TRUMPDATA = {
	card: [
		{ type: 'clover', count: 13 },
		{ type: 'spade', count: 13 },
		{ type: 'heart', count: 13 },
		{ type: 'diamond', count: 13 }
	],
	joker: 1
}

// カードの初期設定とシャッフル
var ORIGINALCARDDATA = trump_init(TRUMPDATA);
var shuffleCards = sort_at_random(ORIGINALCARDDATA);

console.log('シャッフル後のカード', shuffleCards);

// ボタンクリックでカードを引く
document.getElementById('btn').addEventListener('click', function() {
	// カードの選択と配列からの削除
	var selectCard = shuffleCards[0];
	shuffleCards.splice(0, 1);
	console.log('引いたカード', selectCard);
}, false);

/**
 * トランプのカード一覧を作成する
 * @param {object} trumpData (required) トランプの種類と枚数のデータ
 */
function trump_init(trumpData) {
	var cards = [];
	for (var i = 0; i < trumpData['card'].length; i++) {
		var thistype = trumpData['card'][i];
		for (var j = 0; j < thistype['count']; j++) {
			cards.push({
				type: thistype['type'],
				number: j + 1
			});
		}
	}
	for (var i = 0; i < trumpData['joker']; i++) {
		cards.push({
			type: 'joker',
			number: i + 1
		});
	}
	return cards;
}

/**
 * 配列をランダムで並び替える
 * @param {array} arrayData (required) 並び替える配列の内容
 */
function sort_at_random(arrayData) {
	var arr = arrayData.concat();
	var arrLength = arr.length;
	var randomArr = [];
	for(var i = 0; i < arrLength; i++) {
		// 0～countArrの個数 の範囲から、数値をランダムに抽出
		var randomTarget = Math.floor(Math.random() * arr.length);
		// randomArrに数値を格納
		randomArr[i] = arr[randomTarget];
		// 同じ数値を再度使わないように、今回使った数値をcountArrから削除しておく
		arr.splice(randomTarget, 1);
	}
	return randomArr;
}

1～10行目がトランプで使用する種類と枚数の設定になります。
トランプのカード一覧を配列で生成するtrump_init()と、トランプのカードをシャッフルするsort_at_random()の2つの関数を用意して実行しています。
シャッフルしたトランプを生成するデモページ1

上記サンプルでは初回のデータ生成時のみシャッフルを行なっていますが、カードを引くタイミングで再度シャッフルするようにしても良いかもしれません。

// ボタンクリックでカードを引く
document.getElementById('btn').addEventListener('click', function() {
	// カード選択前に再度シャッフル
	shuffleCards = sort_at_random(shuffleCards);
	// カードの選択と配列からの削除
	var selectCard = shuffleCards[0];
	shuffleCards.splice(0, 1);
	console.log('引いたカード', selectCard);
}, false);

シャッフルしたトランプを生成するデモページ2