Kumpulan Informasi Loker dan Kuliah di Indonesia

Wednesday, December 16, 2015

Web Game Cara Membuat Deteksi input keyboard

10:28:00 AM Posted by Abdul Rohman No comments
Dalam kesempatan kali ini penulis akan membahas bagaimana cara membuat deteksi input keyboard dalam web game. Apa yang telah Kita ketahui game-game yang berbasis web tidak terlepas dari sebuah input keyboard dan mouse yang merupakan interaksi antara user dengan aplikasi game.
 
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