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 相关文章推荐
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
jquery实现submit提交表单
Feb 03 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
vue组件是如何解析及渲染的?
Jan 13 Vue.js
微信小程序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《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
php下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
php 字符串替换的方法
2012/01/10 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
关于this和self的使用说明
2010/08/01 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
详解Angular5 服务端渲染实战
2018/01/04 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
python 如何快速复制序列
2020/09/07 Python
Python列表推导式实现代码实例
2020/09/09 Python
Python实现异步IO的示例
2020/11/05 Python
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
什么是数据抽象
2016/11/26 面试题
当当网软件测试笔试题
2015/11/24 面试题
军训考核自我鉴定
2014/02/13 职场文书
个人年终总结怎么写
2015/03/09 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
二婚主持词
2015/06/30 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL