Jin Toples Programming

Cara Membuat Game Snake Dengan HTML5 - HTML5 adalah generasi ke lima dari HTML yaitu sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web yang digunakan untuk menampilkan informasi di dalam internet. Perbedaan HTML 5 secara garis besar adalah HTML5 lebih mendukung dalam konten multimedia di bandingkan versi HTML sebelumnya dan juga HTML5 lebih mudah di mengerti oleh browser dan mesin.

Baca juga : Cara Membuat Kalkulator Keren Dengan CSS3 dan Javascript

Dengan HTML5 kita dapat melakukan berbagai macam animasi multimedia yang beragam jika kita bisa mengkombinasikannya dengan CSS dan JavaScript. Sebagai contoh sederhana pada kali ini kita akan membuat game snake dengan menggabungkan HTML5 dan JavaScript.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse. Karena game ini cukup sederhana saya sarankan menggunakan Notepad atau Notepad++ saja sudah cukup.

HTML5

Buka Notepad++ anda kemudian buatlah sebuah file baru dengan nama snake_html5_game kemudian tuliskan script berikut :

<!DOCTYPE html> 
<html>
    <head>   
    </head>
    <body>
        <!-- HTML5 canvas untuk lokasi game -->
        <canvas id="canvas" width="450" height="450"></canvas>       
    </body>
</html>

Penjelasan :

Kita mebuat canvas untuk lokasi game kita nanti dengan ukuran 450 x 450

Javascript

Sekarang untuk java scriptnya tambahkan java script pada script di atas, letakan di antara <head></head> sehingga script anda sekarang menjadi seperti ini :

<!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 = "blue";
                    ctx.fillRect(x * cw, y * cw, cw, cw);
                    ctx.strokeStyle = "white";
                    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 -->
        <canvas id="canvas" width="450" height="450"></canvas>       
    </body>
</html>

Sekrang simpan file anda dengan ekstensi .html contoh : snake_html5_game.html.

Sekarang game HTML5 anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE hehheeh klw di IE tidak jalan saya sudah tidak heran.