Webのゲーム要素の再作成：米国のカードのスワイプ

多くの場合、Web開発者はビデオゲームのデザインからインスピレーションを引き出します。 Overwatchなどの人気タイトルのユーザーインターフェイスから、 PokémonGoなどのゲームの魅力的なメカニズムまで、ゲーム要素はWeb開発プロジェクトを強化するための豊富な可能性を提供します。このアプローチにより、ゲーム全体を構築するのではなく、特定のゲーム機能に取り組むことにより、集中的なスキル開発が可能になります。この焦点を絞ったアプローチは、多くの場合、開発者を新しいテクノロジーとテクニックにさらします。

この記事では、米国のカードスワイプメカニックを再現することを示しています。なじみのない人のために、私たちの間では、プレイヤーがタスクを完了している間に乗組員の間でインポスターを特定する必要があるマルチプレイヤーゲームがあります。カードのスワイプタスクは、そのシンプルさにもかかわらず、その困難のためにミームのステータスを達成しました。

インタラクティブなデモ

これは、米国のカードスワイプのレクリエーションです：（デモはここに埋め込まれます）

このデモを構築するために使用されるテクニックを探りましょう。

マウスおよびタッチイベント処理

コア機能には、カードをドラッグ可能にすることが含まれます。カードは、読者と垂直に整列したままでいる間、ポインターを水平に続きます。ドラッグは特定の範囲に制限されており、カードはリリース時に元の位置にリセットされます。

これは、マウスとタッチイベントハンドラーを使用して達成されます。 3つの機能 - mousedown 、 mousemove 、およびmouseup （またはそれらのタッチ相当）の場合、相互作用を管理します。これが簡略化されたJavaScriptコードスニペットです：

 const card = document.getElementById（ 'カード'）;
const reader = document.getElementById（ 'reader'）;
Active = falseを;
初期xとしましょう。

//イベントリスナー
document.addeventlistener（ 'mousedown'、dragstart）;
document.addeventlistener（ 'mousemove'、drag）;
document.addeventlistener（ 'mouseup'、dragend）;
document.addeventlistener（ 'touchstart'、dragstart）;
document.addeventlistener（ 'touchmove'、drag）;
document.addeventlistener（ 'touchend'、dragend）;

// ...（dragstart、drag、dragend、およびsettranslate functionsのように関数）...

performance.now()

スワイプ検証は速度と距離をチェックします。距離が不十分または速度が不十分な結果、無効なスワイプが発生します。

読者に対するカードの位置は、 dragEndでチェックされます。

ステータスとします。
// ...（カードがずっとスワイプされていないかどうかを確認）...

スワイプ期間は、 dragStartおよびdragEndのperformance.now()タイムスタンプを使用して測定されます。

 // ...（Performance.now（））を使用してドラッグスタートと終了時に撮影されたタイムスタンプ...

Reader要素のdata-status属性は、検証結果に基づいて更新されます。次に、CSSは適切なメッセージを表示し、緑または赤の光を照らします。

 / *ステータスメッセージとライトインジケーターのCSS */

ビジュアルとオーディオの強化

その他の改良には、レトロLCDルックにカスタムフォント（DSEG）を使用することが含まれ、CSSを使用してテキストに微妙なジッターアニメーションを追加します。

 / * Jitterアニメーション用CSS */

そして最後に、元のゲームのサウンドエフェクトを組み込む：

 // ...（有効/無効なスワイプのオーディオ再生）...

これにより、全体的なユーザーエクスペリエンスが向上します。

ゲームメカニックの複製

これは、USカードのスワイプレクリエーションの間で、ゲーム要素を複製することでWeb開発スキルを広げることができることを示しています。特定のゲームメカニックに焦点を当てることにより、開発者は管理可能な範囲内でさまざまなテクノロジーと設計の側面を探索できます。お気に入りのゲームメカニクスを再現してみてください。学んだことに驚くかもしれません。

以上がWebのゲーム要素の再作成：米国のカードのスワイプの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。