JS实现纸牌发牌动画

本文实例为大家分享了JS实现纸牌发牌动画的具体代码，供大家参考，具体内容如下

先看演示

游戏构建准备

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

技术概要

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

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;
    itemp.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++;
 }
}
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• js+canvas实现纸牌游戏

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！