Cara Menciptakan Game Flappy Bird Dengan Javascript (Canvas Html)

By astagadragon Kamis, 22 Februari 2018 Add Comment Edit

Siapa sih yang gak tau game "Flappy Bird" ? Game yang simple tapi seru ! Ya.. game flappy bird ini memang sangat praktis se simpel2nya, tapi sangatlah seru dimainkan. Oleh alasannya yakni itu banyak orang yang masih berguru menciptakan game ingin memulai belajarnya dengan menciptakan game sederhana menyerupai flappy bird. Apakah itu Anda ? Kalau iya, maka Anda sangat sempurna membaca artikel ini !

Canvas HTML yakni salah satu element HTML yang paling gampang dipakai untuk menciptakan animasi / game. Karena untuk mengotak atiknya juga cukup gampang yaitu memakai j4vascript. Kaprikornus inti nya, kita cukup buat HTML disertai element canvas, kemudian kita tinggal otak atik canvas tersebut memakai j4vascript.

Bagi kau yang sudah tidak sabar dan ingin melihat source codenya dapat pribadi COPY PASTE source code ini :

SOURCE CODE FULL FLAPPY BIRD

 <html> <head>  <title> Flappy Bird - Komputer67</title> </head> <body>  <canvas width="400" height="400" id="canv">  </canvas>  <script>   var y = 200;   var x = 200;   var vy = 0;   var kecepatanpipa = 2;   var menang = true; window.addEventListener('click',kontrolmouse,false);    //MEMBUAT PIPA    //buat array pipa[x][ketinggian]    pipa = [    [400, Math.floor(Math.random() * 150) + 50, 0], //antara 50-200    [500, Math.floor(Math.random() * 150) + 50, 0],    [600, Math.floor(Math.random() * 150) + 50, 0],    [700, Math.floor(Math.random() * 150) + 50, 0],    [800, Math.floor(Math.random() * 150) + 50, 0]    ];    canv=document.getElementById("canv");   ctx=canv.getContext("2d");   setInterval(game, 1000/30);    function game(){    ctx.clearRect(0,0,canv.width,canv.height); //menghapus semua isi canvas    vy += 1;    y += vy;     var image = new Image();    image.src="https://i.imgur.com/tUFOHUP.png";    ctx.drawImage(image, x, y,40,40);     for(i = 0;i<5;i++)    {     //MEMBUAT PIPA     ctx.fillStyle="grey";     ctx.fillRect(pipa[i][0],0,50,pipa[i][1]); //pipa atas     ctx.fillStyle="grey";     ctx.fillRect(pipa[i][0],pipa[i][1] + 150, 50, 250 - pipa[i][1]); //pipa bawah      //cek kalau burung terkena pipa     if(pipa[i][0] < 240 && pipa[i][0] > 160 && (pipa[i][1] > y || pipa[i][1] + 150 <= y + 30))     {      alert("Burung terkena pipa.. ohhh ! Anda kalah.. !");     }      //MENYETTING KOORDINAT X PADA PIPA     if(pipa[i][0] > -50) //jika masih terlihat di map     {      pipa[i][0] -= kecepatanpipa;     }     else if(pipa[i][0] == -50)  //jika sudah tidka terlihat, maka pindah pipa ke kanan     {      //pindah posisi      pipa[i][0] = 450;     }    }     if(y > 400)    {     vy = -10    }   }    function kontrolmouse(evt) //pemilihan sajian   {    vy = -10;   }  </script> </body>  </html>

Jika kau mau offline, kau dapat d0wnl0ad dulu gambar burungnya :

Gambar Burung -> DOWNLOAD DISINI
Lalu ganti url : https://i.imgur.com/tUFOHUP.png menjadi blue_life.png tepatnya pada line 38

Yuk Belajar Membuat Dari Nol !

Bagi kau yang ingin berguru cara pembuatannya mulai dari 0 pembuatan game menyerupai flappy bird ini, maka kau dapat melihat langkah-langkah pembuatannya dibawah ini
Oke , pribadi ngoding aja yuk !

1. Membuat HTML disertai element Canvas

 <!DOCTYPE html> <html> <head>   <title> Flappy Bird - Komputer67</title> </head> <body>   <canvas width="400" height="400" id="canv">  </canvas>  <script>  </script> </body> </html>

Penjelasan : Kode diatas yakni isyarat awal HTML dimana didalam body ada element canvas yang akan kita gunakan sebagai 'kanvas' game kita.

2. Membuat variabel untuk menyimpan koordinat burung, kecepatan burung, dan canvas.

 <!DOCTYPE html>  <html>  <head>   <title> Flappy Bird - Komputer67</title>  </head>  <body>   <canvas width="400" height="400" id="canv">   </canvas>   <script>    var y = 200;    var x = 200;    var vy = 0;    var kecepatanpipa = 2;    var menang = true;        </script>  </body>  </html>

Penjelasan : Sekarang kita tambahkan isyarat j4vascript dengan cara menambahkan tag . Didalam tag tersebut kita menciptakan variabel x dan y. Dimana x dan y merepresentasikan koordinat dari burung. Sedangkan variabel vy merepresentasikan kecepatan vertical burung.

Setelah itu kita menciptakan variabel kecepatanpipa untuk merepresentasikan kecepatan pipa dan variabel menang sebagai penanda bahwa pemain belum kalah. Lalu kita menciptakan variabel global canv dan ctx yang fungsinya biar kita dapat mengotak atik canvas dan memberi gambar didalamnya.

Setinterval yakni perintah untuk menjalankan fungsi tertentu dengan interval tertentu. Pada isyarat diatas artinya kita menjalankan fungsi game dengan interval 1000/30. (kalau gak salah 1000/30 artinya dalam 1 detik, fungsi tersebut dipanggil sebanyak 30x)

3. Membuat efek gravitasi sehingga menciptakan variabel y akan terus menurun dan sekalian memberi gambar burung.

 <!DOCTYPE html>  <html>  <head>   <title> Flappy Bird - Komputer67</title>  </head>  <body>   <canvas width="400" height="400" id="canv">   </canvas>   <script>    var y = 200;    var x = 200;    var vy = 0;    var kecepatanpipa = 2;    var menang = true;          canv=document.getElementById("canv");    ctx=canv.getContext("2d");    setInterval(game, 1000/30);      function game(){     ctx.clearRect(0,0,canv.width,canv.height); //menghapus semua isi canvas          vy += 1;     y += vy;       var image = new Image();     image.src="https://i.imgur.com/tUFOHUP.png";     ctx.drawImage(image, x, y,40,40);    }         </script>  </body>  </html>

Penjelasan : ctx.clearRect berfungsi untuk menghapus semua isi canvas. Pada isyarat awal, memang canvas harus dihapus dulu, biar tidak tabrakan. Kalau tidak percaya, dapat Anda coba sendiri jalankan isyarat tersebut tanpa ctx.clearRect. Setelah itu, kita menciptakan image dan kita menggambarkannya di canvas dengan koordinat x dan y yaitu koordinat burung itu sendiri.

Lalu variabel vy ditambah 1, lantaran angka 1 dianggap sebagai gravitasi. Sehingga kecepatan akan selalu bertambah 1. Lalu koordinat y akan selalu ditambah dengan kecepatan.Sedangkan untuk if(y>400) artinya pada ketika burung sudah hingga paling bawah, maka vy = -10 artinya kecepatan akan diset menjadi -10. Bisa Anda lihat sendiri perbedaannya.

4. Membuat pipa dalam bentuk array

 <!DOCTYPE html>  <html>  <head>   <title> Flappy Bird - Komputer67</title>  </head>  <body>   <canvas width="400" height="400" id="canv">   </canvas>   <script>    var y = 200;    var x = 200;    var vy = 0;    var kecepatanpipa = 2;    var menang = true;            //MEMBUAT PIPA     //buat array pipa[x][ketinggian]     pipa = [     [400, Math.floor(Math.random() * 150) + 50, 0], //antara 50-200     [500, Math.floor(Math.random() * 150) + 50, 0],     [600, Math.floor(Math.random() * 150) + 50, 0],     [700, Math.floor(Math.random() * 150) + 50, 0],     [800, Math.floor(Math.random() * 150) + 50, 0]     ];      canv=document.getElementById("canv");    ctx=canv.getContext("2d");    setInterval(game, 1000/30);      function game(){     ctx.clearRect(0,0,canv.width,canv.height); //menghapus semua isi canvas          vy += 1;     y += vy;       var image = new Image();     image.src="https://i.imgur.com/tUFOHUP.png";     ctx.drawImage(image, x, y,40,40);                }         </script>  </body>  </html>

Penjelasan : kali ini kita menciptakan variabel pipa yaitu array 2 dimensi dengan dimensi pertama merepresentasikan index pipa tersebut (dalam perkara ini kita akan menciptakan 5 pipa), sedangkan dimensi kedua merepresentasikan x dan y pipa tersebut. ketinggian pipa akan dirandom dari 50 hingga 200.
Apabila Anda jeli, maka Anda akan melihat x pada pipa tersebut dimuali dari 400, 500, 600, dst. Padahal ukuran canvas kita saja sudah 400, tapi kok koordinat x pada pipa pertama malah di set 400, dst ? Jawabannya, lantaran pada awal permainan mustahil pipa pribadi muncul, niscaya pipa akan muncul perlahan dari kanan. Untuk lebih terang dapat lihat gambar berikut :

Nah pertanyaannya kok pipanya berbentuk titik ? Nah jawabannya lantaran kita menciptakan array cukup dengan koordinat x dan y saja. Untuk sementara tangkap saja dulu, nanti Anda akan mengerti sendiri.

5. Mewarnai pipa

 <!DOCTYPE html>  <html>  <head>   <title> Flappy Bird - Komputer67</title>  </head>  <body>   <canvas width="400" height="400" id="canv">   </canvas>   <script>    var y = 200;    var x = 200;    var vy = 0;    var kecepatanpipa = 2;    var menang = true;            //MEMBUAT PIPA     //buat array pipa[x][ketinggian]     pipa = [     [400, Math.floor(Math.random() * 150) + 50, 0], //antara 50-200     [500, Math.floor(Math.random() * 150) + 50, 0],     [600, Math.floor(Math.random() * 150) + 50, 0],     [700, Math.floor(Math.random() * 150) + 50, 0],     [800, Math.floor(Math.random() * 150) + 50, 0]     ];      canv=document.getElementById("canv");    ctx=canv.getContext("2d");    setInterval(game, 1000/30);      function game(){     ctx.clearRect(0,0,canv.width,canv.height); //menghapus semua isi canvas          vy += 1;     y += vy;       var image = new Image();     image.src="https://i.imgur.com/tUFOHUP.png";     ctx.drawImage(image, x, y,40,40);       for(i = 0;i<5;i++)     {            //MEMBUAT PIPA      ctx.fillStyle="grey";      ctx.fillRect(pipa[i][0],0,50,pipa[i][1]); //pipa atas      ctx.fillStyle="grey";      ctx.fillRect(pipa[i][0],pipa[i][1] + 150, 50, 250 - pipa[i][1]); //pipa bawah             }                     }         </script>  </body>  </html>

pipa tersebut. dari koordinat tadi, kita akan menciptakan pipa yang berada diatas dan dibawah. Kita juga sudah memilih jarak antara pipa atas dan pipa bawah yaitu 150, dapat Anda lihat di isyarat diatas. (ctx.fillRect(pipa[i][0],pipa[i][1] + 150, 50, 250 - pipa[i][1]); //pipa bawah) .Lihat analoginya menyerupai ini :

6. Menggerakan Pipa

 <!DOCTYPE html>  <html>  <head>   <title> Flappy Bird - Komputer67</title>  </head>  <body>   <canvas width="400" height="400" id="canv">   </canvas>   <script>    var y = 200;    var x = 200;    var vy = 0;    var kecepatanpipa = 2;    var menang = true;            //MEMBUAT PIPA     //buat array pipa[x][ketinggian]     pipa = [     [400, Math.floor(Math.random() * 150) + 50, 0], //antara 50-200     [500, Math.floor(Math.random() * 150) + 50, 0],     [600, Math.floor(Math.random() * 150) + 50, 0],     [700, Math.floor(Math.random() * 150) + 50, 0],     [800, Math.floor(Math.random() * 150) + 50, 0]     ];      canv=document.getElementById("canv");    ctx=canv.getContext("2d");    setInterval(game, 1000/30);      function game(){     ctx.clearRect(0,0,canv.width,canv.height); //menghapus semua isi canvas          vy += 1;     y += vy;       var image = new Image();     image.src="https://i.imgur.com/tUFOHUP.png";     ctx.drawImage(image, x, y,40,40);       for(i = 0;i<5;i++)     {            //MEMBUAT PIPA      ctx.fillStyle="grey";      ctx.fillRect(pipa[i][0],0,50,pipa[i][1]); //pipa atas      ctx.fillStyle="grey";      ctx.fillRect(pipa[i][0],pipa[i][1] + 150, 50, 250 - pipa[i][1]); //pipa bawah                //MENYETTING KOORDINAT X PADA PIPA      if(pipa[i][0] > -50) //jika masih terlihat di map      {       pipa[i][0] -= kecepatanpipa;      }      else if(pipa[i][0] == -50)  //jika sudah tidka terlihat, maka pindah pipa ke kanan      {                //pindah posisi       pipa[i][0] = 450;      }     }                     }         </script>  </body>  </html>

Penjelasan : Nah, ini cukup rumit, tapi hampir selesai. Kaprikornus inti dari pemanis isyarat diatas yakni kita akan menggerakan semua pipa kekiri. Namun apabila pipa yang paling kiri ternyata sudah tidak terlihat, maka koordinat pipa tersebut akan dipindah ke kanan. Analoginya dapat dilihat digambar berikut :

7. Cek ukiran dengan burung

 <!DOCTYPE html>  <html>  <head>   <title> Flappy Bird - Komputer67</title>  </head>  <body>   <canvas width="400" height="400" id="canv">   </canvas>   <script>    var y = 200;    var x = 200;    var vy = 0;    var kecepatanpipa = 2;    var menang = true;            //MEMBUAT PIPA     //buat array pipa[x][ketinggian]     pipa = [     [400, Math.floor(Math.random() * 150) + 50, 0], //antara 50-200     [500, Math.floor(Math.random() * 150) + 50, 0],     [600, Math.floor(Math.random() * 150) + 50, 0],     [700, Math.floor(Math.random() * 150) + 50, 0],     [800, Math.floor(Math.random() * 150) + 50, 0]     ];      canv=document.getElementById("canv");    ctx=canv.getContext("2d");    setInterval(game, 1000/30);      function game(){     ctx.clearRect(0,0,canv.width,canv.height); //menghapus semua isi canvas          vy += 1;     y += vy;       var image = new Image();     image.src="https://i.imgur.com/tUFOHUP.png";     ctx.drawImage(image, x, y,40,40);       for(i = 0;i<5;i++)     {            //MEMBUAT PIPA      ctx.fillStyle="grey";      ctx.fillRect(pipa[i][0],0,50,pipa[i][1]); //pipa atas      ctx.fillStyle="grey";      ctx.fillRect(pipa[i][0],pipa[i][1] + 150, 50, 250 - pipa[i][1]); //pipa bawah        //cek kalau burung terkena pipa      if(pipa[i][0] < 240 && pipa[i][0] > 160 && (pipa[i][1] > y || pipa[i][1] + 150 <= y + 30))      {              alert("Burung terkena pipa.. ohhh ! Anda kalah.. !");             }        //MENYETTING KOORDINAT X PADA PIPA      if(pipa[i][0] > -50) //jika masih terlihat di map      {       pipa[i][0] -= kecepatanpipa;      }      else if(pipa[i][0] == -50)  //jika sudah tidka terlihat, maka pindah pipa ke kanan      {                //pindah posisi       pipa[i][0] = 450;      }     }                     }         </script>  </body>  </html>

Penjelasan : Kode pemanis diatas yakni isyarat untuk mengecek apakah ada ukiran antara burung dan pipa atau tidak. Jika ada, maka akan memunculkan pesan "Anda kalah !"

8. Tambahkan event click pada mouse dan batasan bawah biar burung tidak jatuh kebawah terus menerus

 <!DOCTYPE html>  <html>  <head>   <title> Flappy Bird - Komputer67</title>  </head>  <body>   <canvas width="400" height="400" id="canv">   </canvas>   <script>    var y = 200;    var x = 200;    var vy = 0;    var kecepatanpipa = 2;    var menang = true;    window.addEventListener('click',kontrolmouse,false);        //MEMBUAT PIPA     //buat array pipa[x][ketinggian]     pipa = [     [400, Math.floor(Math.random() * 150) + 50, 0], //antara 50-200     [500, Math.floor(Math.random() * 150) + 50, 0],     [600, Math.floor(Math.random() * 150) + 50, 0],     [700, Math.floor(Math.random() * 150) + 50, 0],     [800, Math.floor(Math.random() * 150) + 50, 0]     ];      canv=document.getElementById("canv");    ctx=canv.getContext("2d");    setInterval(game, 1000/30);      function game(){     ctx.clearRect(0,0,canv.width,canv.height); //menghapus semua isi canvas          vy += 1;     y += vy;       var image = new Image();     image.src="https://i.imgur.com/tUFOHUP.png";     ctx.drawImage(image, x, y,40,40);       for(i = 0;i<5;i++)     {            //MEMBUAT PIPA      ctx.fillStyle="grey";      ctx.fillRect(pipa[i][0],0,50,pipa[i][1]); //pipa atas      ctx.fillStyle="grey";      ctx.fillRect(pipa[i][0],pipa[i][1] + 150, 50, 250 - pipa[i][1]); //pipa bawah        //cek kalau burung terkena pipa      if(pipa[i][0] < 240 && pipa[i][0] > 160 && (pipa[i][1] > y || pipa[i][1] + 150 <= y + 30))      {              alert("Burung terkena pipa.. ohhh ! Anda kalah.. !");             }        //MENYETTING KOORDINAT X PADA PIPA      if(pipa[i][0] > -50) //jika masih terlihat di map      {       pipa[i][0] -= kecepatanpipa;      }      else if(pipa[i][0] == -50)  //jika sudah tidka terlihat, maka pindah pipa ke kanan      {                //pindah posisi       pipa[i][0] = 450;      }     }       if(y > 400)     {            vy = -10     }              }      function kontrolmouse(evt) //pemilihan sajian    {     vy = -10;           }   </script>  </body>  </html>

Penjelasan : Kaprikornus kita akan menambahkan event pada mouse dimana ketika mouse di klik maka vy = -10 yang artinya kecepatannya dibentuk -10 yang menciptakan burung tersebut dapat naik lagi.

9. Memberi pause pada awal permainan dan ketika selesai permainan

 <!DOCTYPE html>  <html>  <head>   <title> Flappy Bird - Komputer67</title>  </head>  <body>   <canvas width="400" height="400" id="canv">   </canvas>   <script>    var y = 200;    var x = 200;    var vy = 0;    var kecepatanpipa = 2;    var menang = true;    var permainandimulai = false;    window.addEventListener('click',kontrolmouse,false);        //MEMBUAT PIPA     //buat array pipa[x][ketinggian]     pipa = [     [400, Math.floor(Math.random() * 150) + 50, 0], //antara 50-200     [500, Math.floor(Math.random() * 150) + 50, 0],     [600, Math.floor(Math.random() * 150) + 50, 0],     [700, Math.floor(Math.random() * 150) + 50, 0],     [800, Math.floor(Math.random() * 150) + 50, 0]     ];      canv=document.getElementById("canv");    ctx=canv.getContext("2d");    var intv = setInterval(game, 1000/30);      function game(){     ctx.clearRect(0,0,canv.width,canv.height); //menghapus semua isi canvas          vy += 1;     y += vy;       var image = new Image();     image.src="https://i.imgur.com/tUFOHUP.png";     ctx.drawImage(image, x, y,40,40);     if(permainandimulai)     {      for(i = 0;i<5;i++)      {              //MEMBUAT PIPA       ctx.fillStyle="grey";       ctx.fillRect(pipa[i][0],0,50,pipa[i][1]); //pipa atas       ctx.fillStyle="grey";       ctx.fillRect(pipa[i][0],pipa[i][1] + 150, 50, 250 - pipa[i][1]); //pipa bawah         //cek kalau burung terkena pipa       if(pipa[i][0] < 240 && pipa[i][0] > 160 && (pipa[i][1] > y || pipa[i][1] + 150 <= y + 30))       {                alert("Burung terkena pipa.. ohhh ! Anda kalah.. !");                                                  clearInterval(intv);                 }         //MENYETTING KOORDINAT X PADA PIPA       if(pipa[i][0] > -50) //jika masih terlihat di map       {        pipa[i][0] -= kecepatanpipa;       }       else if(pipa[i][0] == -50)  //jika sudah tidka terlihat, maka pindah pipa ke kanan       {                  //pindah posisi        pipa[i][0] = 450;       }      }        if(y > 400)      {              vy = -10      }           }     else     {      vy = 0;      y = 200;     }              }      function kontrolmouse(evt) //pemilihan sajian    {     permainandimulai = true;     vy = -10;           }   </script>  </body>  </html>

Penjelasan : Kode tersebut hanyalah menciptakan variabel 'permainandimulai' dan intinya, permainan akan dimulai ketika variabel tersebut bernilai true. Agar variable tersebut bernilai true, maka mouse harus di klik terlebih dahulu.

Nah isyarat diatas yakni isyarat akhirnya. Jika Anda penasaran, Anda dapat melihat secara pribadi game tersebut dibawah ini :

Flappy Bird Dengan Canvas

Walaupun masih simple dan belum menyerupai flappy bird beneran, tapi Anda dapat improvisasi sendiri dari isyarat yang aku beriktan diatas. Misal dikasi gambar, atau diubah warnanya, dikasi background, dikasi score, dll. Semoga bermanfaat untuk Anda belajar..
Sumber http://komputer67.blogspot.com

iklan