洗牌方法-----JS数组随机排序

最新推荐文章于 2024-01-19 14:03:36 发布

小淘气_00

最新推荐文章于 2024-01-19 14:03:36 发布

阅读量506

点赞数

分类专栏：笔记文章标签：小白

本文链接：https://blog.csdn.net/qq_38212239/article/details/70163122

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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 οnclick="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次，每次随机挑选两个数组中的数据进行交换位置，

小淘气_00

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
洗牌方法-----JS数组随机排序

#box { width: 845px; height: 955px; background-color: #666666; border: 5px solid #993300; function update(){ var str = ""; var card = []; var n = 0; fo
复制链接

扫一扫