Cara Membuat Game Math Puzzle di MIT App Inventor

Konten [Tampil]

 Apakah Anda pernah memainkan game 2048 yang menantang? Bagaimana jika saya memberi tahu Anda bahwa Anda bisa membuatnya sendiri dengan mudah menggunakan MIT App Inventor? Game ini melibatkan logika dan strategi, dan dalam panduan ini, kita akan mengungkapkan langkah demi langkah cara membuatnya. Jadi, bersiaplah untuk menciptakan game puzzle yang menarik dan menghibur dengan MIT App Inventor. Ayo mulai!

Pertama Buka Terlebih Daluhu Situs Mit App Inventor

Langkah awal untuk membuat game puzzle math ialah dengan membuka situs Mit App Inventornya di https://ai2.appinventor.mit.edu/ daftar terlebih daluhu jika Anda belum mendaftar dengan cara mengklik tombol Create Apps! dan Anda akan diarahkan ke tampilan login google, pilih akun google yang Anda punya. Setelah berhasil login kemudian klik "New project" dan namakan aplikasimu

Saatnya Membuat Game Puzzle 2048

Langkah awal untuk membuat gamenya ialah Anda harus menggunakan layout VerticalArrangement dengan cara klik bagian Layout lalu klik dan scroll Vertical Arrangement ke bagian screen

Selanjutnya kita atur posisi VerticalArrangement berada ditengah pada layar dengan cara klik Screen1 pada bagian kanan.

Selanjutnya kita buat agar VerticalArrangementnya full ukuran dengan cara klik elemen VerticalArrangement1 lalu dibagian Height dan Width kamu buat menjadi Fill parent

Buat elemen VerticallArrangement lagi sehingga menjadi 2, caranya sama seperti yang diatas maka akan menjadi seperti ini:

Selanjutnya kita akan menggunakan background atau latar belakang untuk VerticalArrangement2 dengan cara dibagian sebelah kanan itu kan ada bacaan BackgroundColor lalu pilih warna background mana yang kamu suka

OH IYA JIKA KAMU MENGGUNAKAN HANDPHONE SAYA SARANIN BUAT MENGAKTIFKAN SITUS DESKTOP PADA BROWSER KAMU DENGAN CARA KLIK TITIK 3 LALU CARI SITUS DESKTOP DAN CENTANG ITU UNTUK BROWSER CHROME JIKA BROWSER LAIN KAMU BISA MENYESUAIKAN

Setelah mengatur BackgroundColor selanjutnya kita menambahkan elemen gambar dan label pada screen dengan cara klik User Interface > Klik dan seret image dan label ke screen

Jika sudah menambahkan image dan label pada screen VerticalArrengement2 maka tampilannya akan menjadi seperti ini (di sisi kanan bagian componentsnya).

Kalo sudah seperti yang diatas selanjutnya kita tambahkan elemen Button, Notifier, Clock, dan Extensi untuk game puzzle dengan cara kamu pergi kebagian User Interface dibagian sebelah kiri lalu klik dan seret elemen Button dan Notifier. Untuk menyeret Notifier bebas dimana saja kecuali bagian Button yang harus diseret dibagian screen, seperti gambar ini:

Samakan peletakan label agar tidak terjadi error, dan jika sudah benar label akan menjadi seperti gambar ini:

Kamu dapat seting sendiri button tersebut semenarik mungkin di bagian Appearance di sebelah kanan yaa atur background dan tulisan label sekreatif mungkin.

Setelah selesai menyeting kamu pergi kebagian sebelah kiri lalu klik bacaan sensor dan kamu akan melihat banyak sekali elemen, hiraukan saja elemen yang lain kita hanya membutuhkan elemen Clock, klik dan seret ke bagian Screen.

Menambahkan Ekstensi Game Puzzle

Selanjutnya kita akan menambahkan Ekstensi Puzzle, download terlebih dahulu file untuk Ekstensi Game Puzzle untuk Mit App Inventor dibawah ini:

Jika tidak tahu cara melewati link safelinku anda dapat mengklik link dibawah ini

- Cara Melewati Link Safelinku

Lalu kita akan mengimport file ekstensi puzzle yang telah kita download diatas ke Mit App Inventor dengan cara disebelah kiri klik Extention lalu klik import extention

Pilih Ekstensi Puzzle yang kamu download tadi, dan pastikan jenis filenya berjenis .aix. Jika sudah ketemu filenya langsung klik filenya dan klik open, jika berhasil akan ada ekstensi baru bernama PuzzleView dan jika kamu gagal mengimportnya cobalah mengulang kembali import. Setelah berhasil seret ekstensi PuzzleView1 ke screen (bebas mau di seret dimana saja asalkan di gambar HP).

Cara Menambahkan Kode

Oke kita sudah mencapai tahap menambahkan kode, sebentar lagi aplikasi kamu akan bisa dibuka akan tetapi memerlukan tambahan kode untuk supaya aplikasi berjalan normal, untuk menambahkan kode kamu buka bagian menu blocks sisi kanan atas.

Selanjutnya kita akan menambahkan kode When (Screen1) .Intialize dengan dibawahnya ada call PuzzleView1 dan untuk menambahkannya kamu liat disamping kiri ada menu Blocks lalu pilih kode Screen dan cari kode When .Intialize

kamu seret kode when itu ke screen viewer

 

Setelah kamu tau menambahkan kodenya lalu kamu cari menu ekstensi PuzzleView1 dengan cara dibagian Blocks cari bacaan PuzzleView1 (dan itu ekstensi btw) selanjutnya kamu samakan saja kodenya seperti gambar ini (capek nulis admin hehe):

Yang ijo-ijo itu dapet dari menu blocks VerticalArrangement1 (dibawahnya Screen1) dan pilih yang paling bawah, nah kalo yang biru itu kamu pergi ke bagian Math lalu pilih kode yang paling atas

Kodingan yang kedua kamu samakan dengan gambar berikut ini

Mungkin kamu bertanya elemen merah itu berasal dari mana jawabannya berasal dari Menu Text Blocks dan pilih yang paling atas.

kamu dapat mengetahui elemen itu berasal dari mana kamu hanya perlu melihat icon menu kebawah pada kode tersebut jadi PuzzleView itu berasal dari Menu Blocks dengan nama yang sesuai (semoga paham ya xixi)

Selanjutkan samakan kodingan dengan gambar berikut ini

Dan sedikit informasi kode false itu yang warna ijo tua saya dapatkan dari menu Logic kedua dari atas, samakan dengan yang digambar kalo misal ada Button1 itu berarti kodenya diambil dari menu Button1 juga.

Jika kode yang diatas sudah selanjutnya samain kode gambar berikut ini

Yang saya lingkarin itu untuk yang belum tau saja, yang itu saya dapatkan dari menu Control yang paling atas. Dan selesailah Cara Membuat Game Math Puzzle di Mit App Inventor

Dan untuk mengimportnya kamu bisa kunjungi artikel Cara Mengexport Aplikasi di MIT App Inventor

Jika kamu kesulitan tutorial versi teks, kamu bisa menonton habis video dibawah ini (jika kamu tidak paham bahasa inggris saya sarankan mengaktifkan terjemahan)

Demikianlah artikel Cara Membuat Game Math Puzzle di MIT App Inventor semoga artikel ini bermanfaat untuk semua orang dan jika kamu mempunyai kritik dan saran bisa komen saja di kolom komentar yang ada di blogger ini