Senin, 06 Oktober 2014

By  2 comments Edit This

cara membuar game dengan html



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.

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 :

view plainprint?
  1. <!DOCTYPE html>   
  2. <html>  
  3.     <head>     
view plainprint?
  1. </head>  
  2. <body>  
  3.     <!-- HTML5 canvas untuk lokasi game -->  
  4.     <canvas id="canvas" width="450" height="450"></canvas>         
  5. </body>  
  6. /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 :

view plainprint?
  1. <!DOCTYPE html>   
  2. <html>  
  3.     <head>  
  4.         <!-- Jquery -->  
  5.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>  
  6.         <script type="text/javascript" >  
  7.             $(document).ready(function() {  
  8.                 var canvas = $("#canvas")[0];  
  9.                 var ctx = canvas.getContext("2d");  
  10.                 var w = $("#canvas").width();  
  11.                 var h = $("#canvas").height();  
  12.   
  13.                 var cw = 10;  
  14.                 var d;  
  15.                 var food;  
  16.                 var score;  
  17.   
  18.                 var snake_array; //membuat cell aray untuk membuat ular  
  19.   
  20.                 function init()  
  21.                 {  
  22.                     d = "right"; //default direction  
  23.                     create_snake();  
  24.                     create_food(); //membuat makanan untuk ular  
  25.                     //score game  
  26.                     score = 0;  
  27.   
  28.                     if (typeof game_loop != "undefined")  
  29.                         clearInterval(game_loop);  
  30.                     game_loop = setInterval(paint, 60);  
  31.                 }  
  32.                 init();  
  33.   
  34.                 function create_snake()  
  35.                 {  
  36.                     var length = 5; //panjang ular default  
  37.                     snake_array = [];   
  38.                     for (var i = length - 1; i >= 0; i--)  
  39.                     {  
  40.                         //membuat ular horizontal mulai dari arah kiri  
  41.                         snake_array.push({x: i, y: 0});  
  42.                     }  
  43.                 }  
  44.   
  45.                 //membuat makanan  
  46.                 function create_food()  
  47.                 {  
  48.                     food = {  
  49.                         x: Math.round(Math.random() * (w - cw) / cw),  
  50.                         y: Math.round(Math.random() * (h - cw) / cw),  
  51.                     };  
  52.                 }  
  53.   
  54.                 //Mewarnai tubuh ular  
  55.                 function paint()  
  56.                 {  
  57.                     ctx.fillStyle = "white";  
  58.                     ctx.fillRect(0, 0, w, h);  
  59.                     ctx.strokeStyle = "black";  
  60.                     ctx.strokeRect(0, 0, w, h);  
  61.   
  62.                     //Membuat pergerakan untuk ular.  
  63.                     var nx = snake_array[0].x;  
  64.                     var ny = snake_array[0].y;  
  65.                     if (d == "right")  
  66.                         nx++;  
  67.                     else if (d == "left")  
  68.                         nx--;  
  69.                     else if (d == "up")  
  70.                         ny--;  
  71.                     else if (d == "down")  
  72.                         ny++;  
  73.                       
  74.                     //Cek tabakan tembok  
  75.                     if (nx == -1 || nx == w / cw || ny == -1 || ny == h / cw || check_collision(nx, ny, snake_array))  
  76.                     {  
  77.                         //restart game  
  78.                         init();  
  79.                         return;  
  80.                     }  
  81.                       
  82.                     //Cek tabrakan dengan makanan  
  83.                     if (nx == food.x && ny == food.y)  
  84.                     {  
  85.                         var tail = {x: nx, y: ny};  
  86.                         score++;  
  87.                         //membuat makanan baru  
  88.                         create_food();  
  89.                     }  
  90.                     else  
  91.                     {  
  92.                         var tail = snake_array.pop();   
  93.                         tail.x = nx;  
  94.                         tail.y = ny;  
  95.                     }  
  96.   
  97.                     snake_array.unshift(tail);   
  98.   
  99.                     for (var i = 0; i < snake_array.length; i++)  
  100.                     {  
  101.                         var c = snake_array[i];  
  102.                         paint_cell(c.x, c.y);  
  103.                     }  
  104.   
  105.                     //Mewarnai makanan  
  106.                     paint_cell(food.x, food.y);  
  107.                     //Mewarnai score game  
  108.                     var score_text = "Score: " + score;  
  109.                     ctx.fillText(score_text, 5, h - 5);  
  110.                 }  
  111.   
  112.                 function paint_cell(x, y)  
  113.                 {  
  114.                     ctx.fillStyle = "blue";  
  115.                     ctx.fillRect(x * cw, y * cw, cw, cw);  
  116.                     ctx.strokeStyle = "white";  
  117.                     ctx.strokeRect(x * cw, y * cw, cw, cw);  
  118.                 }  
  119.   
  120.                 function check_collision(x, y, array)  
  121.                 {  
  122.                     for (var i = 0; i < array.length; i++)  
  123.                     {  
  124.                         if (array[i].x == x && array[i].y == y)  
  125.                             return true;  
  126.                     }  
  127.                     return false;  
  128.                 }  
  129.   
  130.                 //Keyboard control ular  
  131.                 $(document).keydown(function(e) {  
  132.                     var key = e.which;  
  133.                     if (key == "37" && d != "right")  
  134.                         d = "left";  
  135.                     else if (key == "38" && d != "down")  
  136.                         d = "up";  
  137.                     else if (key == "39" && d != "left")  
  138.                         d = "right";  
  139.                     else if (key == "40" && d != "up")  
  140.                         d = "down";  
  141.                 })  
  142.             })  
  143.   
  144.         </script>  
  145.     </head>  
  146.     <body>  
  147.         <!-- HTML5 canvas untuk lokasi game -->  
  148.         <canvas id="canvas" width="450" height="450"></canvas>         
  149.     </body>  
  150. </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.
Diposkan oleh Jin Toples di 4/05/2014 11:15:00 AM 0 komentar
Label: HTML , Java Script , JQUERY
Terima Kasih Telah Mengunjungi Blog Sederhana Ini.

2 komentar: