一、首先介绍下游戏规则
a) 牌面有A、2、3、4、5、6、7、8、9、10、J、Q、K
b) 每种牌面有4张牌
c) 随机发牌
d) 共1名玩家,发牌后,即刻显示最大牌面名称
e) 发牌后,牌面名称 规则如下:
i. J,Q,K都是10分,然后点数依次排列最后A是1分;
ii. 在得分相同时,按单张牌大小逐一比较,例如,都是牛1,带有黑桃K的牛1最大
iii. 牌局开始每个人抓五张牌,玩家需要将手中三张牌10点的倍数,称为“牛”。其余的两张牌加起来算点数,去掉十位只留个位数来进行比较,如果剩下两张正好是10点,根据纸牌斗牛规则,这副牌就是“斗牛”,如果,剩余两张点数之和超过10,则将其点数之和对10取余
iv. 当无法用三张牌组成10的倍数时,则以最大分数那张牌为名
v. 不计算同花
vi. 每个牌面都有四种花色,例如,黑桃K、红桃K、方片K、梅花K
vii. 黑桃>红桃>梅花>方片
viii. K>Q>J>10>9>8>7>6>5>4>3>2>A
例如:A 2 7 J 10 就是 “斗牛”
8 5 7 A 6 为 “牛7”
A A A A K 为 “K大”
9 9 2 9 2 为 “牛1” 9+9+2=20 9+2=11 11%10=1
二、游戏思路
1.使用unicode显示花色
2.进入游戏后,在牌桌上增加init类
3.游戏开始,发牌时,在桌面上去掉init类,增加play类
4.每种牌有牌面、花色、得分
5.随机发放5张牌给每位玩家
6.逐玩家计算权重
a.将5张牌按牌面、花色降序排列
b.抽出最大三张牌,得分合计是否大于10,如果小于10则该牌取最大牌面和花色组成最大牌面名称
c.从大到小依次取出1张牌
d.从剩下的牌中,再依次取出1张牌
c.从剩下的牌中,再依次取出1张牌,直到取出的三张牌得分之和是10的整数倍,或者,牌面计算完毕
d.如果有三张牌的组合得分是10的整数倍,那么,将剩下两张牌之和对10取余,如果是余数是0则为“斗牛”,否则为牛x(余数),同时,取出最大一张牌的花色
html代码:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta charset="utf-8" /> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script> </head> <body> <div class="container"> <div class="desktop"> <h1 class="card none"> 点我开始 </h1> <div class="card"> <div class="number"></div> <div class="flower"></div> </div> <div class="card"> <div class="number"></div> <div class="flower"></div> </div> <div class="card"> <div class="number"></div> <div class="flower"></div> </div> <div class="card"> <div class="number"></div> <div class="flower"></div> </div> <div class="card"> <div class="number"></div> <div class="flower"></div> </div> </div> <div class="counter"> </div> <h1 class="replay"> 点击继续进行游戏 </h1> </div> </body> </html>
CSS(效果比较丑):
body { overflow: hidden; height: 100%; line-height: 100%; 100%; text-align: center; vertical-align: middle; } .container { background: #AAA; 800px; height: 600px; display: inline-block; margin: auto; text-align: center; vertical-align: top; } .desktop { background: #808080; 700px; height: 400px; line-height: 400px; margin: auto; display: inline-block; text-align: center; } .counter { color: #fff; height: 200px; } .card { 100px; height: 200px; line-height: 30px; vertical-align: middle; text-align: center; position: relative; display: inline-block; background: #EAEAEA; margin: 100px auto; } .card .flower { position: absolute; left: 10px; top: 20px; 20px; height: 20px; } .card .number { position: absolute; left: 5px; top: 5px; 15px; height: 15px; } .none { background: #7f7575; display: none; } .init .card { display: none; } .init .none { display: inline-block; } .init .replay { display: none; } .play .none { display: none; } .replay { background-color: #666; opacity: 0.3; *filter: alpha(opacity=30); height: 100%; 100%; left: 0; top: 0; position: absolute; margin: 0; padding: 20px; }
JS1(Linq for JS):
(function () { Array.prototype.Any = function (func) { for (var i = 0; i < this.length; i++) if (func(this[i])) return true; return false; }; Array.prototype.ForEach = function (act) { for (var i = 0; i < this.length; i++) act(this[i]); return this; }; Array.prototype.Sum = function (getValue) { var s = 0; if (getValue == null) for (var i = 0; i < this.length; i++) s += this[i]; else for (var i = 0; i < this.length; i++) s += getValue(this[i]); return s; }; })();
JS2:
(function () { dn = {}; dn.init = function () { jQuery(".container").addClass("init"); }; dn.play = function () { jQuery(".container").removeClass("init"); var cards = []; for (var i = 1; i <= 13; i++) { var card = getCard(i - 1); cards.push({ key: card, myFlowers: myFlowers.slice(0) }); } var arr = []; for (var i = 0; i < 5; i++) { var idx = Math.random().toString(); var cardIdx = idx.substring(2, 5); cardIdx = parseInt(cardIdx) % cards.length; var card = cards[cardIdx]; var flowerIdx = idx.substring(7, 2); flowerIdx = parseInt(flowerIdx) % card.myFlowers.length; var flower = card.myFlowers.splice(flowerIdx, 1); arr.push({ key: card.key, flower: flower }); if (card.myFlowers.length == 0) cards.splice(cardIdx, 1); }; render(arr); var text = compute(arr); jQuery(".counter").html(text); }; function render(arr) { for (var i = 0; i < arr.length; i++) { var card = arr[i]; var cardEles = jQuery(".desktop .card"); var $card = cardEles.get(i + 1); $card = jQuery($card); $card.find(".number").html(card.key); $card.find(".flower").html(card.flower); if (i < arr.length - 1) delay(); } }; var compute = function (arr) { arr.ForEach(function (card) { card.num = getNumber(card.key); card.idx = getIndex(card.key); card.flowerNum = getFlowerNum(card.flower); }); arr = arr.sort(function (a, b) { return b.idx * 4 + b.flowerNum - (a.idx * 4 + a.flowerNum); }); var max3 = arr.slice(0, 3); var max = arr.Sum(function (a) { return a.num; }); if (max < 10) { return getBig(arr); } else { for (var i = 0; i <= arr.length - 3; i++) { var d1 = arr.slice(); var a = d1.splice(i, 1); for (var j = 0; j <= d1.length - 2; j++) { var d2 = d1.slice(); var b = d2.splice(j, 1); for (var k = 0; k <= d2.length - 1; k++) { var d3 = d2.slice(); var c = d3.splice(k, 1); var num = a[0].num + b[0].num + c[0].num; if (num % 10 == 0) { debugger; var cow = d3.Sum(function (x) { return x.num; }); cow = cow % 10; return (cow == 0 ? "斗牛" : ("牛" + cow.toString())) + " " + getBig(arr); }; }; }; }; debugger; return getBig(arr); } }; var getBig = function (arr) { var c = arr.slice(0, 1); return c[0].flower + c[0].key + "大"; } var getIndex = function (x) { for (var i = 0; i < myCards.length; i++) { if (x === myCards[i]) return i + 1; } return 0; }; var getFlowerNum = function (x) { for (var i = 0; i < myFlowers.length; i++) { if (x === myFlowers[i]) return 3 - i; } return 0; }; var getNumber = function (x) { for (var i = 0; i < myCards.length; i++) { if (x === myCards[i]) return i >= 10 ? 10 : (i + 1); } return 0; } var myFlowers = ["u2660", "u2665", "u2663", "u2662"]; var myCards = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"]; var getCard = function (i) { var card = myCards[i]; return card; } var delay = function () { for (var i = 0; i < 1000; i++) { } } })(); (function () { jQuery(".desktop .none").click(function () { dn.play(); }); jQuery(".replay").click(function () { dn.init(); }); dn.init(); })();