8/17/2019 Cara Membuat Game Android Menggunakan HTML5

http://slidepdf.com/reader/full/cara-membuat-game-android-menggunakan-html5 1/3

 

Lisensi Dokumen:

Copyright © 2008-2014 ilmuti.org 

Seluruh dokumen di ilmuti.org  dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial

(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap

dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org 

Cara Membuat Game Android Menggunakan

HTML5

Dendy Robbi Ariandanny 

Dendyrobbi07@gmail.com

Abstrak . 

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

Untuk menjelaskan seberapa mudahnya pembuatan game Android menggunakan HTML5, sayamembuat game Snake yang berbasis dari web game Snake. Saya mengubah dan menambahbeberapa kodingan dari game tersebut menggunakan Intel XDK agar game-nya dapat denganlancar dimainkan di Android.

 Kata Kunci: Android

PendahuluanMembuat game untuk Android di jaman sekarang ini sudah dapat menggunakan HTML5 tanpamenggunakan Java. Hal ini tentu menguntungkan bagi pengembang aplikasi yang lebih familiardengan bahasa HTML ketika ingin membuat game di Android

Pembahasan 

Persiapan

Sebelum lebih lanjut membahas pembuatan 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

8/17/2019 Cara Membuat Game Android Menggunakan HTML5

http://slidepdf.com/reader/full/cara-membuat-game-android-menggunakan-html5 2/3

 

Lisensi Dokumen:

Copyright © 2008-2014 ilmuti.org 

Seluruh dokumen di ilmuti.org  dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial

(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap

dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org 

PenjelasanDengan 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 ditujukanuntuk 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 diTheCodePlayer  .

Untuk melihat tool  pengembangan aplikasi Android lainnya dari Intel, bisa

mengujungi Intel Developer Zone for Android .

Tampilan game Snake 

8/17/2019 Cara Membuat Game Android Menggunakan HTML5

http://slidepdf.com/reader/full/cara-membuat-game-android-menggunakan-html5 3/3

 

Lisensi Dokumen:

Copyright © 2008-2014 ilmuti.org 

Seluruh dokumen di ilmuti.org  dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial

(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap

dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org 

Tags: Android, Aplikasi, Game, HTML5, Intel, Intel XDK, Javascript, Mobile 

PenutupDemikian tips dari saya semoga informasi ini dapat bermanfaat bagi pembaca

Referensi

http://teknojurnal.com/cara-membuat-game-android-menggunakan-html5/  

Biografi

Dendy Robbi AriandannyTasikmalaya, 15 juli 1992, sedang berkuliah di

STMIK RAHARJA mengambil jurusan Sistem informasi dengankonsentrasi Sistem informasi manajemen.