上海做网站要多少钱,东莞市新冠最新消息,网页设计师联盟网站,万户网络技术先看演示 游戏构建准备
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 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 i0;i4;i){//游戏演示里只需要发4张扑克所以只要4 var xMath.round(Math.random()*52);//随机数取整*52Obj[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 ti0;var iamges../poker/temp.png;//这是图片的默认路径 你的 desenvar creatordocument.getElementById(d_back); //取得操作的dom父元素var po_1document.createElement(div);//虚拟生成divvar num 0; //初始化变量//po_1.src../h_1.png;//img_1.scr../images/poker/h_1.png;for(var i0;itemp.length;i){//循环tempvar thatthis;var img_1document.createElement(img);img_1.src./images/poker/temp[i].png;//对创建的img赋值可变的路径console.log(等于0时);var ten10;img_1.classNamepoker_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 n5node[9];//以要操作的 img对象类为 9开始操作var n6node[10];var n7node[11];var n8node[12];var popoanime({//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 popo2anime({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 n5node[9];var n6node[10];var n7node[11];var n8node[12];var popo4anime({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;}}
