Javascript benar-benar tidak ada bahasa yang sempurna untuk dikolaborasikan dengan web browser. Meskipun hanya sebatas script, javascript cukup kaya akan fitur yang terintegrasi dengan baik. Keberadaannya sama sekali tidak mengurangi performa eksekusi, namun justru meningkatkan estetika dan kehandalan sebuah halaman web. Salah satu bentuk kesempurnaan ini adalah mekanisme event-driven yang mudah dikustomisasikan.
Saat membuat game, wajib hukumnya untuk mengetahui bagaimana memperoleh event dari keyboard atau mouse, sehingga kita bisa menentukan bagaimana proses kontrol aktor yang terlibat dalam game. Untuk tutorial kali ini, kita akan khusus membahas tentang event keyboard terlebih dahulu.
Sebelum beranjak ke topik utama, kita harus membuat kelas untuk objek yang akan dikontrol. Kita namakan sebagai kelas Player. Bentuknya cukup sederhana, ia hanya berproperti x dan y yang merepresentasikan posisi objek saat ini.
function Player(x,y){
this.x = x;
this.y = y;
}
Kita akan membuat sebuah sample objek Player ketika inisialisasi berlagsung. Contoh ini akan membuat objek player dengan koordinat awal (100,100).
Tidak lupa, sebuah fungsi khusus dibuat untuk me-refresh gambar pada canvas. Fungsi ini akan dieksekusi melalui interval 30ms. Jangan kawatir, nilai ini sudah umum, kok.
var player;
window.onload = function(){
...
player = new Player(100,100);
setInterval(Draw, 30);
};
function Draw(){
context.clearRect(0,0,canvas.width,canvas.height);
context.fillRect(player.x,player.y,10,10);
}
Nah, sekarang saatnya kita menulis kode untuk memproses event dari keyboard. Cara termudah untuk mengontrol aktor dengan keyborad adalah dengan memasang handler window.onkeydown(). Fungsi ini akan dipanggil setiap kita menekan salah satu tombol keybord. Setelah dilepas, browser selanjutnya secara otomatis akan memanggil handler window.onkeyup().
Sebuah argumen berupa objek KeyboardEvent akan diberikan ke fungsi handler yang dipanggil. Dalam argumen ini terdapat detail mengenai event yang tengah berlangsung. Properti keyCode dalam argumen tersebut adalah kunci utama dalam mekanisme kontrol yang akan kita lakukan. Nilai ini akan menunjukkan kode representatif posisi tombol keyboard penghasil event.
window.onkeydown = function(evt){
switch (evt.keyCode){
case 37: //tombol panah kiri?
player.x -= 3;
break;
case 38: //tombol panah atas?
player.y -= 3;
break;
case 39: //tombol panah kanan?
player.x += 3;
break;
case 40: //tombol panah bawah?
player.y += 3;
break;
default:
break;
}
};
Jika butuh pencerahan, saya sarankan untuk mengunjungi link berikut:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
Full code example:
<html>
<head>
<title>Game HTML5</title>
<style type='text/css'>
html,body {
width:100%;
height:100%;
border:0;
margin:0;
padding:0;
overflow:hidden;
}
canvas {
border:1px solid red;
}
</style>
<script type='text/javascript'>
var canvas;
var context;
var player;
function Player(x,y){
this.x = x;
this.y = y;
}
window.onload = function(){
canvas = document.getElementById("gameCanvas");
context = canvas.getContext("2d");
window.onresize();
player = new Player(100,100);
setInterval(Draw, 30);
};
window.onresize = function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};
window.onkeydown = function(evt){
switch(evt.keyCode){
case 37:
player.x -= 3;
break;
case 38:
player.y -= 3;
break;
case 39:
player.x += 3;
break;
case 40:
player.y += 3;
break;
default:
break;
}
};
function Draw(){
context.clearRect(0,0,canvas.width,canvas.height);
context.fillRect(player.x,player.y,10,10);
}
</script>
</head>
<body>
<canvas id='gameCanvas' width='100%' height='100%'></canvas>
</body>
</html>
Masih belum puas dengan tutorial yang satu ini? Tunggu saja postingan selanjutnya yang lebih greget, ya.
0 comments