| Tutorial Flash - HTML5 - Javascript - DKV

Latest Blog



12.09.2020

Membuat Game Ular Tangga

Membuat game ular tangga dengan Adobe Flash/Animate AS3

10.09.2020

Membuat Pengacak Dadu

Membuat acak dadu untuk game ular tangga/monopoly

13.07.2020

Membuat Game Onet

Membuat game mencari gambar yang sama (onet) dengan JS/HTML5

11.06.2020

Membuat Kuis CBT

Membuat kuis CBT, menyimpan nilai ke server dengan PHP dan XML

11.05.2020

Game RPG dengan HTML Canvas (Javascript)

Pengembangan game RPG dengan teknik tiling menggunakan HTML canvas

19.05.2020

Membuat Fitur Swipe Mobile

Membuat fitur swap / drag konten untuk mobile

12.05.2020

Membuat Grafik Fungsi Kuadrat dengan Flash

Membuat kurva fungsi kuadrat dengan kode actionscript 3 Flash

11.05.2020

Membuat Kordinat Kartesius dengan Flash

Membuat sistem kordinat kartesius dengan code AS3 full

16.03.2020

Game Edukasi RPG

Buku pengembangan game RPG bermuatan edukasi

31.07.2019

Perpustakaan Baru UNNES

Mengintip perpustakaan baru UNNES


ALL BLOG

Latest Games


;
Free Games

Indonesia Soccer League

Play Indonesian Soccer League on Flash 3D Games


tutorial membuat game RPG by wandah_w

Persiapan awal pengembangan Laboratorium Virtual

Pendahuluan

Mengembangkan Laboratorium Virtual memiliki tingkat kompleksitas yang beragam, konsep inilah yang pertamakali harus kita pahami. Dalam tutorial di web ini tutorial akan dibuat dengan sangat sederhana, yang berarti Laboratorium virtual yang dihasilkan adalah dalam format yang sederhana, namun dapat difungsikan sebagai media pembelajaran untuk mensimulasikan praktikum sains tertentu.

HTML 5 adalah sebuah bahasa pemrograman untuk menstrukturkan dan menampilkan sebuah tampilan web (World Wide Web), yang merupakan elemen utama dari Internet. HTML 5 merupakan revisi kelima dari HTML yang mana HTML mulai dikembangkan pada tahun 1990. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. Salah satu fitur yang didukung oleh HTML 5 yang dapat dimanfaatkan untuk memanipulasi grafis dan membentuk interaktivitas adalah <canvas>.

Canvas merupakan salah satu elemen dari HTML 5 yang memungkinkan untuk pengelolaan grafis dinamis menggunakan kode. Canvas divisualisasikan dalam bentuk area yang memiliki atribut lebar (width) dan tinggi (height), dapat dimanipulasi dengan cepat menggunakan bahasa pemrograman Javascript. Sebagaimana dengan kanvas kosong tempat pelukis bekerja, elemen <canvas> menyediakan area berbasis bitmap kepada pengguna untuk menggambar grafik menggunakan JavaScript. Area tersebut dapat digunakan untuk menggambar grafik, membuat komposisi foto, membuat animasi 2D dan 3D (digunakan dengan WebGL), melakukan pemrosesan atau rendering video real-time dan dapat dijalankan di sebagian besar aplikasi internet browser.

Struktur HTML Canvas

Sebelum pembahasan tentang canvas, kita perlu mengenal sedikit tentang standar HTML5 yang akan kita gunakan untuk membuat halaman simulasi. HTML adalah bahasa standar yang digunakan untuk membuat halaman di World Wide Web. Halaman HTML dasar dibagi menjadi beberapa bagian, umumnya <head> dan <body> yang seringkali disebut sebagai tag. Spesifikasi HTML5 baru menambahkan tag baru beberapa, seperti <av>, <article>, <header>, dan <footer>. Tag <head> biasanya berisi informasi yang akan digunakan oleh HTML seperti judul halaman, meta data, dan kode-kode tambahan. Sedangkan tag <body> untuk membuat halaman konten halaman HTML. Secara sederhana struktur kode HTML adalah sebagai berikut :

<DOCTYPE html>
<html>
<head>
	<title>Judul Halaman</title>	
</head>
<body>
	<p>Anda sedang belajar HTML</p>
</body>
</html> 


Tag <canvas> merupakan fitur yang pertamakali dikenalkan oleh Apple pada tahun 2004, dan seiring waktu menjadi standar bagi internet browser. Seperti penjelasan sebelumnya tag <canvas> akan menjadikan konten halaman web dapat dimanipulasi dengan mengelola grafik dan interaktivitas. Tag <canvas> diletakkan di antara tag <body> dan perlu didefinisikan ukuran lebar dan tingginya. Perhatikan stuktur HTML untuk membentuk canvas dengan ukuran 800 x 600 pixel sebagai berikut


<canvas id="scene" width="800" height="600"></canvas>

Setelah tag <canvas> tersebut dituliskan pada struktur HTML, maka canvas siap dimanipulasi dengan menggunakan kode Javascript.

Struktur HTML Canvas

Javascript merupakan bahasa pemrograman tingkat tinggi, yang dapat berjalan hampir di semua internet browser. Javascript memiliki standar ECMAscript, yang berarti jika anda pernah belajar pemrograman dengan kode standar yang sama (contoh Actionscript 3.0 untuk Adobe Flash/Animate), maka anda akan menemukan kemiripan dan mudah untuk dipelajari. Namun, jika anda adalah pemula dalam pemrograman, maka anda juga tidak perlu khawatir karena bahasa Javascript sangat mudah untuk dipelajari. Untuk memulai menuliskan kode Javascript maka diperlukan tag <script> yang bisa diletakkan di antara tag <head> maupun diantara tag <body>. Untuk lebih jelasnya perhatikan contoh membuat gambar garis pada canvas sebagai berikut :

File HTML

  1. Bukalah sebuah aplikasi editor teks seperti Notepad. Saya menyarankan anda untuk menggunakan aplikasi Notepad++, karena mendukung sistem penulisan kode dengan struktur dan warna yang lebih baik daripada Notepad biasa. Kemudian, ketikan kode berikut :

  2. <!DOCTYPE html>
    <html>
    <head>
    	<title>HTML Canvas</title>
    </head>
    <body>
    	<center>
    	<canvas id="scene" width="800" height="600">
        </canvas>
    	</center>
    </body>
    <script>
    	var c = document.getElementById("scene");
    	var ctx = c.getContext("2d");
    	ctx.moveTo(0, 0);
    	ctx.lineTo(200, 100);
    	ctx.stroke();
    </script>
    </html>
    
    

  3. Simpan dengan nama tutorial-1.html
  4. Dobel klik file tutorial-1.html tersebut, untuk membukanya dengan internet browser default di komputer anda, maka akan anda dapatkan gambar sebuah garis di layar browser anda.

Javascript Library simulasiDasar.js

Dalam mengembangkan sebuah aplikasi, seringkali developer membuat serangkaian fungsi-fungsi tertentu untuk mempermudah proses pengembangan. Serangkaian fungsi tersebut menggabungkan beberapa fungsi dan menyederhanakannya, serta dapat dipakai berulang kali untuk proyek yang berbeda-beda. Inilah yang disebut sebagai Javascript library.

Sebagai bahasa pemrograman yang sangat populer, terdapat begitu banyak library maupun framework berbasis Javascript yang bisa kita gunakan. Library untuk grafis canvas misalnya, terdapat berbagai library yang cukup banyak dipakai seperti d3.js, chart.js, raphael.js, paper.js dan sebagainya. Tingkat kerumitan penggunaannya cukup beragam, ada yang dapat digunakan secara langsung dengan memanggil file js eksternal, dan ada yang menggunakan pengaturan yang lebih kompleks seperti pengaturan server, penggunaan node, dan sebagainya.

Mengingat tutorial ini ditujukan untuk pemula, maka library yang digunakan dalam buku ini adalah library yang saya tulis untuk menyederhanakan beberapa fungsi standar, dan dapat digunakan secara langsung dengan memanggil file external bernama simulasiDasar.js. Untuk mengaktifkannya anda cukup meletakkan file simulasiDasar.js pada folder yang sama, dan memanggilnya dengan tag <script>, atau memanggilnya melalui CDN :

<script type="text/javascript" src="http://www.wandah.org/js/simulasiDasar.js"></script>

Contoh penggunaan library simulasiDasar.js dapat anda temukan pada tutorial selanjutnya

Share ( Ayo Berbagi )

Leave me a comment

untuk pertanyaan lebih baik di email langsung ke wandah [at] wandah [dot] com agar cepat direspon