JS實現(xiàn)紙牌發(fā)牌動畫
更新時間:2021年01月19日 10:43:04 作者:計算機的皇帝
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)紙牌發(fā)牌動畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)紙牌發(fā)牌動畫的具體代碼,供大家參考,具體內(nèi)容如下
先看演示


游戲構(gòu)建準(zhǔn)備
1.準(zhǔn)備52張紙牌
2.一張桌布
3.編輯工具為 Visual Code
技術(shù)概要
1.對象操作
2.數(shù)據(jù)操作
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"];
//將你的撲克前戳名全部存儲到數(shù)組中
var Obj = new Object(); //新建一個對象
var array=[];//空數(shù)組一個
for(var i=0;i<4;i++){//游戲演示里只需要發(fā)4張撲克,所以只要<4
var x=Math.round(Math.random()*52);//隨機數(shù)取整*52
Obj[i]=x;//存入到全局變量中 否則每次只能存一個數(shù)值
}
console.log(Obj);//打印對象看看是不是4個對象
window.array=[desen[Obj[0]],desen[Obj[1]],desen[Obj[2]],desen[Obj[3]]];
//將存好的數(shù)組 帶入撲克全局
}
function send_poker(){ //該方法是發(fā)牌事件
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";//這是圖片的默認(rèn)路徑 +你的 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++){//循環(huán)temp
var that=this;
var img_1=document.createElement("img");
img_1.src+="./images/poker/"+temp[i]+".png";//對創(chuàng)建的img賦值可變的路徑
console.log("等于0時");
var ten=10;
img_1.className="poker_float";//為其指定一個類,也就是默認(rèn)的初始發(fā)牌位置
creator.appendChild(img_1);//生成對象
//"../images/poker/"+temp.i+".png";
}
move_poker();//該方法是自封裝的動畫
}
動畫事件
function move_poker(){ //移動撲克
var node = document.getElementById("d_back").childNodes;//獲取父元素下的所有子節(jié)點
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 是將所有節(jié)點復(fù)位,方便下次發(fā)牌
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時,則執(zhí)行異或異步線程模式進行
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++;
}
}
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
Bootstrap Multiselect 常用組件實現(xiàn)代碼
bootstrap-multiselect插件是一款基于bootstrap的下拉框美化插件,我們一般用來請求后臺返回具有l(wèi)abel和text對象的json數(shù)組即可渲染。接下來通過本文給大家分享Bootstrap Multiselect 常用組件實現(xiàn)代碼,感興趣的朋友一起看看吧2017-07-07
關(guān)于Object.entries()方法的使用和實現(xiàn)方式
這篇文章主要介紹了關(guān)于Object.entries()方法的使用和實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-02-02

