JS写纸牌发牌和动画（详细解剖）

先看演示

游戏构建准备

1.准备52张纸牌
2.一张桌布
3.编辑工具为 Visual Code

技术概要

1.对象操作
2.数据操作
3.JS animation动画
4.全局变量

function desen_x(){
    let that = this;
    var desen=["h_1","h_2","h_3","h_4","h_5","h_6","h_7","h_8",
    "h_9","h_10","h_11","h_12","h_13","p_1","p_2","p_3","p_4"
    ,"p_5","p_6","p_7","p_8","p_9","p_10","p_11","p_12","p_13"
    ,"t_1","t_2","t_3","t_4","t_5","t_6","t_7","t_8","t_9","t_10"
    ,"t_11","t_12","t_13","x_1","x_2","x_3","x_4","x_5","x_6","x_7"
    ,"x_8","x_9","x_10","x_11","x_12","x_13"];
    //将你的扑克前戳名全部存储到数组中
    var Obj = new Object();	//新建一个对象
    var array=[];//空数组一个
    for(var i=0;i<4;i++){//游戏演示里只需要发4张扑克，所以只要<4    
            var x=Math.round(Math.random()*52);//随机数取整*52
            Obj[i]=x;//存入到全局变量中 否则每次只能存一个数值
    }
    console.log(Obj);//打印对象看看是不是4个对象
    window.array=[desen[Obj[0]],desen[Obj[1]],desen[Obj[2]],desen[Obj[3]]];
    //将存好的数组 带入扑克全局
}

function send_poker(){ //该方法是发牌事件
    console.log(window.array);
    //测试你的全局变量是否正常
    //并且将传递的全局变量带入temp[]
    var temp=[window.array[0],window.array[1],window.array[2],window.array[3]];
    var ti=0;
    var iamges="../poker/"+temp+".png";//这是图片的默认路径 +你的 desen
    var creator=document.getElementById("d_back"); //取得操作的dom父元素
    var po_1=document.createElement("div");//虚拟生成div
    var num = 0;                            //初始化变量
    //po_1.src="../h_1.png";
    //img_1.scr="../images/poker/h_1.png";
    
    for(var i=0;i<temp.length;i++){//循环temp
        var that=this;
        var img_1=document.createElement("img");
        img_1.src+="./images/poker/"+temp[i]+".png";//对创建的img赋值可变的路径
            console.log("等于0时");
        var ten=10;
        img_1.className="poker_float";//为其指定一个类，也就是默认的初始发牌位置
       
        
        creator.appendChild(img_1);//生成对象
         
        
        //"../images/poker/"+temp.i+".png";
        
    }

    
      move_poker();//该方法是自封装的动画
       
}

动画事件

function move_poker(){  //移动扑克
    var node = document.getElementById("d_back").childNodes;//获取父元素下的所有子节点
    console.log(node);//打印出有多少
    var n5=node[9];//以要操作的 img对象类为 9开始操作
    var n6=node[10];
    var n7=node[11];
    var n8=node[12];
    var popo=anime({//animation动画可在最后查看
        targets: n5, //操作的对象
        translateX:-150, //移动到的横向位置
        translateY: -250,//移动到的纵向位置
        easing: 'easeInOutQuad',//缓动，不更改css机制
        duration:100,//完成时间
      });
      var popo1= anime({
        targets: n6,
        translateX:-100,
        translateY: -250,
        easing: 'easeInOutQuad',
        duration:200,
      });
      var popo2=anime({
        targets: n7,
        translateX:-50,
        translateY: -250,
        easing: 'easeInOutQuad',
        duration:300,
      });
      var popo3= anime({
        targets: n8,
        translateX:0,
        translateY: -250,
        easing: 'easeInOutQuad',
        duration:400,
      });
}
function gui(){ //GUI  是将所有节点复位，方便下次发牌
    var node = document.getElementById("d_back").childNodes;
    var n5=node[9];
    var n6=node[10];
    var n7=node[11];
    var n8=node[12];
    var popo4=anime({
        targets: [n5,n6,n7,n8],
        translateX:0,
        translateY: 0,
    })
    node.removeChild(popo4);
}

animation封装

function setAnimationsProgress(insTime) { //该方法有多个dom时，则执行异或异步线程模式进行
    var i = 0;
    var animations = instance.animations;
    var animationsLength = animations.length;    
    while (i < animationsLength) { 
      var anim = animations[i];
      var animatable = anim.animatable;
      var tweens = anim.tweens;
      var tweenLength = tweens.length - 1;
      var tween = tweens[tweenLength];
      if (tweenLength) { tween = filterArray(tweens, function (t) { return (insTime < t.end); })[0] || tween; } 
      var elapsed = minMax(insTime - tween.start - tween.delay, 0, tween.duration) / tween.duration;
      var eased = isNaN(elapsed) ? 1 : tween.easing(elapsed);
      var strings = tween.to.strings;
      var round = tween.round;
      var numbers = [];
      var toNumbersLength = tween.to.numbers.length;
      var progress = (void 0);
      for (var n = 0; n < toNumbersLength; n++) {
        var value = (void 0);
        var toNumber = tween.to.numbers[n];
        var fromNumber = tween.from.numbers[n] || 0;
        if (!tween.isPath) {
          value = fromNumber + (eased * (toNumber - fromNumber));
        } else {
          value = getPathProgress(tween.value, eased * toNumber);
        }
        if (round) {
          if (!(tween.isColor && n > 2)) {
            value = Math.round(value * round) / round;
          }
        }
        numbers.push(value);
      }
      var stringsLength = strings.length;
      if (!stringsLength) {
        progress = numbers[0];
      } else {
        progress = strings[0];
        for (var s = 0; s < stringsLength; s++) {
          var a = strings[s];
          var b = strings[s + 1];
          var n$1 = numbers[s];
          if (!isNaN(n$1)) {
            if (!b) {
              progress += n$1 + ' ';
            } else {
              progress += n$1 + b;
            }
          }
        }
      }
      setProgressValue[anim.type](animatable.target, anim.property, progress, animatable.transforms);
      anim.currentValue = progress;
      i++;
    }
  }