HTML 5 Untuk Game

8/20/2019 HTML 5 Untuk Game

http://slidepdf.com/reader/full/html-5-untuk-game 1/16

MODUL 1

HTML 5 UNTUK GAME

A. Tujuan

1. Mahasiswa mampu menjelaskan elemen dasar HTML 5 untuk Game.

2. Mahasiswa mampu menerapkan kegunaan elemen HTML 5 untuk Game.

3. Mahasiswa mampu membuat game sederhana menggunakan elemen dasar yang ada pada

HTML 5.

B. Dasar Teori

Fitur pada HTML 5 yang digunakan untuk pemrograman game :

1. Canvas

Area default canvas pada halaman HTML berupa segi empat yang tidak mempunyai garis tepi

dan berupa area kosong. Area tersebut yang nantinya digunakan untuk menggambar grafik

seperti garis, lingkaran, teks, dan mewarnai shape pada halaman website.

HTML 5 canvas memberikan fitur API (Application Program Interface) untuk mengelola

gambar di area tertentu pada browser secara langsung,dimana JavaScript digunakan untuk

menggambar grafik pada canvas tersebut. Hal ini sekaligus membuat pengembangan game

pada JavaScript semakin unggul dari sebelumnya.

HTML 5 canvas dapat di deklarasikan dengan cara sebagai berikut :

<canvas id =”myCanvas”></canvas>

Saat ini hampir semua browser sudah mendukung fitur canvas. Berikut spesifikasi browser dan

versi minimal yang mendukung fitur HTML 5 <canvas>

2. DOM (Document Object Model) Events

Mouse Event

Keyboard Event

Drag-Drop

C. Latihan

1. Canvas

Untuk mendeklarasikan/membuat canvas pada halaman kerja serta menentukan ukurannya

dalam pixel adalah dengan menggunakan:

<canvas id="myCanvas" width="" height=""> </canvas>

Latihan 1 – Membuat canvas sederhana.

Pada latihan ini akan dibuat canvas sederhana dengan ukutan lebar 200px dan tinggi

100px

Langkah kerja :

1. Ketikkan kode dibawah ini

2. Simpan dengan nama Latihan1.1.html

3. Run pada web browser yang support dengan fitur HTML 5 canvas dan lihat

hasilnya

Hasil :

Gambar 1.1 Canvas Sederhana

<!DOCTYPE html>

<html>

<head> <title>Canvas Sederhana</title>

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px

solid #000000;"></canvas> 

</body> </html>

Latihan 2 – Membuat objek rectangle dalam canvas menggunakan JavaScript

Pada fitur canvas, terdapat method untuk membuat objek segi empat yaitu :

Method Deskripsi

rect(x,y,width,height) Membuat sebuah rectangle (segi empat).

fillRect(x,y,width,height) Menggambar isi dari segi empat tersebut.

strokeRect(x,y,width,height)

Menggambar sebuat segi empat tanpa

warna (membuat garis luar).

clearRect()

Menghapus isi yang telah diberikan di

dalam segi empat tersebut.

Langkah Kerja :

1. Ketikan kode dibawah ini :


3. Run pada web browser dan lihat hasilnya.

Hasil :

Gambar 1.2 Ractangle Pada Canvas

<!DOCTYPE html> <html>

<head> <title>Canvas Sederhana</title>

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px

solid #000000;"></canvas>

<script>

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

ctx.fillStyle = "#FF0000";

ctx.fillRect(0,0,150,75)  </script>

</body>

</html>



Latihan3 – Membuat garis melalui titik Koordinat

Pada latihan ini akan dibuat garis pada canvas menggunakan method di bawah ini :

moveTo(x,y) Mendefinisikan titik koordinat awal dari garis

lineTo(x,y) Mendefinisikan titik koordinat akhir dari garis

Langkah Kerja:1. Ketik kode dibawah ini

2.

Simpan dengan nama Latihan1.3.html

3. Run pada web browser dan lihat hasilnya

Hasil:

Gambar 1.3 Garis Pada Canvas

<!DOCTYPE html>

<html>

<body> <canvas id="myCanvas" width="200" height="200"

style="border:1px solid #d3d3d3;">

</canvas>

<script>



ctx.moveTo(0,0);

ctx.lineTo(200,200); ctx.moveTo(0,200);

ctx.lineTo(200,0);

ctx.stroke();

</script>

</body>

</html>



Latihan 4 – membuat lingkaran

Untuk membuat lingkaran pada HTML 5 diperlukan method di bawah ini :

arc(x,y,r,startAngle,endAngle)

Keterangan :

o

x,y : koordinat titik pusat lingkaran.o

r : radius atau jari-jari lingkaran.

Gambar 1.4 Skema Menggambar Lingkaran

Langkah Kerja :

1. Ketik kode di bawah ini.

2. Simpan dengan nama Latihan1.4.html.

3.

Run pada web browser dan lihat hasilnya :

Hasil :

Gambar 1.5 Lingkaran Pada Canvas

<!DOCTYPE html>

<html>


style="border:1px solid #d3d3d3;">

</canvas>

<script>



ctx.beginPath();

ctx.arc(100,100,100,3,4*Math.PI);

ctx.stroke();

</script>

</body>

</html>



Latihan 5 – Memasukkan gambar di dalam canvas

Untuk mengambar atau memasukkan gambar pada HTML 5 diperlukan method di

bawah ini :

drawImage(x,y,weight,height)

Langkah Kerja :1.

Sediakan gambar yang akan dieksekusi.


3. Simpan dengan nama Latihan1.4.html.

4.

Run pada web browser dan lihat hasilnya :

Hasil :

Gambar 1.6 Gambar Pada Canvas

<!DOCTYPE HTML>

<html>

<head> <title>Image on Canvas</title>

</head>


style="border:1px solid #000000"></canvas> <script>

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var imageObj = new Image();

imageObj.onload = function() {

context.drawImage(imageObj, 10, 10,200,200);

};

imageObj.src = '1.png';

</script>

</body>

</html>



2. Mouse Event

Latihan-latihan dibawah merupakan implementasi dari fungsi mouse event pada HTML 5,

sebelum itu perlu diketahui beberapa event yang disediakan oleh HTML 5 untuk mouse

event

Event Diskripsi

onclick Digunakan untuk melakukan click pada suatu element

oncontextmenu Digunakan ketika user melakuakan klik kanan pada sebuah

elemen dan membuka suatu menu

ondblclick Digunakan untuk double click pada suatu element

onmousedown Digunakan ketika user menekan tombol mouse pada sebuah

element

onmouseenter Digunakan ketika pointer masuk pada suatu elementonmouseleave Digunakna ketika pointer keluar dari sebuah element

onmousemove Digunakan untuk mendeteksi saat mouse berpindah

onmouseover Digunakan untuk mendeteksi ketika pointer mouse melintas

sebuah elemen

onmouseout Digunakan ketika user memindahkan pointer mouse keluar dari

sebuah element.

onmouseup Digunakan untuk mendeteksi ketika tombol mouse dilepas

Latihan 1 – Mouse Click

Langkah Kerja


<!DOCTYPE html>

<html>

<head> <title> mouse click</title>

<script> function initialise(){


canvas.addEventListener("mousedown", doMouseDown, false);

}

function doMouseDown(event) {

alert("Mouse Down Pada Canvas");

}

</script>

</head>

<body onload=initialise()>

<canvas id="myCanvas" width="200"

height="200"style="border:2px solid #d3d3d3;">

</canvas></body> </html>



2. Run pada browser dan lihat hasilnya.

Hasil:

Gambar 2.1 Mouse Click

Latihan 2 – Identifikasi posisi koordinat mouse pada canvas

Pada latihan ini akan dilihat posisi koordinat pointer pada canvas

Untuk mendapatkan posisi koordinat mouse pada HTML5 Canvas, dapat

menggunakna method getMousePos() dan getBoundingClientRect() (method dari

objek window

Langkah kerja :

1. Ketik kode dibaawah ini

<!DOCTYPE HTML>

<html>

<head>

<style> body {

margin: 0px;

padding: 0px;

}

</style>

</head>


style="border:1px solid #c3c3c3"></canvas>

<script>

function writeMessage(canvas, message) {


context.clearRect(0, 0, canvas.width, canvas.height);

context.font = '18pt Calibri';

context.fillStyle = 'black';

context.fillText(message, 10, 25);

}




3.

Run pada browser dan lihat hasilnya

Hasil :

Gambar 2.2 Posisi Koordinat Mouse

function writeMessage(canvas, message) {

function getMousePos(canvas, evt) {

var rect = canvas.getBoundingClientRect();

return {

x: evt.clientX - rect.left,

y: evt.clientY - rect.top

};

} var canvas = document.getElementById('myCanvas');


canvas.addEventListener('mousemove', function(evt) {

var mousePos = getMousePos(canvas, evt);

var message = 'Posisi Koordinat Mouse: ' + mousePos.x

+ ',' + mousePos.y;

writeMessage(canvas, message);

}, false);

</script>

</body> </html>



3. Drag-Drop

Drag-Drop adalah fitur yang umum, dimana ketika object diambil dan ditarik pada lokasi

yang berbeda

Latihan 1 – Drag-Drop HTML 5

Berikut adalah attribute yang harus diperhatikan :

<img draggable="true"> Membuat element yang dapat di tarik

function drag(ev) {

ev.dataTransfer.setData

("datavalue", ev.target.id);

}

o ondragstart dan setData(), pada

latihan di bawah atribut

ondragstart akan memanggil

drag(event), yang menyediakan

data yang akan di-drag.

o

.setData() adalah method untukmengatur tipe data dan value.nya

function drop(ev) {

ev.preventDefault();

var data =

ev.dataTransfer.getData("text");

ev.target.appendChild

(document.getElementById(data));

}

Kode yang digunakan untuk

melakukan drop

Langkah kerja :

1.

Sediakan sebuah gambar.

2. Ketik kode dibaawah ini

<!DOCTYPE HTML>

<html>

<head>

<style> #div1 {width:320px;height:320px;padding:10px;border:1px

solid #aaaaaa;}</style>

<script>

function allowDrop(ev) {


}

function drag(ev) {

ev.dataTransfer.setData("text", ev.target.id);

}

function drop(ev) {


var data = ev.dataTransfer.getData("text");

ev.target.appendChild(document.getElementById(data));

} </script>

</head>




4. Run pada browser dan lihat hasilnya

Hasil

:

Gambar 3.1 Posisi gambar awal.

Gambar 3.2 Posisi gambar setelah didrop pada kotak yang telah disediakan

<body> <div id="div1" ondrop="drop(event)"

ondragover="allowDrop(event)"></div>

<br>

<img id="drag1" src="2.png" draggable="true"

ondragstart="drag(event)" width="300" height="300">

</body>

</html>



Latihan 2 – Drag-Drop pada area canvas

Pada latihan ini akan dibuat sebuah persegi kecil yang dapat diklik dan dipindah-pindah

pada area canvas yang ukurannya telah ditentukan.

1. Buat sebuah file html dan simpan dengan nama Latiham 3.2.html

2.

Buatlah sebuah canvas dengan ukuran 300 pixel x 300 pixel

3.

Ketikkan kode dibawah ini pada tag <script>




Hasil :

Gambar 3.4 Drag-Drop pada Canvas



5. Keyboard Events

Latihan-latihan dibawah merupakan implementasi dari fungsi keyboard event pada

HTML5, sebelum itu perlu diketahui beberapa event yang disediakan oleh HTML 5 untuk

mouse event

Event Diskripsi

onkeydown Digunakan ketika user sedang menekan suatu tombol

onkeypress Digunakna untuk mendeteksi ketika tombol keyboard

ditekan dan posisi kursor sedang focus pada sebuah form

onkeyup Digunakan untuk mendeteksi ketika tombol keyboard

ditekan

Latihan 1 - Mengeser object menggunakna keyboard pada canvas

Langkah Kerja :

1. Buat sebuah file html dan simpan dengan nama Latiham 4.1.html

2. Buatlah sebuah canvas dengan ukuran 300 pixel x 300 pixel

3. Ketik kode JavaScript di bawah ini :




Hasil :



Gambar 3.5. mengeser objek menggunakna keyboard

D. Study Kasus

Buatlah game puzzle sederhana menggunakan HTML5 Canvas seperti pad gambar dibawah ini:

HTML 5 Untuk Game

Documents

Transcript of HTML 5 Untuk Game