1. 程式人生 > >洗牌方法-----JS陣列隨機排序

洗牌方法-----JS陣列隨機排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		#box {  
		    width: 845px;  
		    height: 955px;  
		    background-color: #666666;  
		    border: 5px solid #993300;  
function update(){
				var str = "";
				var card = [];
				var n = 0;
				for(i = 0 ; i < 4 ; i++){
					this.suit = arr[i];
					for(k = 0 ; k < 13 ; k++){
						this.face = arr2[k];
						card[n] = this.suit + this.face;
						n++;
					}
				}
				card[52] = '小王'; 
				card[53] = '大王';
				this.card = card;
				return card; 
			}

function update(){
				var str = "";
				var card = [];
				var n = 0;
				for(i = 0 ; i < 4 ; i++){
					this.suit = arr[i];
					for(k = 0 ; k < 13 ; k++){
						this.face = arr2[k];
						card[n] = this.suit + this.face;
						n++;
					}
				}
				card[52] = '小王'; 
				card[53] = '大王';
				this.card = card;
				return card; 
			}

border-radius: 20px; padding: 10px; margin: 20px auto; } #box div { float: left; width: 100px; height: 100px; color: #ffffff; background-color: #cc9900; border-radius: 10px; margin: 10px; text-align: center; font-weight: bold; font: 30px/90px "Lucida Grande", "Trebuchet MS", sans-serif; } #box .car{background-color: #9999FF; }</style></head><body><div id='box'></div><button onclick="shulle(card)">洗牌</button><script>var arr = ['紅桃','方片','黑桃','梅花'];var arr2 = ['A',2,3,4,5,6,7,8,9,10,'J','Q','K'];//生成一副撲克牌function update(){var str = "";var card = [];var n = 0;for(i = 0 ; i < 4 ; i++){this.suit = arr[i];for(k = 0 ; k < 13 ; k++){this.face = arr2[k];card[n] = this.suit + this.face;n++;}}card[52] = '小王'; card[53] = '大王';this.card = card;return card; }function upcard(){var str = '';for (var i = 0; i < card.length; i++){ //生成div以生成的數字命名 str += "<div class='car' id = "+card[i]+">"+card[i]+"</div>"; } document.getElementById("box").innerHTML = str; }//洗牌的方法function shulle (){function randomSort(a,b){return Math.random() > 0.5 ? -1 : 1;}card.sort(randomSort);upcard();return card;}var card = update();upcard();</script></body></html>

今天嘗試建立一副撲克牌 

首先是生成撲克牌

var arr = ['紅桃','方片','黑桃','梅花'];
var arr2 = ['A',2,3,4,5,6,7,8,9,10,'J','Q','K'];
function update(){
var str = "";
	var card = [];
	var n = 0;
	for(i = 0 ; i < 4 ; i++){
	this.suit = arr[i];
		for(k = 0 ; k < 13 ; k++){
		this.face = arr2[k];
			card[n] = this.suit + this.face;
			n++;
		}
	}
	card[52] = '小王'; 
	card[53] = '大王';
	this.card = card;
	return card; 
}
使用了雙迴圈的方法,先定義兩個陣列儲存花色和數字,然後用兩個迴圈創造組合生成帶花色的牌,最後直接定義生成大王小王

為了讓洗牌的效果顯著一點,用upcard將卡牌粗略的顯示出來,這裡的方法借鑑了前幾天看到的 @天際的海浪 的2048遊戲中數字塊的顯示方法

function upcard(){
var str = '';
for (var i = 0; i < card.length; i++){
	//生成div以生成的數字命名
	 str += "<div class='car' id = "+card[i]+">"+card[i]+"</div>";
}
	document.getElementById("box").innerHTML = str;  
}

接著是洗牌

function shulle (){
function randomSort(a,b){
	return Math.random() > 0.5 ? -1 : 1;
	}
	card.sort(randomSort);
	upcard();
	return card;
}
這裡使用了陣列中的sort方法,sort方法中的引數的正負影響著排序的正反,這裡使用Math.random生成一個0~1的數字,和0.5去比較

大於0.5返回-1,否則返回1,這樣就可以打亂陣列中資料的順序。

 另外在網上還看到另外的方法

function shuffle(arr) {
	var i, j,temp;
	for (i = arr.length - 1; i > 0; i--) {
	//j為要隨機的位置
	j = Math.floor(Math.random() * (i + 1));
	temp = arr[i];
	arr[i] = arr[j];
	arr[j] = temp;
	}
	return arr;
}

迴圈length-1次,每次隨機挑選兩個陣列中的資料進行交換位置,