Input
keyboard yang sering Kita gunakan dalam sebuah game adalah tanda panah atas,
bawah, kiri dan kanan untuk memindahkan objek atau lepaskan objek.
Dibawah
ini adalah langkah-langkah membuat deteksi input keyboard dalam web game dengan
bahasa pemrograman HTML 5 adalah sebagai berikut:
1. Buka
notepad atau notepad ++
2. Siapkan
gambar yang akan dijadikan objek
3. Tuliskan
program dibawah ini dalam notepad
<!DOCTYPE HTML>
<html>
<head>
<style>
canvas {
border-width:
1px;
border-style: solid;
}
</style>
<script>
var canvas;
var ctx;
var posX = 0;
var posY = 0;
var img = new Image();
window.onload =
function(){
img.src = "emoticon+bergerak+lucu+terbaru+12.gif";
canvas =
document.getElementById("myCanvas");
ctx =
canvas.getContext("2d");
window.addEventListener('keydown',onKeyDown,true);
setInterval(draw,
1.6);
};
function onKeyDown(e) {
switch
(e.keyCode) {
case
38: /* Up arrow was pressed */
posY
-= 10;
break;
case
40: /* Down arrow was pressed */
posY
+= 10;
break;
case
37: /* Left arrow was pressed */
posX
-= 10;
break;
case
39: /* Right arrow was pressed */
posX
+= 10;
break;
}
}
function draw() {
ctx.fillStyle
= "#fff";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img, posX, posY);
}
</script>
</head>
<body>
<center>
<canvas
id="myCanvas" width="640" height="480">
</canvas>
</center>
</body>
</html>
Keterangan
Berwarna biru adalah variabel untuk menentukan objek
Berwarna merah
adalah nama file gambar yang akan ditampilkan
Berwarna hijau
adalah mengaktifkan penanganan event key down keyboard untuk ditangani fungsi
onKeyDown pada JavaScript
Berwarna Purple
adalah fungsi yang menangani event key down
Berwarna Orange
adalah menggambar “emoticon+bergerak+lucu+terbaru+12.gif” sesuai dengan variabel global posX dan posY.
4. Simpanlah script
tersebut dengan extend atau type file “.html”
5. Setelah itu,
buka atau klik 2 kali file tersebut dan hasilnya seperti gambar diatas.
Demikian Cara Membuat Deteksi input keyboard dalam web game.
0 komentar:
Post a Comment