JavaScript发扑克牌并且将牌整理好

最新推荐文章于 2022-03-02 16:58:39 发布

原创

最新推荐文章于 2022-03-02 16:58:39 发布 · 2k 阅读

11 ·

CC 4.0 BY-SA版权

本文介绍如何使用JavaScript创建一个扑克牌 deck，并实现洗牌算法，接着详细讲解如何对洗完的牌进行排序，以便在游戏中使用。内容涵盖JavaScript数组操作和算法应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<script>
			var mycards = [
			  //数值从大到小,方便后面牌排序
			  //大    小    王
				302,301,
			  //黑桃 红桃 梅花 方块
				224,223,222,221,//2
				214,213,212,211,//A
				134,133,132,131,//K
				124,123,122,121,//Q
				114,113,112,111,//J
				104,103,102,101,//10
				94, 93, 92, 91,//9
				84, 83, 82, 81,//8
				74, 73, 72, 71,//7
				64, 63, 62, 61,//6
				54, 53, 52, 51,//5
				44, 43, 42, 41,//4
				34, 33, 32, 31//3
			];

			var flag = 1; //全局变量
			
			for(var i = 0; i < 50; i++) //洗牌50次
				{
					var a = parseInt(Math.random() * 54); //随机产生0-53的整数赋给a
					var b = parseInt(Math.random() * 54); //随机产生0-53的整数赋给b
					if(a != b) {
						var x = mycards[a];
						mycards[a] = mycards[b];
						mycards[b] = x;
					}
				}
				
			var cards1 = mycards.slice(0,17); //玩家1的17张牌
			var cards2 = mycards.slice(17,34);//玩家2的17张牌
			var cards3 = mycards.slice(34,51);//玩家3的17张牌
			var cards4 = mycards.slice(51);   //地主的3张牌
			
			var a = parseInt(Math.random() * 3);//产生一个0~2的随机数
			var b = a + 1 //得到玩家号
	
			//洗牌方法
			function start() {
				
				//玩家1-------------------------------------------------------------------
				for(var j = 0; j < cards1.length; j++) {
					var div = document.createElement("div"); //创建一个DIV元素
					div.style.backgroundImage = "url(card/" + cards1[j] + ".jpg)";
					div.style.width = "105px"; //设置宽度
					div.style.height = "150px"; //设置高度	
					div.style.position = "absolute"; //设置绝对定位	
					div.style.marginLeft = (20 * flag++) + "px" //每张牌离前一张牌有20px距离 					
					div.style.marginTop = "20px";
					div.onclick = function() {
						var y = this.style.marginTop;

						if(y == "20px") {
							this.style.marginTop = "10px"; //牌向上移
						} else {
							this.style.marginTop = "20px"; //牌回来原始位置
						}
					}
					document.body.appendChild(div); //将创建的div元素追加到网页的body中去

				}
				flag = 1; //初始化flag为1

				//玩家2-------------------------------------------------------------------
				for(var j = 0; j < cards2.length; j++) {
					var div = document.cr