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 一个函数对同一元素的多个事件响应
Jul 25 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
Bootstrap select多选下拉框实现代码
Dec 23 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
Angularjs 与 bower安装和使用详解
May 11 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 Javascript
小程序关于请求同步的总结
May 05 Javascript
详解js实时获取并显示当前时间的方法
May 10 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 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
hadoop常见错误以及处理方法详解
2013/06/19 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
详解Python requests 超时和重试的方法
2018/12/18 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
Python使用type动态创建类操作示例
2020/02/29 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
python 实现汉诺塔游戏
2020/11/28 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
中学教师师德承诺书
2014/05/23 职场文书
旷课检讨书范文
2014/10/30 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
无罪辩护词范文
2015/05/21 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
Vue3中的Refs和Ref详情
2021/11/11 Vue.js