Cara menggunakan what are html5 games

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.

Cara menggunakan what are html5 games
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.

Kategori Buku

  • BUKU ANDROID  (5)
    • Proyek Aplikasi ANDROID dengan Visual Studio Xamarin dan Codeigniter
    • Membuat Game Edukasi dengan HTML5 dan Android Studio
    • Trik Kolaborasi ANDROID dengan PHP dan MySQL
    • Sistem Monitoring Pelanggaran Siswa Berbasis Web dan Android
    • Kolaborasi Dahsyat ANDROID dengan PHP dan MySQL
  • BUKU ANGULAR  (3)
    • Menguasai AngularJS untuk Membuat Website Dinamis
    • Bikin Aplikasi ANDROID dengan Angular Mobile dan MongoDB
    • Sistem Aplikasi Travel dengan AngularJS dan Codeigniter
  • BUKU BOOTSTRAP  (2)
    • Proyek Membangun Responsive Web Design dengan Bootstrap 3 dan 4
    • Responsive Web Design dengan PHP dan Bootstrap
  • BUKU CAKEPHP  (2)
    • Proyek Membuat Web Profesional dengan CakePHP
    • Teknik Cepat Membangun Web dengan Framework CakePHP
  • BUKU CODEIGNITER  (11)
    • Menguasai Codeigniter 4 Kasus Membuat Aplikasi PMB Kampus
    • Aplikasi Ujian Seleksi Penerimaan Pegawai dgn Codeigniter & Ajax
    • Trik SEO dan SECURITY Codeigniter
    • Membangun Aplikasi SMS Gateway Berbasis Web Codeigniter Bootstrap
    • Menguasai Codeigniter: Kasus Membangun Aplikasi Perpustakaan
    • Kolaborasi Codeigniter dan Bootstrap: Membuat Aplikasi PSB Sekolah
    • Proyek Membangun Website Berbasis PHP dengan Codeigniter
    • Membangun SMS Gateway Berbasis Web dengan Codeigniter
    • Trik Kolaborasi Codeigniter dan jQuery
    • 9 Langkah Menjadi Master Framework Codeigniter
    • Membangun Web Berbasis PHP dengan Framework Codeigniter
  • BUKU CSS  (5)
    • Trik Menguasai HTML5, CSS3, PHP Aplikatif
    • Teknik Cepat Menguasai CSS 3
    • Trik Membuat Web Template dengan PHP dan CSS
    • Panduan Lengkap Menguasai Pemrograman CSS
    • Membuat Katalog Online dengan PHP dan CSS
  • BUKU JAVASCRIPT  (3)
    • Membuat Aplikasi Mobile Native dengan JAVASCRIPT By NATIVESCRIPT
    • Panduan Praktis Menguasai Vue.js
    • Dahsyatkan Aplikasi PHP dengan Sentuhan Javascript
  • BUKU JOOMLA  (3)
    • Membuat Web untuk Smartphone dengan Joomla Mobile
    • Proyek Membuat Website Jejaring Sosial dengan Joomla
    • Proyek Membuat Website Sekolah dengan Joomla
  • BUKU JQUERY  (6)
    • Trik Menguasai PHP + jQuery Berbasis Linux dan Windows
    • Proyek Website Super Wow dengan PHP dan jQuery
    • Membuat Sendiri Website Pertemanan dengan PHP dan jQuery
    • Sistem Inventory Mini Market dengan PHP dan jQuery
    • Trik Dahsyat Menguasai Ajax dengan jQuery
    • Bikin Website Super Keren dengan PHP dan jQuery
  • BUKU LARAVEL  (8)
    • Bikin Website Video Ala Youtube dengan Laravel Livewire
    • Konsep dan Implementasi Pemrograman LARAVEL 7 Edisi Best Practice
    • Konsep dan Implementasi Pemrograman Laravel 5 Edisi 2019
    • Analisa dan Perancangan Sistem Informasi dengan Codeigniter dan Laravel
    • CODEIGNITER VS LARAVEL, Kasus membuat Website Pencari Kerja
    • Sistem Informasi Akademik Kampus Berbasis Web dengan LARAVEL 5
    • Konsep dan Implementasi Pemrograman LARAVEL 5
    • Cara Efektif Belajar Framework Laravel
  • BUKU PHP  (18)
    • WEB SERVICE Pembayaran Uang Kuliah Online dengan PHP dan SOAP WSDL
    • Konsep dan Teknik Menguasai Modern OOP di PHP
    • Membuat Aplikasi Computer Based Test dgn PHP, MySQLi &Boostrap
    • Membuat Aplikasi GPS Ala GO-JEK
    • Bikin Framework PHP Sendiri dengan Teknik OOP dan MVC
    • Program Absensi Siswa Realtime dengan PHP dan SMS Gateway
    • Membuat Helpdesk System Berbasis OOP dan PDO dengan PHP
    • Rahasia Inti Master PHP dan MySQLi (improved)
    • Proyek Membuat Radio Streaming dan TV Online dengan PHP
    • Trik Mudah Menguasai OOP dengan PHP
    • Penerimaan Siswa Baru Sekolah Online dengan PHP
    • Membuat Aplikasi GPS dan Suara Antrian dengan PHP
    • Proyek Membuat Web Multimedia dengan PHP
    • Sistem Informasi Akademik Kampus Berbasis Web dengan PHP
    • 67 Trik dan Ide Brilian Master PHP
    • Trik Rahasia Master PHP Terbongkar Lagi
    • Jalan Pintas Menjadi Master PHP
    • Membongkar Trik Rahasia Para Master PHP
  • BUKU REACT  (3)
    • Trik Kolaborasi REACT dengan PHP dan MySQL
    • 5 Langkah Mudah Menguasai React Native
    • Jalan Pintas Menjadi Master ReactJS
  • BUKU WEB  (12)
    • Membuat PPDB Sekolah dan Computer Based Test dengan PHP + MySQLi
    • Membuat Aplikasi IoT: Internet of Things
    • Konsep dan Implementasi Pemrograman Python, Kasus Big Data
    • Membangun Aplikasi Mobile dengan PWA (Progressive Web App)
    • Cara Benar dan Teruji Belajar Google AdSense
    • Mengenal Web Security (Kasus Eksploitasi Web dengan AJAX)
    • Membuat Web Profil Sekolah + PPDB Online
    • Super Web Programming 10 Bahasa 10 Proyek Web
    • Panduan Sistem Informasi Akademik Sekolah Berbasis Web
    • Sistem Penerimaan Mahasiswa Baru Berbasis Web dan Mobile
    • Membuat Toko Online Berbasis Ajax dengan Prestashop
    • Trik dan Solusi Jitu Pemrograman Web
  • BUKU YII  (2)
    • Proyek Membangun Website dengan Yii Framework
    • Yii Framework: Menguasai Framework PHP Terbaik
  • CD VIDEO TUTORIAL  (6)
    • Membangun Web Aplikasi dengan PHP, MySQLi, dan Bootstrap
    • Membangun Layanan SMS Online Berbasis Client Server
    • Analysis dan Development Website E-Commerce
    • Panduan Sakti Menguasai Laravel 5
    • Seminggu Jago Codeigniter dan Bootstrap
    • Teknik AJAX jQuery dalam Pengolahan Data
  • Penulis Buku

  • ADI CHANDRA SETIAWAN  (1)
    • Dahsyatkan Aplikasi PHP dengan Sentuhan Javascript
  • AGUNG JULISMAN  (2)
    • Bikin Aplikasi ANDROID dengan Angular Mobile dan MongoDB
    • Sistem Aplikasi Travel dengan AngularJS dan Codeigniter
  • AGUS HARIYANTO  (3)
    • Membuat PPDB Sekolah dan Computer Based Test dengan PHP + MySQLi
    • Membuat Aplikasi Computer Based Test dgn PHP, MySQLi &Boostrap
    • Membuat Web Profil Sekolah + PPDB Online
  • AGUS SAPUTRA  (3)
    • Proyek Membuat Web Profesional dengan CakePHP
    • Trik Kolaborasi Codeigniter dan jQuery
    • Teknik Cepat Membangun Web dengan Framework CakePHP
  • AKHMAD DHARMA KASMAN  (4)
    • Trik Kolaborasi ANDROID dengan PHP dan MySQL
    • Kolaborasi Dahsyat ANDROID dengan PHP dan MySQL
    • Trik Mudah Menguasai OOP dengan PHP
    • Membuat Sendiri Website Pertemanan dengan PHP dan jQuery
  • AMINUDIN  (2)
    • Cara Efektif Belajar Framework Laravel
    • Program Absensi Siswa Realtime dengan PHP dan SMS Gateway
  • ANHAR  (2)
    • Trik SEO dan SECURITY Codeigniter
    • Cara Benar dan Teruji Belajar Google AdSense
  • ANSARI SALEH AHMAR  (1)
    • Panduan Sistem Informasi Akademik Sekolah Berbasis Web
  • AWAN PRIBADI BASUKI  (8)
    • Konsep dan Implementasi Pemrograman Laravel 5 Edisi 2019
    • Konsep dan Teknik Menguasai Modern OOP di PHP
    • Membangun Aplikasi SMS Gateway Berbasis Web Codeigniter Bootstrap
    • Menguasai Codeigniter: Kasus Membangun Aplikasi Perpustakaan
    • Konsep dan Implementasi Pemrograman LARAVEL 5
    • Kolaborasi Codeigniter dan Bootstrap: Membuat Aplikasi PSB Sekolah
    • Proyek Membangun Website Berbasis PHP dengan Codeigniter
    • Membangun Web Berbasis PHP dengan Framework Codeigniter
  • DAUD EDISON TARIGAN  (1)
    • Membangun SMS Gateway Berbasis Web dengan Codeigniter
  • DAVID NAISTA  (2)
    • CODEIGNITER VS LARAVEL, Kasus membuat Website Pencari Kerja
    • Bikin Framework PHP Sendiri dengan Teknik OOP dan MVC
  • DENI SUTAJI  (1)
    • Sistem Inventory Mini Market dengan PHP dan jQuery
  • FIKA RIDAUL MAULAYYA  (1)
    • Bikin Website Video Ala Youtube dengan Laravel Livewire
  • FRITZ GAMALIEL  (1)
    • Super Web Programming 10 Bahasa 10 Proyek Web
  • HANUNG PUJAHASTOMO  (1)
    • Membuat Toko Online Berbasis Ajax dengan Prestashop
  • HARDANA  (1)
    • Membuat Aplikasi IoT: Internet of Things
  • HENDRA SANTOSO  (2)
    • Membangun Aplikasi Mobile dengan PWA (Progressive Web App)
    • Membuat Helpdesk System Berbasis OOP dan PDO dengan PHP
  • HERI KURNIAWAN  (1)
    • Trik Membuat Web Template dengan PHP dan CSS
  • HUSEIN ALATAS  (2)
    • Proyek Membangun Responsive Web Design dengan Bootstrap 3 dan 4
    • Responsive Web Design dengan PHP dan Bootstrap
  • I NYOMAN SWETA  (1)
    • Trik Kolaborasi REACT dengan PHP dan MySQL
  • IPUNG PURWONO  (1)
    • Proyek Aplikasi ANDROID dengan Visual Studio Xamarin dan Codeigniter
  • KANG CAHYA  (1)
    • Membuat Aplikasi Mobile Native dengan JAVASCRIPT By NATIVESCRIPT
  • KOMANG WISWAKARMA  (4)
    • Teknik Cepat Menguasai CSS 3
    • 9 Langkah Menjadi Master Framework Codeigniter
    • Panduan Lengkap Menguasai Pemrograman CSS
    • Membuat Katalog Online dengan PHP dan CSS
  • LILIEK TRIYONO  (1)
    • Sistem Informasi Akademik Kampus Berbasis Web dengan LARAVEL 5
  • LUKMANUL HAKIM  (10)
    • 5 Langkah Mudah Menguasai React Native
    • Konsep dan Implementasi Pemrograman LARAVEL 7 Edisi Best Practice
    • Jalan Pintas Menjadi Master ReactJS
    • Rahasia Inti Master PHP dan MySQLi (improved)
    • Proyek Website Super Wow dengan PHP dan jQuery
    • Trik Dahsyat Menguasai Ajax dengan jQuery
    • Bikin Website Super Keren dengan PHP dan jQuery
    • Trik Rahasia Master PHP Terbongkar Lagi
    • Jalan Pintas Menjadi Master PHP
    • Membongkar Trik Rahasia Para Master PHP
  • LUTFI GANI  (2)
    • Panduan Praktis Menguasai Vue.js
    • Menguasai AngularJS untuk Membuat Website Dinamis
  • M. FIRGIAWAN KHAFIDLI  (1)
    • Trik Menguasai HTML5, CSS3, PHP Aplikatif
  • MEILAN ANASTASIA MAHARANI  (2)
    • Analisa dan Perancangan Sistem Informasi dengan Codeigniter dan Laravel
    • Trik Menguasai PHP + jQuery Berbasis Linux dan Windows
  • MUKTI ADI AZHARI  (1)
    • Membuat Game Edukasi dengan HTML5 dan Android Studio
  • NURIS AKBAR SST  (6)
    • Membangun Web Aplikasi dengan PHP, MySQLi, dan Bootstrap
    • Membangun Layanan SMS Online Berbasis Client Server
    • Analysis dan Development Website E-Commerce
    • Panduan Sakti Menguasai Laravel 5
    • Seminggu Jago Codeigniter dan Bootstrap
    • Teknik AJAX jQuery dalam Pengolahan Data
  • PAJRIN FARISI  (1)
    • Proyek Membuat Website Jejaring Sosial dengan Joomla
  • RANDI ADRIKA PUTRA  (2)
    • Menguasai Codeigniter 4 Kasus Membuat Aplikasi PMB Kampus
    • Aplikasi Ujian Seleksi Penerimaan Pegawai dgn Codeigniter & Ajax
  • ROKI ADITAMA  (2)
    • WEB SERVICE Pembayaran Uang Kuliah Online dengan PHP dan SOAP WSDL
    • Sistem Informasi Akademik Kampus Berbasis Web dengan PHP
  • RONALD RUSLI  (2)
    • Membuat Aplikasi GPS Ala GO-JEK
    • Membuat Aplikasi GPS dan Suara Antrian dengan PHP
  • ROSIHAN ARI YUANA  (2)
    • Konsep dan Implementasi Pemrograman Python, Kasus Big Data
    • 67 Trik dan Ide Brilian Master PHP
  • SANDI HARIADI  (1)
    • Trik dan Solusi Jitu Pemrograman Web
  • SARWO PRAYITNO  (1)
    • Penerimaan Siswa Baru Sekolah Online dengan PHP
  • SHARIVE  (2)
    • Proyek Membangun Website dengan Yii Framework
    • Yii Framework: Menguasai Framework PHP Terbaik
  • SIDIQ WAHYU  (1)
    • Sistem Penerimaan Mahasiswa Baru Berbasis Web dan Mobile
  • SOFYAN PARIYASTO  (2)
    • Proyek Membuat Radio Streaming dan TV Online dengan PHP
    • Proyek Membuat Web Multimedia dengan PHP
  • SUHANTO  (2)
    • Membuat Web untuk Smartphone dengan Joomla Mobile
    • Proyek Membuat Website Sekolah dengan Joomla
  • WAHYU KURNIAWAN  (2)
    • Mengenal Web Security (Kasus Eksploitasi Web dengan AJAX)
    • Sistem Monitoring Pelanggaran Siswa Berbasis Web dan Android
  • Apa yang baru di HTML5?

    Di HTML5 terdapat beragam elemen baru diantaranya untuk menggambar grafik, menambahkan konten media, membuat struktur halaman lebih baik, Geolocation, web storage, cache application, API untuk drag/drop elemen dan lainnya.

    Apa fungsi canvas pada HTML?

    Canvas adalah elemen baru di HTML5 untuk menggambar (render) grafik, image, dan teks.