Mencipta semula elemen permainan untuk web: Antara Kad Swipe AS

Pemaju web sering menarik inspirasi dari reka bentuk permainan video. Dari antara muka pengguna tajuk popular seperti Overwatch ke mekanik permainan yang menarik seperti Pokémon Go , Elemen Permainan menawarkan kemungkinan yang kaya untuk meningkatkan projek pembangunan web. Pendekatan ini membolehkan pembangunan kemahiran yang difokuskan dengan menangani ciri -ciri permainan tertentu dan bukannya membina keseluruhan permainan. Pendekatan yang difokuskan ini sering mendedahkan pemaju kepada teknologi dan teknik baru.

Artikel ini menunjukkan mencipta semula mekanik swipe kad AS. Bagi mereka yang tidak dikenali, di antara kami adalah permainan multiplayer di mana pemain mesti mengenal pasti penipu di kalangan krew semasa menyelesaikan tugas. Tugas sapu kad, walaupun kesederhanaannya, telah mencapai status memetes kerana kesukarannya.

Demo interaktif

Berikut adalah rekreasi antara swipe kad AS: (demo akan tertanam di sini)

Mari kita meneroka teknik yang digunakan untuk membina demo ini.

Pengendalian acara tetikus dan sentuh

Fungsi teras melibatkan membuat kad draggable. Kad itu mengikuti penunjuk secara mendatar sementara selebihnya secara menegak sejajar dengan pembaca. Menyeret adalah terhad kepada julat tertentu, dan kad semula ke kedudukan asalnya apabila dibebaskan.

Ini dicapai menggunakan pengendali acara Mouse dan Touch. Tiga fungsi - untuk mousedown , mousemove , dan mouseup (atau persamaan sentuhan mereka) - menguruskan interaksi. Inilah coretan kod JavaScript yang dipermudahkan:

 const card = document.getElementById ('card');
const reader = document.getElementById ('pembaca');
biarkan aktif = palsu;
biarkan initialx;

// pendengar acara
document.addeventListener ('mousedown', dragstart);
document.addeventListener ('mousemove', seret);
document.addeventListener ('MouseUp', Dragend);
document.addeventListener ('TouchStart', DragStart);
document.addeventListener ('TouchMove', seret);
document.addeventListener ('Touchend', Dragend);

// ... (Dragstart, Drag, Dragend, dan Settranslate berfungsi seperti yang asal) ...

Mengesahkan swipes dengan performance.now()

Swipe Validation memeriksa kelajuan dan jarak. Jarak yang tidak mencukupi atau kelajuan yang tidak betul menghasilkan sapu yang tidak sah.

Kedudukan kad relatif kepada pembaca diperiksa dalam dragEnd :

 biarkan status;
// ... (periksa sama ada kad tidak digerakkan) ...

Tempoh sapu diukur menggunakan performance.now() cap waktu dalam dragStart dan dragEnd .

 // ... (timestamps diambil pada permulaan seret dan akhir menggunakan prestasi.now ()) ...

Atribut data-status elemen pembaca dikemas kini berdasarkan hasil pengesahan. CSS kemudian memaparkan mesej yang sesuai dan menerangi lampu hijau atau merah.

 / * Css untuk mesej status dan petunjuk cahaya */

Meningkatkan visual dan audio

Penambahbaikan selanjutnya termasuk menggunakan Font Custom (DSEG) untuk rupa LCD retro, menambah animasi jitter halus ke teks menggunakan CSS:

 / * Css untuk animasi jitter */

Dan akhirnya, menggabungkan kesan bunyi permainan asal:

 // ... (main balik audio untuk swipes yang sah/tidak sah) ...

Ini meningkatkan pengalaman pengguna keseluruhan.

Replikasi Mekanik Permainan

Ini di kalangan rekreasi swipe kad AS menunjukkan bagaimana elemen permainan mereplikasi dapat meluaskan kemahiran pembangunan web. Dengan memberi tumpuan kepada mekanik permainan tertentu, pemaju boleh meneroka pelbagai teknologi dan aspek reka bentuk dalam skop yang boleh diurus. Cuba mereplikasi mekanik permainan kegemaran anda - anda mungkin terkejut dengan apa yang anda pelajari!

Atas ialah kandungan terperinci Mencipta semula elemen permainan untuk web: Antara Kad Swipe AS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!