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 相关文章推荐
js 纯数字不重复排列的另类方法
Jul 17 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 Javascript
JS实现一键回顶功能示例代码
Oct 28 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 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
php采集时被封ip的解决方法
2010/08/29 PHP
php通用防注入程序 推荐
2011/02/26 PHP
PHP下判断网址是否有效的代码
2011/10/08 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
vue写一个组件
2018/04/09 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
Python验证码识别的方法
2015/07/10 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
python中reload(module)的用法示例详解
2017/09/15 Python
用Python实现KNN分类算法
2017/12/22 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
在pycharm中显示python画的图方法
2019/08/31 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
大学四年学习的自我评价分享
2013/12/09 职场文书
校园十佳歌手策划书
2014/01/22 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
出租房屋协议书
2014/09/14 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
匿名检举信范文
2015/03/02 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android