javascript实例--教你实现扑克牌洗牌功能
我们一般都会按照顺序把随机摸过来的牌从小到大的顺序在手上理整齐（记得小时候打牌两副牌手都抓不过来），这篇随笔就是想通过实现这个功能来熟悉下js中排序数组等相关知识。
用到知识点：
1.工厂方式创建对象
2.js数组sort()方法
vartestArr=[1,3,4,2];
testArr.sort(function(a,b){
returna-b;
})
alert(testArr.toString());//1,2,3,4
testArr.sort(function(a,b){
returnb-a;
})
alert(testArr.toString());//4,3,2,1
3.js-Math.radom()随机数
Math.random();//0-1取得的随机数大于等于0且小于1
4.js数组splice用法
//第一个参数是插入的起始位置
//第二个参数是从起始位置开始删除元素的个数
//第三个参数是在起始位置开始插入的元素
//例子
vartestArr=[1,3,4,2];
testArr.splice(1,0,8);
alert(testArr.toString());//1,8,3,4,2
vartestArr1=[1,3,4,2];
testArr1.splice(1,1,8);
alert(testArr1.toString());//1,8,3,4,2
5.js数组shift用法
有了这些基础知识，咱们可以开始打牌了，假设就一个人摸牌，底牌是随机的，我们每次摸来一张牌的时候就要把他插到手上的牌中，保证顺序是从小到大！ 第二步：创建扑克牌，洗牌，存储 第三步：开始摸牌，摸牌的时候我们首先要判断插入的位置，然后把新牌插入到指定位置，形成新的整齐的顺序 好啦！通过html上的button按钮出发Start来摸牌，点一次摸一张牌！并展示出来 上html和css的代码
//取出数组中的首个元素返回，数组删除第一个元素
//例子
vartestArr=[1,3,4,2];
vark= testArr.shift();
alert(testArr.toString());//3,4,2
alert(k);//1
第一步：首先我们要写一个生产扑克牌对象的方法：
/*工厂模式创建各种牌
*number:牌上的数字
*type:牌的花色
*/
varCards=(function(){
varCard=function(number,type){
this.number=number;
this.type=type;
}
returnfunction(number,type){
returnnewCard(number,type);
}
})()
varRadomCards=[];//随机牌存储数组
varMyCards=[];//存储摸过来的牌
//花色0-黑桃1-梅花2-方块 3-红桃4-大鬼 5-小鬼
//数值0-13代表鬼,1,2,3,4,5,6,7,8,9,10,J,Q,K;
functionCreatCompeleteCard(){
varindex=2;
vararr=[];
for(vari=0;i<=13;i++){
if(i==0){
arr[0]=newCards(i,4);
arr[1]=newCards(i,5);
}else{
for(varj=0;j<=3;j++){
arr[index]=newCards(i,j);
index++;
}
}
}
RadomCards=SortCards(arr);
Show();//在页面上显示当前的牌
}
//洗牌
functionSortCards(arr){
arr.sort(function(a,b){
return0.5-Math.random();
})
returnarr;
}
//摸牌方法
functionGetCards(CardObj){
vark=InCardsIndex(MyCards,CardObj);//考虑下插入的位置
MyCards.splice(k,0,CardObj);//插入形成新的顺序
}
/*【获取牌应该插入的位置】
*arr:当前手里的牌
*obj:新摸到的牌
*/
functionInCardsIndex(arr,obj){
varlen=arr&&arr.length||0;
if(len==0){
return0;
}elseif(len==1){
if(obj.number>=arr[0].number){
return1;
}else{
return0;
}
}else{
varbacki=-1;
for(vari=0;i<len;i++){
if(obj.number<=arr[i].number){
backi=i;
break;
}
}
if(backi==-1){
backi=len;
}
returnbacki;
}
}
functionStart(){//摸牌方法，一次摸一张
if(RadomCards.length>0){
GetCards(RadomCards.shift());
Show();
}else{
alert("没有了");
}
}
//该show方法是用来在页面展示当前牌的动向
functionShow(){
varlenOld=RadomCards.length;
varlenNew=MyCards.length;
varhtml="";
for(vari=0;i<lenOld;i++){
html+="<divclass="pai"><b>"+RadomCards[i].type+"</b>-<divclass="nu">"+RadomCards[i].number+"</div></div>";
}
document.getElementById("old").innerHTML=html;
html="";
for(vari=0;i<lenNew;i++){
html+="<divclass="painew"><b>"+MyCards[i].type+"</b>-<divclass="nu">"+MyCards[i].number+"</div></div>";
}
document.getElementById("new").innerHTML=html;
}
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>
<styletype="text/css">
.boom{
width:50px;
height:50px;
border:solid1pxred;
position:absolute;
top:5px;
left:5px;
}
.pai
{
width:50px;
height:100px;
border:solid1pxred;
margin-left:3px;
float:left;
}
.new
{
border:solid1pxblue;
}
.nu
{
text-align:center;
font-size:24px;
margin-top:25px;
}
</style>
</head>
<body>
<!--<divclass="boom"></div>-->
<inputtype="button"value="开始"onclick="CreatCompeleteCard()"/>
<inputtype="button"value="摸牌"onclick="Start()"/>
<br/>
底牌：<divid="old"></div>
<divstyle="clear:both"></div>
<hr/>
我摸到的牌：<divid="new"></div>
</body>
</html>
相关文章