Categories: Intel Developer Zone

Cara Membuat Game Android Menggunakan HTML5

Membuat game Android di jaman sekarang ini sudah dapat menggunakan HTML5 tanpa menggunakan Java. Hal ini tentu menguntungkan bagi pengembang aplikasi yang lebih familiar dengan bahasa HTML ketika ingin membuat game di Android.

Untuk membuat game di Android menggunakan HTML5, salah satu caranya adalah dengan menggunakan Intel XDK. Jika sebelumnya sudah pernah membuat web game menggunakan HTML5, hanya perlu mengubah beberapa bagian kodingan agar game-nya dapat dijalankan dengan lancar di Android.

Untuk menjelaskan seberapa mudahnya membuat game Android menggunakan HTML5, saya membuat game Snake yang berbasis dari web game Snake di TheCodePlayer. Saya mengubah dan menambah beberapa kodingan dari game tersebut menggunakan Intel XDK agar game-nya dapat dengan lancar dimainkan di Android.

Persiapan Membuat Game Android

Sebelum lebih lanjut membahas membuat game Android menggunakan HTML5, lakukan langkah-langkah berikut ini terlebih dahulu:

Unduh dan instal Intel XDK
Jika belum mengenal tentang Intel XDK atau masih baru di dunia HTML5, bisa membaca dua artikel ini terlebih dahulu: Artikel 1, Artikel 2.
Unduh source code untuk game Snake-nya di link ini
Impor proyek Snake dari source code yang diunduh sebelumnya ke Intel XDK

Penjelasan

Dengan menggunakan Intel XDK, kita dapat menggunakan kodingan HTML5 yang sudah ada (walaupun didesain untuk web) ataupun mengkoding dari awal. Di artikel ini, kasusnya adalah menggunakan kodingan HTML5 yang sudah ada untuk kemudian diperbaharui agar dapat dimainkan di perangkat berbasis Android.

Beberapa poin-poin penting yang harus diperhatikan di source code dari game ini adalah sebagai berikut:

Canvas
Canvas adalah bagian terpenting di game ini karena menjadi wadah di mana kita menggambar grafis-grafis untuk menganimasikan game Snake.

Event onTouchStart
Event onTouchStart digunakan untuk mendeteksi ketika sebuah komponen HTML5 disentuh oleh seseorang di perangkatnya.

jQuery Mobile
jQuery Mobile digunakan untuk mempercantik tampilan aplikasi dan agar komponen HTML5-nya lebih optimal untuk interaksi melalui sentuhan pengguna di layar sentuh perangkat mereka.

JavaScript
JavaScript digunakan untuk mayoritas penulisan logika di game Snake ini agar game-nya dapat berfungsi seperti yang ditujukan.

Fungsi onDeviceReady
Fungsi ini berfungsi sebagai tempat di mana programmer mulai memasukkan logika pemrogramannya.

Untuk penjelasan detail kodingan dari logika pemrograman untuk membuat game Snake sudah ada di baris-baris komentar di kodingan dalam source code. Logikanya tidak terlalu kompleks dan mudah dipahami apalagi jika sudah memiliki dasar matematika yang bagus.

Walaupun pada artikel ini pengembangan game-nya ditujukan untuk platform Android, dengan Intel XDK kita juga sebetulnya dapat langsung membuat aplikasinya ditujukan untuk platform lainnya seperti iOS dan Windows Phone tanpa harus mengubah kodingan.

Game Snake di artikel ini masih dasar dan bisa dikembangkan lebih lanjut. Jika ingin membuat game lainnya menggunakan HTML5, bisa melihat contoh-contoh game di situs Intel atau di TheCodePlayer.

Untuk melihat tool pengembangan aplikasi Android lainnya dari Intel, bisa mengujungi Intel Developer Zone for Android.

Tampilan game Snake

* Artikel ini dipersembahkan oleh Intel Developer Zone. Untuk Mengetahui lebih lanjut tentang membuat aplikasi Android di Arstitektur Intel, kunjungi Intel Developer Zone for Android.