| Tutorial Flash - HTML5 - Javascript - DKV

Latest Blog



23.10.2020

Virtual Lab Flash

Library untuk pengembangan laboratorium virtual dengan Flash/Animate

06.10.2020

Game Among Us

Membuat gerakan karakter seperti pada game Among Us

05.10.2020

Multimedia Interaktif Tata Surya

Membuat Multimedia Pembelajaran Interaktif tentang tata surya

04.10.2020

Animasi Rotasi Bumi 3D

Membuat animasi bumi berotasi dengan grafik 3 Dimensi

01.10.2020

Membuat Kuis Essay

Mengecek jawaban kuis essay pada aplikasi pembelajaran interaktif

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


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