v客学院吧 关注:57贴子:694
  • 3回复贴,共1

一个跑得快小游戏的制作

取消只看楼主收藏回复

在我们已经能够利用JS输出扑克牌后,其实跑得快的制作已经不是那么的难了。但是由于当真正当作一副牌去使用的时候,我们是需要对牌的顺序以及这副牌进行很多操作,如:修改顺序、删除、添加等。在这里,我们可以引入新学习的数据的概念。


1楼2016-08-23 17:29回复
    一.牌的创建
    var pai=new Array();
    首先建立一个牌的数组。
    然后利用一个函数,对牌进行创建。
    function paiCreat(){
    }
    按照之前的套路来对数组进行修改,则在创建牌的函数内,先写上第一副牌。
    for(var i=0;i<54;i++){
    switch(parseInt(i/13)){
    case 0:pai[i]='黑桃';break;
    case 1:pai[i]='红桃';break;
    case 2:pai[i]='梅花';break;
    case 3:pai[i]='方片';break;
    default:
    if(i==52){
    pai[i]='小王';
    }else{
    pai[i]='大王';
    }
    }
    if(i<52){
    num=(i+1)%13;
    switch(num){
    case 1:num='A';break;
    case 11:num='J';break;
    case 12:num='Q';break;
    case 0:num='K';break;
    }
    pai[i]+=num;
    }
    }
    然后是第二副牌。
    for(var i=54;i<108;i++){
    switch(parseInt((i-54)/13)){
    case 0:pai[i]='黑桃';break;
    case 1:pai[i]='红桃';break;
    case 2:pai[i]='梅花';break;
    case 3:pai[i]='方片';break;
    default:
    if((i-54)==52){
    pai[i]='小王';
    }else{
    pai[i]='大王';
    }
    }
    if((i-54)<52){
    num=((i-54)+1)%13;
    switch(num){
    case 1:num='A';break;
    case 11:num='J';break;
    case 12:num='Q';break;
    case 0:num='K';break;
    }
    pai[i]+=num;
    }
    }
    但是,现在问题来了。跑得快是要去掉6张2和2张A,并且不要大小王的。
    那在这里就需要利用到splice方法,对pai的数据进行删除操作。
    首先找到要删掉的几张牌,在数组中的位置。
    var del=new Array(1,14,27,55,68,81,0,54,52,53,107,106);
    //列出要删除的位置
    原谅我没有按顺序来。当然这不是问题,我们是可以排序的。
    del.sort(sortNumber); //排序
    排序需要搭配函数:
    function sortNumber(a,b)
    {
    return a - b
    }
    好了。可以开始删除了。
    for( x in del){ //遍历要删掉的内容
    pai.splice(del[x]-x,1)
    //删掉一个以后,后面的数组的位置自动往前排 位置-1
    }
    在这里可能逻辑上会有点懵。为什么是要删掉del[x]-x?
    我们可以来分析一下,当x=0的时候,删掉的就是排序后的,第0个位置的牌,但删除以后,原本在索引1上的牌会自动往前进一位;
    当x=1的时候,删掉的是原本索引1上的牌,但此时他已经到了0,所以是1-1,并且后面的牌再往前进;
    当x=2的时候,删掉的是原本索引14上的牌,但此时已经前进过两次,所以是14-2;
    以此类推,每次删掉的牌,删除时的索引为del[x](原本的索引)-x(已经删掉的)牌的个数。
    那到此为止,牌的创建就已经结束了,这样就已经生成了一副完整的跑得快。
    为了验证,可以在调用函数后,输出观察一下。
    paiCreat();
    var str=pai.join(";");
    document.write('桌上的牌:'+str+'<hr />');


    2楼2016-08-23 17:29
    回复
      二.洗牌
      之后就是洗牌了。同样的,创建函数来完成。
      function xiPai(){
      for(var i=0;i<100;i++){
      var weiZhi1=Math.floor(Math.random()*pai.length);
      var weiZhi2=Math.floor(Math.random()*pai.length);
      var x=pai[weiZhi1];
      pai[weiZhi1]=pai[weiZhi2];
      pai[weiZhi2]=x;
      }
      }
      在这里的原理是,在整个pai的数组中,随机拿出两张牌,进行调换;循环调换若干次后,将牌的顺序打乱。
      可以在调用洗牌后,再次验证一下。
      xiPai()
      var str=pai.join(";");
      document.write('桌上的牌:'+str+'<hr />');


      3楼2016-08-23 17:29
      回复
        三.发牌
        之后来到了我们的发牌环节,首先,跑得快是4个玩家,所以我们给每个玩家都创建一个数组。
        var jia=new Array();
        var yi=new Array();
        var bing=new Array();
        var ding=new Array();
        function faPai(){
        var num=pai.length;
        for(var i=0;i<num;i++){
        var thisPai=pai.pop();
        switch(i%4){
        case 0:jia.push(thisPai);break;
        case 1:yi.push(thisPai);break;
        case 2:bing.push(thisPai);break;
        default:ding.push(thisPai);break;
        }
        }
        }
        faPai();
        发牌的原理是:获取pai的长度,从最后一张开始发。
        var thisPai=pai.pop();利用这个方法拿到最后一张牌,并且把最后一张牌从原有的数组中删除。
        之后判断应该发给谁。
        分别按顺序发给甲乙丙丁四个人。
        需要注意的是,必须提前获取PAI的长度,而不能直接把pai.length放在for里面。
        每删除一张牌,pai.length是会动态变化的,会导致到了最后,只发完了一半的牌。
        最后写一个函数,验证结果。
        function xianShi(){
        document.write('甲手里的牌'+jia.join()+'<hr />');
        document.write('乙手里的牌'+yi.join()+'<hr />');
        document.write('丙手里的牌'+bing.join()+'<hr />');
        document.write('丁手里的牌'+ding.join()+'<hr />');
        }
        xianShi();


        4楼2016-08-23 17:30
        回复