Senin, 11 Juli 2016

, ,

Tutorial Membuat Game Snake Dengan HTML5 dan Javascript

Hallo guys, sesuai dengan janji saya beberapa waktu lalu. Kali ini saya akan memberikan tutorial singkat membuat game snake dengan HTML5 dan Javascript dan bisa dibilang simple.
Kalian bisa mengetik atau meng-copas script berikut di text editor yang biasa kalian gunakan (misal : Notepad++, Sublime text, leafpad, gedit, dsb).

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
    <head>   
    </head>
    <body>
        <!-- HTML5 canvas untuk lokasi game -->
        <canvas id="canvas" width="500" height="500"></canvas>      
    </body>
</html>

Script diatas berfungsi untuk membuat canvas atau tempat game yang akan dibuat dengan luas ukuran 500 x 500. Berikutnya adalah penggunaan Javascript. Kalian dapat mengetik atau meng-copas script berikut dan masukan ke dalam tag <head></head>. Jadi akan terlihat seperti berikut :


<!DOCTYPE html>
<html>
    <head>
        <!-- Jquery -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"type="text/javascript"></script>
        <script type="text/javascript" >
            $(document).ready(function() {
                var canvas = $("#canvas")[0];
                var ctx = canvas.getContext("2d");
                var w = $("#canvas").width();
                var h = $("#canvas").height();

                var cw = 10;
                var d;
                var food;
                var score;

                var snake_array; //membuat cell aray untuk membuat ular

                function init()
                {
                    d = "right"; //default direction
                    create_snake();
                    create_food(); //membuat makanan untuk ular
                    //score game
                    score = 0;

                    if (typeof game_loop != "undefined")
                        clearInterval(game_loop);
                    game_loop = setInterval(paint, 60);
                }
                init();

                function create_snake()
                {
                    var length = 5; //panjang ular default
                    snake_array = [];
                    for (var i = length - 1; i >= 0; i--)
                    {
                        //membuat ular horizontal mulai dari arah kiri
                        snake_array.push({x: i, y: 0});
                    }
                }

                //membuat makanan
                function create_food()
                {
                    food = {
                        x: Math.round(Math.random() * (w - cw) / cw),
                        y: Math.round(Math.random() * (h - cw) / cw),
                    };
                }

                //Mewarnai tubuh ular
                function paint()
                {
                    ctx.fillStyle = "white";
                    ctx.fillRect(0, 0, w, h);
                    ctx.strokeStyle = "black";
                    ctx.strokeRect(0, 0, w, h);

                    //Membuat pergerakan untuk ular.
                    var nx = snake_array[0].x;
                    var ny = snake_array[0].y;
                    if (d == "right")
                        nx++;
                    else if (d == "left")
                        nx--;
                    else if (d == "up")
                        ny--;
                    else if (d == "down")
                        ny++;
                     
                    //Cek tabakan tembok
                    if (nx == -1 || nx == w / cw || ny == -1 || ny == h / cw || check_collision(nx, ny, snake_array))
                    {
                        //restart game
                        init();
                        return;
                    }
                     
                    //Cek tabrakan dengan makanan
                    if (nx == food.x && ny == food.y)
                    {
                        var tail = {x: nx, y: ny};
                        score++;
                        //membuat makanan baru
                        create_food();
                    }
                    else
                    {
                        var tail = snake_array.pop();
                        tail.x = nx;
                        tail.y = ny;
                    }

                    snake_array.unshift(tail); 

                    for (var i = 0; i < snake_array.length; i++)
                    {
                        var c = snake_array[i];
                        paint_cell(c.x, c.y);
                    }

                    //Mewarnai makanan
                    paint_cell(food.x, food.y);
                    //Mewarnai score game
                    var score_text = "Score: " + score;
                    ctx.fillText(score_text, 5, h - 5);
                }

                function paint_cell(x, y)
                {
                    ctx.fillStyle = "green";
                    ctx.fillRect(x * cw, y * cw, cw, cw);
                    ctx.strokeStyle = "black";
                    ctx.strokeRect(x * cw, y * cw, cw, cw);
                }

                function check_collision(x, y, array)
                {
                    for (var i = 0; i < array.length; i++)
                    {
                        if (array[i].x == x && array[i].y == y)
                            return true;
                    }
                    return false;
                }

                //Keyboard control ular
                $(document).keydown(function(e) {
                    var key = e.which;
                    if (key == "37" && d != "right")
                        d = "left";
                    else if (key == "38" && d != "down")
                        d = "up";
                    else if (key == "39" && d != "left")
                        d = "right";
                    else if (key == "40" && d != "up")
                        d = "down";
                })
            })

        </script>
    </head>
    <body>
        <!-- HTML5 canvas untuk lokasi game -->
      <center>
<canvas background=”000000” id="canvas" width="500" height="500"></canvas>
      </center>       
    </body>
</html>

Kalian dapat memodifikasi script di atas sesuai dengan keinginan. Setelah selesai, save as dokumen, beri nama dan gunakan ekstensi *.html (sbg contoh : index.html / game.html). Terakhir, coba kalian jalankan di browser kalian (Firefox/Chrome).
Semoga bermanfaat ;)

0 comments:

Posting Komentar