JSはカード配布アニメーションを実現します

JSはカード配布アニメーションを実現します

この記事の例では、カード配布アニメーションを実装するためのJSの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

まずはデモをご覧ください

ゲームビルドの準備

1. 52枚のカードを用意する
2. テーブルクロス
3. 編集ツールはVisual Codeです

技術概要

1. オブジェクト操作
2. データ操作
3.JSアニメーション
4. グローバル変数

関数 desen_x(){
 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; //グローバル変数に格納します。そうでない場合は、一度に格納できる値は 1 つだけです}
 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=[ウィンドウ配列[0],ウィンドウ配列[1],ウィンドウ配列[2],ウィンドウ配列[3]];
 var ti = 0;
 var iamges="../poker/"+temp+".png"; //これは画像のデフォルトパス+あなたのデザインです
 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 _this_ は、次のようになります。
  var img_1 = document.createElement("img");
  img_1.src+="./images/poker/"+temp[i]+".png"; //作成されたimgに変数パスを割り当てます console.log("when it is equal to 0");
  var 10 = 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 =ノード[11];
 var n8 =ノード[12];
 var popo = anime({//アニメーションは最後に表示されます。targets: n5, //操作対象オブジェクト translateX:-150, //移動する水平位置 translateY: -250, //移動する垂直位置 easing: 'easeInOutQuad', //イージング、CSSメカニズムに変更はありません。duration:100, //完了時間 });
  var popo1 = アニメ({
  ターゲット: n6、
  翻訳X:-100,
  翻訳Y: -250,
  イージング: 'easeInOutQuad',
  期間:200,
  });
  var popo2 = アニメ({
  ターゲット: n7、
  翻訳X:-50,
  翻訳Y: -250,
  イージング: 'easeInOutQuad',
  期間:300,
  });
  var popo3 = アニメ({
  ターゲット: n8、
  翻訳X:0,
  翻訳Y: -250,
  イージング: 'easeInOutQuad',
  期間:400,
  });
}
function gui(){ //GUI は、次のカード配布を容易にするためにすべてのノードをリセットします。var node = document.getElementById("d_back").childNodes;
 var n5 =ノード[9];
 var n6 =ノード[10];
 var n7 =ノード[11];
 var n8 =ノード[12];
 var popo4 = アニメ({
  ターゲット: [n5,n6,n7,n8],
  翻訳X:0,
  翻訳Y: 0,
 })
 popo4 の子ノードを削除します。
}

アニメーションパッケージ

function setAnimationsProgress(insTime) { //このメソッドに複数のDOMがある場合は、XOR非同期スレッドモードを実行します。var i = 0;
 var アニメーション = instance.animations;
 var アニメーションの長さ = アニメーションの長さ; 
 (i < アニメーションの長さ) { 
  var anim = アニメーション[i];
  var アニメーション = 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 easier = isNaN(elapsed) ? 1 : tween.easing(elapsed);
  var 文字列 = tween.to.strings;
  var round = tween.round;
  var 数値 = [];
  var toNumbersLength = tween.to.numbers.length;
  var 進行状況 = (void 0);
  (var n = 0; n < toNumbersLength; n++) の場合 {
  var 値 = (void 0);
  var toNumber = tween.to.numbers[n];
  var fromNumber = tween.from.numbers[n] || 0;
  場合 (!tween.isPath) {
   値 = fromNumber + (eased * (toNumber - fromNumber));
  } それ以外 {
   値 = getPathProgress(tween.value, easier * toNumber);
  }
  if (丸め) {
   tween.isColor が n > 2 の場合
   値 = Math.round(値 * round) / round;
   }
  }
  numbers.push(値);
  }
  var 文字列の長さ = 文字列.長さ;
  if (!文字列の長さ) {
  進捗状況 = 数値[0];
  } それ以外 {
  進捗状況 = 文字列[0];
  (var s = 0; s < 文字列の長さ; s++) {
   var a = 文字列[s];
   var b = 文字列[s + 1];
   var n$1 = 数値[s];
   (!isNaN(n$1))の場合{
   もし(!b){
    進捗 += n$1 + ' ';
   } それ以外 {
    進捗 += n$1 + b;
   }
   }
  }
  }
  アニメーションの進行状況を設定します。
  anim.currentValue = 進行状況;
  私は++;
 }
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • js+ca​​nvasでカードゲームを実現

<<:  効率的なMySQLページングの詳細な説明

>>:  Linux コンパイル最適化で習得しなければならないいくつかの姿勢のまとめ

推薦する

Ubuntu 18.04 Server バージョンのインストールと使用方法 (画像とテキスト)

1 システムのインストール手順OSバージョン:1804イメージのダウンロード: http://cd...

cocoscreatorプレハブの詳しい説明

目次プレハブプレハブの作り方プレハブの役割1. 同じタイプのノードをバッチで作成する2. 特定の時間...

異なるドメイン名への PC または携帯電話のアクセスを区別するように Nginx を構成する方法

新しい公式サイトはオンラインですが、携帯電話で新しい公式サイトにアクセスすると、エクスペリエンスが非...

面接でよく聞かれる Vue 修飾子 13 個

目次1. 怠惰な2.トリム3.番号4.停止5. キャプチャ6.自分7.一度8.予防する9.ネイティブ...

IMG での UserMap の使用例

usemap は <img> タグの属性であり、使用するイメージ マップの名前を指定する...

JavaScript 組み込みの日付と時刻の書式設定のサンプル コード

1. 基礎知識(日付オブジェクトのメソッド) 😜 getFullYear() は年を表す4桁の数字を...

HTML サブタグと sup タグ

今日はあまり使わないHTMLタグ「subタグ」と「supタグ」を紹介します。定義と使用法: <...

React でインデックスをキーとして使用することが推奨されないのはなぜですか?

1. 古い仮想DOMと新しい仮想DOMを比較し、まずキーが同じかどうかを確認します。 2. 引き続...

URL を入力すると、バックグラウンドでは具体的に何が起こるのでしょうか?

ソフトウェア開発者は、ネットワーク アプリケーションがどのように動作するかを階層的に完全に理解してい...

Ubuntu 20.04は静的IPアドレスを設定します(異なるバージョンを含む)

Ubuntu 20.04はnetplanを通じてネットワークを管理するため、以前のバージョンとは少...

WeChatアプレットで計算機機能を実装する

この記事は、WeChat アプレットを使用して作成された簡単な計算機です。興味のある方はご覧ください...

Baidu デッドリンクファイルを作成する方法

Baidu によって定義されているデッドリンク形式には 2 種類あります。 1: XML形式のデッド...

WeChatアプレットキャンバスが署名機能を実装

WeChatアプレットプロジェクトでは、開発モジュールに手書き署名機能が含まれ、WeChatアプレッ...

uniapp は日付と時刻の選択機能を実装します

この記事の例では、日付と時刻の選択を実装するための uniapp の具体的なコードを参考までに共有し...

ElementUI コンポーネント el-dropdown (落とし穴)

選択して変更: クリックすると現在の値が表示され、ページ UI が表示され、CSS スタイルが変更さ...