• 售前

  • 售后

热门帖子
入门百科

JS实现纸牌发牌动画

[复制链接]
紫愚灵 显示全部楼层 发表于 2021-10-25 19:16:50 |阅读模式 打印 上一主题 下一主题
本文实例为大家分享了JS实现纸牌发牌动画的详细代码,供大家参考,详细内容如下
先看演示


游戏构建准备
1.准备52张纸牌
2.一张桌布
3.编辑工具为 Visual Code
技术概要
1.对象利用
2.数据利用
3.JS animation动画
4.全局变量
  1. function desen_x(){
  2. let that = this;
  3. var desen=["h_1","h_2","h_3","h_4","h_5","h_6","h_7","h_8",
  4. "h_9","h_10","h_11","h_12","h_13","p_1","p_2","p_3","p_4"
  5. ,"p_5","p_6","p_7","p_8","p_9","p_10","p_11","p_12","p_13"
  6. ,"t_1","t_2","t_3","t_4","t_5","t_6","t_7","t_8","t_9","t_10"
  7. ,"t_11","t_12","t_13","x_1","x_2","x_3","x_4","x_5","x_6","x_7"
  8. ,"x_8","x_9","x_10","x_11","x_12","x_13"];
  9. //将你的扑克前戳名全部存储到数组中
  10. var Obj = new Object(); //新建一个对象
  11. var array=[];//空数组一个
  12. for(var i=0;i<4;i++){//游戏演示里只需要发4张扑克,所以只要<4
  13.    var x=Math.round(Math.random()*52);//随机数取整*52
  14.    Obj[i]=x;//存入到全局变量中 否则每次只能存一个数值
  15. }
  16. console.log(Obj);//打印对象看看是不是4个对象
  17. window.array=[desen[Obj[0]],desen[Obj[1]],desen[Obj[2]],desen[Obj[3]]];
  18. //将存好的数组 带入扑克全局
  19. }
复制代码
  1. function send_poker(){ //该方法是发牌事件
  2. console.log(window.array);
  3. //测试你的全局变量是否正常
  4. //并且将传递的全局变量带入temp[]
  5. var temp=[window.array[0],window.array[1],window.array[2],window.array[3]];
  6. var ti=0;
  7. var iamges="../poker/"+temp+".png";//这是图片的默认路径 +你的 desen
  8. var creator=document.getElementById("d_back"); //取得操作的dom父元素
  9. var po_1=document.createElement("div");//虚拟生成div
  10. var num = 0;       //初始化变量
  11. //po_1.src="../h_1.png";
  12. //img_1.scr="../images/poker/h_1.png";
  13. for(var i=0;i<temp.length;i++){//循环temp
  14.   var that=this;
  15.   var img_1=document.createElement("img");
  16.   img_1.src+="./images/poker/"+temp[i]+".png";//对创建的img赋值可变的路径
  17.    console.log("等于0时");
  18.   var ten=10;
  19.   img_1.className="poker_float";//为其指定一个类,也就是默认的初始发牌位置
  20.   
  21.   
  22.   creator.appendChild(img_1);//生成对象
  23.    
  24.   
  25.   //"../images/poker/"+temp.i+".png";
  26.   
  27. }
  28.   move_poker();//该方法是自封装的动画
  29.   
  30. }
复制代码
动画变乱
  1. function move_poker(){ //移动扑克
  2. var node = document.getElementById("d_back").childNodes;//获取父元素下的所有子节点
  3. console.log(node);//打印出有多少
  4. var n5=node[9];//以要操作的 img对象类为 9开始操作
  5. var n6=node[10];
  6. var n7=node[11];
  7. var n8=node[12];
  8. var popo=anime({//animation动画可在最后查看
  9.   targets: n5, //操作的对象
  10.   translateX:-150, //移动到的横向位置
  11.   translateY: -250,//移动到的纵向位置
  12.   easing: 'easeInOutQuad',//缓动,不更改css机制
  13.   duration:100,//完成时间
  14.   });
  15.   var popo1= anime({
  16.   targets: n6,
  17.   translateX:-100,
  18.   translateY: -250,
  19.   easing: 'easeInOutQuad',
  20.   duration:200,
  21.   });
  22.   var popo2=anime({
  23.   targets: n7,
  24.   translateX:-50,
  25.   translateY: -250,
  26.   easing: 'easeInOutQuad',
  27.   duration:300,
  28.   });
  29.   var popo3= anime({
  30.   targets: n8,
  31.   translateX:0,
  32.   translateY: -250,
  33.   easing: 'easeInOutQuad',
  34.   duration:400,
  35.   });
  36. }
  37. function gui(){ //GUI 是将所有节点复位,方便下次发牌
  38. var node = document.getElementById("d_back").childNodes;
  39. var n5=node[9];
  40. var n6=node[10];
  41. var n7=node[11];
  42. var n8=node[12];
  43. var popo4=anime({
  44.   targets: [n5,n6,n7,n8],
  45.   translateX:0,
  46.   translateY: 0,
  47. })
  48. node.removeChild(popo4);
  49. }
复制代码
animation封装
  1. function setAnimationsProgress(insTime) { //该方法有多个dom时,则执行异或异步线程模式进行
  2. var i = 0;
  3. var animations = instance.animations;
  4. var animationsLength = animations.length;
  5. while (i < animationsLength) {
  6.   var anim = animations[i];
  7.   var animatable = anim.animatable;
  8.   var tweens = anim.tweens;
  9.   var tweenLength = tweens.length - 1;
  10.   var tween = tweens[tweenLength];
  11.   if (tweenLength) { tween = filterArray(tweens, function (t) { return (insTime < t.end); })[0] || tween; }
  12.   var elapsed = minMax(insTime - tween.start - tween.delay, 0, tween.duration) / tween.duration;
  13.   var eased = isNaN(elapsed) ? 1 : tween.easing(elapsed);
  14.   var strings = tween.to.strings;
  15.   var round = tween.round;
  16.   var numbers = [];
  17.   var toNumbersLength = tween.to.numbers.length;
  18.   var progress = (void 0);
  19.   for (var n = 0; n < toNumbersLength; n++) {
  20.   var value = (void 0);
  21.   var toNumber = tween.to.numbers[n];
  22.   var fromNumber = tween.from.numbers[n] || 0;
  23.   if (!tween.isPath) {
  24.    value = fromNumber + (eased * (toNumber - fromNumber));
  25.   } else {
  26.    value = getPathProgress(tween.value, eased * toNumber);
  27.   }
  28.   if (round) {
  29.    if (!(tween.isColor && n > 2)) {
  30.    value = Math.round(value * round) / round;
  31.    }
  32.   }
  33.   numbers.push(value);
  34.   }
  35.   var stringsLength = strings.length;
  36.   if (!stringsLength) {
  37.   progress = numbers[0];
  38.   } else {
  39.   progress = strings[0];
  40.   for (var s = 0; s < stringsLength; s++) {
  41.    var a = strings[s];
  42.    var b = strings[s + 1];
  43.    var n$1 = numbers[s];
  44.    if (!isNaN(n$1)) {
  45.    if (!b) {
  46.     progress += n$1 + ' ';
  47.    } else {
  48.     progress += n$1 + b;
  49.    }
  50.    }
  51.   }
  52.   }
  53.   setProgressValue[anim.type](animatable.target, anim.property, progress, animatable.transforms);
  54.   anim.currentValue = progress;
  55.   i++;
  56. }
  57. }
复制代码
以上就是本文的全部内容,希望对大家的学习有所资助,也希望大家多多支持草根技术分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作