时间:2021-05-26
我们一般都会按照顺序把随机摸过来的牌从小到大的顺序在手上理整齐(记得小时候打牌两副牌手都抓不过来),这篇随笔就是想通过实现这个功能来熟悉下js中排序数组等相关知识。
用到知识点:
1.工厂方式创建对象
2.js数组sort()方法
复制代码 代码如下:
var testArr = [1, 3, 4, 2];
testArr.sort(function (a,b) {
return a - b;
})
alert(testArr.toString());//1,2,3,4
testArr.sort(function (a, b) {
return b- a;
})
alert(testArr.toString());//4,3,2,1
3.js-Math.radom()随机数
Math.random();//0-1 取得的随机数大于等于0且小于1
4.js数组splice用法
复制代码 代码如下:
//第一个参数是插入的起始位置
//第二个参数是从起始位置开始删除元素的个数
//第三个参数是在起始位置开始插入的元素
//例子
var testArr = [1, 3, 4, 2];
testArr.splice(1, 0, 8);
alert(testArr.toString());//1,8,3,4,2
var testArr1 = [1, 3, 4, 2];
testArr1.splice(1, 1, 8);
alert(testArr1.toString());//1,8,3,4,2
5.js数组shift用法
复制代码 代码如下:
//取出数组中的首个元素返回,数组删除第一个元素
//例子
var testArr = [1, 3, 4, 2];
var k= testArr.shift();
alert(testArr.toString());//3,4,2
alert(k);//1
有了这些基础知识,咱们可以开始打牌了,假设就一个人摸牌,底牌是随机的,我们每次摸来一张牌的时候就要把他插到手上的牌中,保证顺序是从小到大!
第一步:首先我们要写一个生产扑克牌对象的方法:
复制代码 代码如下:
/*工厂模式创建各种牌
*number:牌上的数字
*type:牌的花色
*/
var Cards = (function () {
var Card = function (number, type) {
this.number = number;
this.type = type;
}
return function (number, type) {
return new Card(number, type);
}
})()
第二步:创建扑克牌,洗牌,存储
复制代码 代码如下:
var RadomCards = [];//随机牌存储数组
var MyCards = [];//存储摸过来的牌
//花色0-黑桃 1-梅花 2-方块 3-红桃 4-大鬼 5-小鬼
//数值0-13代表 鬼,1,2,3,4,5,6,7,8,9,10,J,Q,K;
function CreatCompeleteCard() {
var index = 2;
var arr = [];
for (var i = 0; i <= 13; i++) {
if (i == 0) {
arr[0] = new Cards(i, 4);
arr[1] = new Cards(i, 5);
} else {
for (var j = 0; j <= 3; j++) {
arr[index] = new Cards(i, j);
index++;
}
}
}
RadomCards = SortCards(arr);
Show();//在页面上显示当前的牌
}
//洗牌
function SortCards(arr) {
arr.sort(function (a, b) {
return 0.5 - Math.random();
})
return arr;
}
第三步:开始摸牌,摸牌的时候我们首先要判断插入的位置,然后把新牌插入到指定位置,形成新的整齐的顺序
复制代码 代码如下:
//摸牌方法
function GetCards(CardObj) {
var k = InCardsIndex(MyCards, CardObj);//考虑下插入的位置
MyCards.splice(k, 0, CardObj); // 插入形成新的顺序
}
/*【获取牌应该插入的位置】
*arr:当前手里的牌
*obj:新摸到的牌
*/
function InCardsIndex(arr, obj) {
var len = arr && arr.length || 0;
if (len == 0) {
return 0;
}else if (len == 1) {
if (obj.number >= arr[0].number) {
return 1;
} else {
return 0;
}
} else {
var backi = -1;
for (var i = 0; i < len; i++) {
if (obj.number <= arr[i].number) {
backi = i;
break;
}
}
if (backi == -1) {
backi = len;
}
return backi;
}
}
好啦!通过html上的button按钮出发Start来摸牌,点一次摸一张牌!并展示出来
复制代码 代码如下:
function Start() {//摸牌方法,一次摸一张
if (RadomCards.length > 0) {
GetCards(RadomCards.shift());
Show();
} else {
alert("没有了");
}
}
//该show方法是用来在页面展示当前牌的动向
function Show() {
var lenOld = RadomCards.length;
var lenNew = MyCards.length;
var html = "";
for (var i = 0; i < lenOld; i++) {
html += "<div class='pai'><b>" + RadomCards[i].type + "</b>-<div class='nu'>" + RadomCards[i].number + "</div></div>";
}
document.getElementById("old").innerHTML=html;
html = "";
for (var i = 0; i < lenNew; i++) {
html += "<div class='pai new'><b>" + MyCards[i].type + "</b>-<div class='nu'>" + MyCards[i].number + "</div></div>";
}
document.getElementById("new").innerHTML=html;
}
上html和css的代码
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://peleteCard()" />
<input type="button" value="摸牌" onclick="Start()" />
<br/>
底牌:<div id="old"></div>
<div style="clear: both"></div>
<hr />
我摸到的牌:<div id="new"></div>
</body>
</html>
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了Java模拟扑克牌洗牌实现生成52张扑克的方法。分享给大家供大家参考,具体如下:要求:生成52张扑克,模拟扑克牌洗牌,并输出。实现代码:packa
本文实例为大家分享了python分发扑克牌的具体代码,供大家参考,具体内容如下52张扑克牌发个4个玩家,每人13张。要求:自动生成一幅扑克牌组;洗牌;发牌到玩家
本文实例为大家分享了C语言实现洗牌发牌小程序的具体代码,供大家参考,具体内容如下构建一副扑克牌,并实现洗牌发牌。代码#include#include#inclu
笔者在大学二年级期间,做过的一次C++程序设计:扑克牌的洗牌发牌游戏。具体内容是:除去大王和小王,将52张扑克牌洗牌,并发出5张牌。然后判断这5张牌中有几张相同
Java练习——扑克牌发牌器,供大家参考,具体内容如下声明:学习自其他博主,感谢分享实现思路构建一张扑克牌构建一套扑克牌测试构建一张扑克牌/***@author