Langkah Praktis Membuat Game Snake Retro Pada MIT App Inventor

 

Selama puluhan tahun game ular-ularan menjadi sebuah game yang iconic, sebab game tersebut telah ada di internet dan yang pertama kali muncul sekitar tahun 1997, akan tetapi mulai booming di Indonesia pada awal tahun 2000-an, game ini mulai dikenal luas, terutama oleh anak-anak yang lahir di dekade 90-an hingga awal 2000-an, menjadikannya bagian dari kenangan masa kecil mereka..

Game tersebut telah menjadi sebuah game yang mempunyai nilai nostalgia yang tinggi, dulu jika mau main handphone pas tak ada internet saya biasanya main game uler uleran, mungkin sobat sobat disini juga pernah memainkannya, sekarang saya akan membagikan cara buatnya, ohya sebelumnya saya dapat referensi dari orang luar negeri ya... Anda dapat mengunjungi profile beliau disini: https://community.appinventor.mit.edu/t/snake-game-customizable/123211.

Panduan ini dibuat dengan gaya penulisan yang sederhana dan jelas, sehingga pembaca dari berbagai latar belakang dapat dengan mudah mengikuti dan memahami setiap langkah yang dijelaskan. Dan semoga tutorial ini mampu dipahami untuk semua kalangan yang hendak belajar bersungguh-sungguh.

Berikut adalah contoh tampilan aplikasi game yang akan kita buat dalam tutorial ini

Sebelum memulai, pastikan Anda sudah mengunduh ekstensi dan gambar yang diperlukan untuk pembuatan game ini:

 

  

Jika anda membutuhkan file .AIA untuk projek ini, anda dapat mengunduhnya disini:

Membuat Desain Layout

Buka MIT App Inventor, kemudian jika anda belum login akun anda bisa login terlebih dahulu, kemudian klik icon New Project pada pojok kiri atas, kemudian anda bisa menamainya "Snake" atau "Uler" atau apalah...

Maka akan otomatis akan masuk kedalam layout screen yang sudah beri nama tadi, selanjutnya silahkan klik layout pada pallete, kemudian pilih yang horizontalarrangement, atur height & widhtnya ubah jadi {H=50pixels,W=90percent}, lalu klik screen1, ubah alignhorizontal & alignvertical menjadi 3 & 1, ini akan membuat si horizontalarrangement1 menjadi diposisi atas.

Kemudian klik dan seret 3 button dan 1 label ke dalam horizontalarrangement1, lalu klik dan seret lagi horizontalarrangement 2 KALI ke dalam horizontalarrangement1, kemudian letakkan button 2 dan button 3 pada horizontalarrangement2, kemudian yang horizontal arrangement3 sebagai pembatas label, jadi diletakkan disisi horizontalarrament2, dan jika tidak muat maka kosongkan dulu nama dari buttonnya (atau bisa diisi 0), agar dapat dilihat.

Next, klik dan seret lagi horizontalarrangement dibawah horizontalarrangement1, klik label1, isikan namanya "Score: " (gunakan spasi diakhirnya), klik button3 lalu scroll kebawah hingga menemukan "Visible" uncentang itu sehingga button3 tidak terlihat, anda juga dapat menambahkan background screen pada backgroundcolor.

Kemudian jika kamu ingin memperbagus tampilan button1 & button2 anda bisa mengupload sebuah icon gambar untuk dipakai oleh button. Ini sebetulnya hanya opsional, anda bisa skip ini, dan lihat saja tampilan layout fullnya pada akhir ini.

Anda bisa mendownload gambar yang saya sudah sediakan pada link dekat tempat download ekstensi.

Kita akan mengkesport extensi untuk game snakenya, pertama silahkan anda klik extension pada pallete, Kemudian klik import extension, lalu silahkan pilih file extension yang telah anda download sebelumnya pada atas artikel ini ya...

Mengimplementasikan Layout (Coding)

Langkah kedua ini kita akan mengimplementasikan layout yang sudah kita desain sebelumnya, kita akan memberikan sebuah perintah ketika user mengklik ini maka akan terjadi ini, dan sebagainya, kita akan atur dalam kodingan blocks, pertama silahkan klik block pada pojok kanan atas.

Kemudian silahkan screen1 pada Blocks, lalu klik dan seret codingan When Screen1 .Initialize, Lalu klik extensi yang sudah anda import ke screen, lalu pilih yang JoeDevSnakeGame1 .IntializeGame, Kemudian pada Arrangement, pilih horizontalarrangement 4, kemudian speednya anda boleh kasih nilai 70, kemudian squareSizenya kasih 50, kemudian cornerRadius kasih 10, dan kasih backgroundColor dark gray.

Kemudian tambahkan JoeDevSnakeGame1 .SetHeadColor (warna kepala uler), .SetBodyColor (warna badan uler), .SetFoodColor (warna makanan uler), dan .SetGameOverTextColor (warna text game over), lalu atur warnanya sesuai keinginan, lalu klik dan seret juga .SetSeparation (pemisahan), anda atur separationnya menjadi 15.

Lalu klik button1, klik dan seret kode when button1 .click, lalu klik ekstensi joedevsnakegame1 .StartGame, klik lagi button2 lalu klik dan seret kode when button2 .click kliser ekstensi calljoedevsnakegame1 .PauseGame, ini akan membuat button 1 ketika diklik akan melanjutkan permainan, sedangkan jika button 2 diklik maka akan berhenti/pause gamenya. klik button 3 when .click, atur jadi set difficulty dengan text isikan hard.

Kemudian klik lagi extensionnya lalu cari When joedevsnake .ScoreChanged, klik dan seret itu ke viewer, lalu klik label, dan pilih label .text, pilih text join, lalu atasnya isi dengan text biasa, dan yang bawah isi dengan variabel score, (arahkan mouse ke variabel extensi skor, untuk mendapatkan variabel score).

Untuk kodingan fullnya silahkan anda cek dilink berikut ini, sebab web blog ini tak mampu membendung foto-foto dengan jumlah banyak, demi fast load, maka gambar saya alihkan ke halaman berikut:  agar anda semua bisa mengunjungi web blog ini dengan lancar jaya dan tanpa lagging.

Kesimpulan

Kita bisa dengan mudah membuat sebuah aplikasi atau game jika ada motif, entah itu tugas, kegabutan, atau hanya iseng belaka, bisa saja, tapi percayalah sesuatu yang dipaksakan tidak baik bagi anda, jadi, jangan merasa terpaksa jika anda membuat suatu projek aplikasi atau game, jika projek ini dilakukan dengan terpaksa akan lebih sulit sebab tidak dilakukan dengan hati :). Tetap semangat, terima kasih sudah mengunjungi blog ini dan semoga artikel ini bisa bermanfaat bagi banyak orang...