Cara Membuat game dengan HTML

Jumat, 28 April 2017

Cara Membuat game dengan HTML

April 28, 2017 Leave a Reply

game ular
Pada postingan kali ini saya ingin berbagi tips, bagaimana cara membuat game dengan html, pada postingan sebelumnya saya juga pernah memberikan tips tentanga bagaimana cara membuat game dengan html,kala itu tutorialnya game html seperti game loncat-loncat dengan menggunakan mouse untuk menggerakan pemainnya. namun kali ini saya mencoba berbagi tips untuk membuat game html dengan menggunakan tanda panah pada keyboard.

game html kali ini dinamakan game ular, hampir sama dengan game-game yang kita lihat di hp jadul. memang game ini cukup sederhana, namun kalau dulu asyik menggunakan game ular tersebut namun kali ini timbul pertanyaan bagaimana cara membuat game ular tersebut.

Seperti biasa untuk membuat file html kita harus membuatnya di notepad. Pada notepad itu kita harus menyiapkan area untuk game snake itu area game ini biasanya ada pada html5 yang disebut dengan istilah canvas maka contoh penulisannya seperti ini:

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

Untuk mengatur lebar dan tingginya bisa disesuaikan dengan kebutuhan sebesar mana area game itu akan dibuat namun jangan melebihi pandangan kita di komputer. selain dengan kode html tersebut kode di atas harus dilengkapi dengan kode javascript, maka untuk lengkapnya copykan saja script html berikut, kode ini sudah digabung antara html dan javascript.

 <!DOCTYPE html>
<html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <!-- 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";
                })
            })

Jangan lupa simpan kode di atas dengan gameular.html, kemudian coba jalankan, untuk demo dari kode ular itu bisa dicoba dahulu disini !

0 komentar: