この記事の例では、カード配布アニメーションを実装するためのJSの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 まずはデモをご覧ください ゲームビルドの準備 1. 52枚のカードを用意する 技術概要 1. オブジェクト操作 関数 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Linux コンパイル最適化で習得しなければならないいくつかの姿勢のまとめ
序文CSS がフロントエンド開発の基本的なスキルであるならば、「セレクター」は基礎中の基礎です。これ...
目次ステップ1: フレームワークを構築するステップ2 構築されたPromiseフレームワークに入力す...
この記事は、100 回書かれ、質問された CSS の質問を記念するためのものです。聞く: CSS セ...
1. 背景Netplan は、Ubuntu システムのネットワーク設定を簡単に管理および構成できるよ...
問題の原因: 最初は CentOS 8 のデフォルトの yum ソースを正常に使用できますが、次のコ...
目次1. はじめに2. インストール3. 使用4. vueファイルの使用1. はじめに最近、手書き入...
これは実際には IE の公式ドキュメントではありません。他の人が実践を通じて開発した IE6 のデフ...
目次序文1. データを抽出する2. エイリアス値3. 動的プロパティ4. オブジェクトの分解における...
目次1. 観察可能2. 高階関数3. エクスプレスボックスモデル3.1. エクスプレスボックスモデル...
前回の記事では、MySQL 最適化の概要 - クエリの合計数を紹介しました。この記事では、クエリ ス...
目次環境設定の概要1.K8Sとは何ですか? 2. K8S を使用する理由3. K8S を使用する利点...
この記事では、簡単なパズルゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な...
目次トリガーとは何かトリガーを作成する複数の実行ステートメントを持つトリガーの作成制限と考慮事項要約...
まず、画像を見てみましょう。今日はこのエフェクトを作成します。 実は、何でもないんです。Web ペー...
知識ポイント1: ヘッダー情報にWebページのベースURLを設定するベース URL の本質は、ハイパ...