Jelajahi Tutorial Game HTML5 Gratis – Untuk tutorial ini, Anda akan menggunakan React, npm, Node.js, Bootstrap, dan Reactstrap. Untuk menjaga semua lingkungan pengembangan statis, saya akan menyarankan semua orang untuk menggunakan editor teks yang sama seperti saya, Visual Studio Code, untuk tutorial ini. Jika Anda tidak terbiasa dengan React, saya sarankan Anda mencoba tutorial ini di sini … Baca lebih lanjut
Jelajahi Tutorial Game HTML5 Gratis
Buat Game Kartu di Canvas dengan React Components
wimi5 – Apa itu situs web tanpa sedikit kesenangan dan permainan sekarang dan nanti? Bahkan jika Anda belum pernah membuat game sebelumnya, atau tidak memiliki pengalaman dengan mesin game seperti Unity, tidak apa-apa! Sebagai gantinya, Anda dapat menyalurkan kekuatan React Components dan menerapkan pengetahuan pengembangan web Anda dengan menambahkan beberapa aspek menyenangkan ke situs web Anda Proyek tutorial ini akan berkisar pada penggunaan React, Canvas, dan create-react-app di React untuk membuat permainan kartu sederhana yang disebut War.
Baca Juga : 5 Tools Yang Paling Penting Untuk Developer Game HTML5
Direkomendasikan agar Anda memiliki beberapa pengalaman dasar pemula dengan Canvas dan React sebelum mempelajarinya. Seperti dalam catatan tambahan, saya akan menggunakan Visual Studio Code di seluruh proyek ini, dan Anda dapat menggunakannya sebagai referensi untuk kode dan gambar lainnya. di bawah. Kode sumber untuk proyek ini dapat ditemukan di sini ! Juga, pastikan untuk memeriksa kursus penyegaran ini tentang props dan state sebelum memulai!
Ikhtisar Pengaturan Game
Jika Anda belum pernah bermain War sebagai seorang anak, ini adalah permainan sederhana dengan tujuan sederhana: memenangkan semua kartu. Dek dibagi rata di antara para pemain, diberikan kepada mereka dengan kartu menghadap ke bawah. Setiap pemain akan mengungkapkan kartu teratas mereka secara bersamaan. Pemain yang memiliki kartu tertinggi mengambil kedua kartu dan memindahkannya ke bagian bawah tumpukan mereka.
Jika dua kartu dimainkan dengan nilai yang sama, maka kedua pemain akan terus bermain kartu sampai salah satu pemain memiliki kartu yang lebih tinggi dari yang lain. Kemudian pemenang itu mengambil semua kartu lagi dan menempatkannya di bagian bawah tumpukannya. Pemain yang tidak memiliki kartu tersisa kalah. Kami akan menggunakan satu komponen React besar dengan metode dan fungsi untuk membuatnya.
Tinjauan Singkat: Apa itu Kanvas?
Kanvas HTML adalah elemen HTML yang digunakan untuk menggambar grafik dan menganimasikannya. Ini dapat digunakan untuk apa saja mulai dari animasi kartun, desain video game, dan/atau animasi antarmuka pengguna grafis.
Ikhtisar Singkat: Apa itu create-react-app?
Create-react-app adalah alat yang akan memberi Anda ruang kerja reaksi prebuild. Ini membantu Anda memanfaatkan waktu Anda lebih efisien dengan memberi Anda landasan untuk bekerja. Anda mengimpor fondasi yang akan Anda kerjakan dengan satu perintah sederhana.
Menginstal Buat Aplikasi Bereaksi
Buka jendela terminal Anda. Anda dapat melakukan ini dengan mengklik Terminal di bagian atas dan kemudian Terminal Baru. Kemudian ketik:
npm install create-react-app
Ini akan menginstal alat create-react-app dan semua dependensinya. Setelah terinstal, Anda akan melanjutkan dan menjalankan perintah berikut untuk membuat proyek React baru dan beri nama proyek:
Game perang buat-reaksi-aplikasi
Dalam kode di atas, war-game akan menjadi nama proyek yang akan kita buat tetapi dapat diberi nama apa pun yang Anda suka, tetapi saya menamakannya war-game untuk proyek ini karena game ini didasarkan pada permainan kartu yang disebut War.
Mari kita bahas beberapa properti CSS yang digunakan di kelas di atas. Animasi properti sedang digunakan dengan kata kunci @keyframes untuk membuat aturan dan menentukan cara kerja animasi. Ini adalah properti yang sangat berguna untuk membantu Anda membuat animasi CSS. Properti peristiwa penunjuk mengontrol bagaimana HTML internal akan bereaksi terhadap kursor yang berinteraksi dengannya. Misalnya di properti di atas, itu didefinisikan sebagai tidak ada, yang berarti akan mencegah semua jenis klik dan opsi kursor yang terkait dengan kelas tertentu itu.
Kami melakukan ini karena kami tidak membutuhkan logo dan tidak akan menggunakannya dan kami akan mengimpor komponen baru yang akan kami buat, yang akan menampung game utama yang disebut WarGame. Sekarang mari kita restrukturisasi App fungsi dengan hanya memiliki dua wadah div. Satu dengan kelas App dan yang lainnya dengan kelas App-body yang baru saja kita buat. Di antara keduanya, kami akan menempatkan komponen WarGame kami.
