JS实现纸牌发牌动画


Posted in Javascript onJanuary 19, 2021

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

先看演示

JS实现纸牌发牌动画

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
js创建对象几种方式的优缺点对比
Sep 28 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
微信小程序canvas实现签名功能
Jan 19 #Javascript
vue二选一tab栏切换新做法实现
Jan 19 #Vue.js
微信小程序选择图片控件
Jan 19 #Javascript
jQuery冲突问题解决方法
Jan 19 #jQuery
js实现随机点名
Jan 19 #Javascript
js实现有趣的倒计时效果
Jan 19 #Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 #Javascript
You might like
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
PHP中strtotime函数使用方法分享
2012/01/10 PHP
分享3个php获取日历的函数
2015/09/25 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
python实现人人网登录示例分享
2014/01/19 Python
Python数据结构之图的应用示例
2018/05/11 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
Python计算IV值的示例讲解
2020/02/28 Python
Python itertools.product方法代码实例
2020/03/27 Python
J2EE面试题集锦(附答案)
2013/08/16 面试题
《日月潭》教学反思
2016/02/20 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS