一起来做webgame，《Javascript蜘蛛纸牌》

不得不说，做游戏是会上瘾的，这次带来的是win系统上的经典游戏《蜘蛛纸牌》，不能完美，但求一玩

DEMO：

http://colorgamer.com/demo/webgame/spider/

关于蜘蛛纸牌

规则请打开win系统的蜘蛛纸牌，然后点击帮助

这里要实现的

• 同样是两副牌，一共104张
• 同一种花色的低难度游戏

需要解决的问题

• 1、洗牌
• 2、判断点击牌所在序列是否符合可移动条件
• 3、判断目标位置是否符合可移动条件
• 4、移动符合条件的纸牌序列到目标位置
• 5、完成一个完整序列时的清除
• 6、发牌

综合起来，《蜘蛛纸牌》基本上就这么6个问题，解决了，也就完成了。下面一个一个来实现

1、洗牌

光洗牌，不难。如果要做到每次洗牌都有解就不是我能解决的问题了（win系统里的蜘蛛纸牌是不是每次都有解，我确实不知道）。这里就随便洗洗，没解也没办法，即使有解，你也不一定能解完，是吧。

这里是同色，所以不用去考虑4个花色，那一副牌，从A-K，是13张，有4组，就是13*4=52张牌。两副就是104张。先初始化一组牌

var _cards_init=['1','2','3','4','5','6','7','8','9','10','J','Q','K'];

跟着把它变成1副牌

_cards_init=_cards_init.concat(_cards_init,_cards_init,_cards_init);  //使用concat来链接数组

这里自己链接自己3次，就变成了4组，一副牌。再接着链接自己一次，就变成两副牌

_cards_init=_cards_init.concat(_cards_init);

两副牌有了，接着就洗牌，这里简单的使用随机数来洗。

//洗牌
function shuffle(){
    var len=_cards_init.length;
    if(len>0){
        var i=random(len);
        _cards.push(_cards_init[i]);
        _cards_init.splice(i,1);
        shuffle();
    }
}

这是一个递归，每次从初始化的剩余牌序列里随机取一个，放到新牌的数组里，然后将取走的牌从初始化的数组里移除，重计长度，只要长度不小于1，那么重复这个操作，至到全部取完为止。这样生成的新牌数组里的牌基本上就是乱序了，达到洗牌的效果。

牌洗好之后，就得将最开始的牌面放到界面上。win7的蜘蛛纸牌是10列，前4列5张扣牌，1张明牌，后6列4张扣牌，1张明牌。这里也按这样的方式开始。

因为是按列为基础进行摆牌，所以程序在确定牌所在位置的时候，需要分别记录，每一列等于是一个序列，有牌移进来，要增加它的长度，有牌移走的时候，要减少它的长度。所以这里使用了一个数组来分别记录牌的信息

var _cards_table=new Array();

接着确定位置，按照初始化的界面，一共要放54张牌到牌面上，其中44张是扣牌，10张是明牌，所以，先从新牌数组里取54张牌出来，其中前10张，也就是0-9，是个位数，直接将下标做了牌的参数

for(var i=0;i<10;i++){
    _cards_table[i]=new Array();
}
var _html_cards_table='';

for(var i=0;i<54;i++){
    if(i<=9){
        j=i;
        _html_cards_table+="<div class='cardbg cardbg"+j+"' action-t='' action-line='"+j+"'></div>";
    }else{
        var s=i.toString();
        j=s.substring(s.length-1);
    }
    j=parseInt(j);
    var num=cardNum(_cards[i]);
    var back='';
    //背面牌
    if(i>=0&&i<44){
        back='back';
    }
    var l=_cards_table[j].length;
    _html_cards_table+="<div class='card cardv"+num+" card"+j+" "+back+"' action-t='"+back+"' action-line='"+j+"' action-index='"+l+"' style='z-index:1;position:absolute;left:"+_cardsPostion[0]+"px;top:"+_cardsPostion[1]+"px;'>"+_cards[i]+"</div>";
    _cards_table[j].push(num);
}

其实，这里固定牌的位置，直接使用了CSS样式，不太好，因为有时候你不知道到底一列会出现多少个纸牌，要是CSS样式写少了，那多出来的纸牌放的位置就会出现问题。最好的办法是JS直接判断索引值，根据索引值*固定数来确定位置。

这些牌放出去后，自然得将它们从新牌的数组里移除，以后发牌，就是数组里剩下的牌了

_cards.splice(0,54);
_cards_table+='<div id="post">发牌<span id="postnum">5</span></div>';  //顺便添加一个发牌的按钮
$("#game_map").html(_cards_table);  //将生成的牌放到游戏地图上

这里除了这些初始牌面外，还有一个东西，那就是隐藏的一个牌，因为每列的牌都有可能完全的移出，这时候符合条件的牌序列又可以移到这个空列里来，所以，得在那个位置放一个看不见的牌，但这个牌只有列号，没有其它的东西。

if(i<=9){
    j=i;
    _cards_table+="<div class='cardbg cardbg"+j+"' action-t='' action-line='"+j+"'></div>";
}

2、判断点击牌所在序列是否符合可移动条件。3、判断目标位置是否符合可移动条件

首先，得为各牌添加单击事件。然后第一次点的牌要记录下它的3个东西：1、所在列。2、列上的索引值。3、牌面值（A-K）。再次点击其它牌的时候，进行判断，它是不是符合移动条件，如：被点击牌及之后的牌序列是不是符合条件（递减），目标牌是不是比第一次点击牌大1，如果是，移动牌到新位置，如果不是，给出提示，不符合条件

function clickCard(){
    $(".card").unbind('click').click(function(){
        var line=$(this).attr('action-line');
        var back=$(this).attr('action-t');
        if(back){
            return false;
        }
        var index=parseInt($(this).attr('action-index'));
        var cards_num;
        line=parseInt(line);
        cards_num=_cards_table[line][index];
        if(_cards_selected.length==1){
            if((cards_num-1)==_cards_selected[0][2]){
                var _index=index+1;
                moveCard(line,_index,_cards_selected[0][2]);
            }else{
                alert('不能移动到那个位置2_'+cards_num+'_'+_cards_selected[0][2]);
            }
            css_remove();
            _cards_selected.shift();
            clickCard();
        }else{
            if(getCards(line,index)==0){
                _cards_selected[0]=[];
                _cards_selected[0][0]=line;
                _cards_selected[0][1]=index;
                _cards_selected[0][2]=cards_num;
            }else{
                css_remove();
            }
        }
    });
}

4、移动符合条件的纸牌序列到目标位置

移走了，也就得把它从该列的数组里清除掉，这里使用splice()，只需要传入起始索引值，将它和它之后的所有牌都清除。然后创建新的牌加入到目标列的数组里

function moveCard(line,index,cards_num){
    line=parseInt(line);
    var len=_cards_table[_cards_selected[0][0]].length;
    _cards_table[_cards_selected[0][0]].splice(_cards_selected[0][1],len);
    var html='';
    var moveCardIndex=index;
    _moveCardNum=len-_cards_selected[0][1];
    for(var i=_cards_selected[0][1];i<len;i++){
        var v=$(".card"+_cards_selected[0][0]).eq(_cards_selected[0][1]).html();
        var o=$(".card"+_cards_selected[0][0]).eq(_cards_selected[0][1]);
        var num=cardNum(o.html());
        _cards_table[line].push(num);
        var cardline=o.attr('action-line');
        o.removeClass('card'+cardline);
        o.addClass('card'+line);
        o.attr('action-line',line);
        o.attr('action-index',moveCardIndex);
        move_animation(o,line,moveCardIndex,1);
        moveCardIndex++;
    }
    $(".card"+_cards_selected[0][0]).eq(_cards_selected[0][1]-1).removeClass('back');
    $(".card"+_cards_selected[0][0]).eq(_cards_selected[0][1]-1).attr('action-t','');
    $("#scores").html(parseInt($("#scores").html())+1);

}

checkComplate(line);用于判断是否已经实现A-K，如果是将它清除

5、完成一个完整序列时的清除

首先判断该列的纸牌数是否超过13张，因为如果连13张都没有，又怎么会有完整的A-K呢。之后再判断明牌是不是有13张，而且明显的大小是不是从大到小减1的。如果都符合，那将它们全部清除，并从该列的数组里将它们清除。

function checkComplate(line){
    var obj=$(".card"+line)
    var len=obj.length;
    var preNum=0;
    var error=0;
    var comNum=[];
    if(len>=13){
        for(var i=0;i<len;i++){
            if(obj.eq(i).attr('action-t')==''){
                if(preNum>0){
                    if(parseInt(cardNum(obj.eq(i).html()))+1==preNum){
                    }else{
                        comNum=[];
                    }
                    comNum.push(i);
                }else{
                    comNum.push(i);
                }
                preNum=parseInt(cardNum(obj.eq(i).html()));
            }
        }
        if(comNum.length>=13){
            for(var i in comNum){
                obj.eq(comNum[i]).remove();
                if(i==0){
                    obj.eq(comNum[i]-1).removeClass('back');
                    obj.eq(comNum[i]-1).attr('action-t','');
                    var len=_cards_table[line].length;
                    _cards_table[line].splice(comNum[i],len);
                }
            }
            _left_group--;
            if(_left_group==0){
                alert('你赢了，共移动'+$('#scores').html()+'次');
                $("#re").click();
            }
        }
    }
}

6、发牌

发牌其实和初始化牌面没什么区别，只是每次只发10张，也就是向0-9列分别增加一张牌，发出去后，剩于牌就减去这些牌

function post(){
    $("#post").click(function(){
        if(_cards.length<=0){
            alert('无牌可发了');
            return false;
        }
        var _html_cards_table='';
        for(var i=0;i<10;i++){;
            var num=cardNum(_cards[i]);
            var l=_cards_table[i].length;
            _html_cards_table+="<div class='card cardv"+num+" card"+i+"' action-t='' action-index='"+l+"' action-line='"+i+"' style='z-index:1;position:absolute;left:"+_cardsPostion[0]+"px;top:"+_cardsPostion[1]+"px;'>"+_cards[i]+"</div>";
            _cards_table[i].push(num);
        }
        _cards.splice(0,10);
        var cardbenum=$(".card").length;
        $("#game_map").append(_html_cards_table);
        var _i=cardbenum;
        var _this=this;
        this.move_animation=function(){
            var line=$(".card").eq(_i).attr('action-line');
            var index=$(".card").eq(_i).attr('action-index');
            move_animation($(".card").eq(_i),line,index);
            _i++;
            if(_i<cardbenum+10){
                setTimeout(_this.move_animation,100);
            }
        }
        this.move_animation();
        $("#postnum").html(parseInt($("#postnum").html())-1);
        clickCard();
    });
}

以上6点，就是《蜘蛛纸牌》的基本内容，代码里还有一些方法，是为了增加一些方便，比如返回J-K的值等等，这里就不说了。直接编辑源代码，还是很累的。

里面还有关于动画的内容，暂时就不讲了，全部代码也不帖了，可以查看试玩页面的源文件