-->
KOMPUTER67
Lebih dari sekedar belajar !
/ / Cara Membuat Game Flappy Bird Dengan Javascript (Canvas HTML)

Cara Membuat Game Flappy Bird Dengan Javascript (Canvas HTML)

Edit



Siapa sih yang gak tau game "Flappy Bird" ? Game yang simple tapi seru ! Ya.. game flappy bird ini memang sangat simpel se simpel2nya, tapi sangatlah seru dimainkan. Oleh sebab itu banyak orang yang masih belajar membuat game ingin memulai belajarnya dengan membuat game sederhana mirip flappy bird. Apakah itu Anda ? Kalau iya, maka Anda sangat tepat membaca artikel ini !

Canvas HTML adalah salah satu element HTML yang paling mudah digunakan untuk membuat animasi / game. Karena untuk mengotak atiknya juga cukup mudah yaitu menggunakan javascript. Jadi inti nya, kita cukup buat HTML disertai element canvas, lalu kita tinggal otak atik canvas tersebut menggunakan javascript.

Bagi kamu yang sudah tidak sabar dan ingin melihat source codenya bisa langsung 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 jika 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 menu
  {
   vy = -10;
  }
 </script>
</body>

</html>

Jika kamu mau offline, kamu bisa download dulu gambar burungnya : 


Gambar Burung -&gt; 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 kamu yang ingin belajar cara pembuatannya mulai dari 0 pembuatan game mirip flappy bird ini, maka kamu bisa melihat langkah-langkah pembuatannya dibawah ini
Oke , langsung 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 adalah kode 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 kode javascript dengan cara menambahkan tag . Didalam tag tersebut kita membuat variabel x dan y. Dimana x dan y merepresentasikan koordinat dari burung. Sedangkan variabel vy merepresentasikan kecepatan vertical burung. 

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

 Setinterval adalah perintah untuk menjalankan fungsi tertentu dengan interval tertentu. Pada kode 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 membuat 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 kode awal, memang canvas harus dihapus dulu, agar tidak tabrakan. Kalau tidak percaya, bisa Anda coba sendiri jalankan kode tersebut tanpa ctx.clearRect. Setelah itu, kita membuat image dan kita menggambarkannya di canvas dengan koordinat x dan y yaitu koordinat burung itu sendiri. 

 Lalu variabel vy ditambah 1, karena angka 1 dianggap sebagai gravitasi. Sehingga kecepatan akan selalu bertambah 1. Lalu koordinat y akan selalu ditambah dengan kecepatan.Sedangkan untuk if(y&gt;400) artinya pada saat burung sudah sampai 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 membuat variabel pipa yaitu array 2 dimensi dengan dimensi pertama merepresentasikan index pipa tersebut (dalam kasus ini kita akan membuat 5 pipa), sedangkan dimensi kedua merepresentasikan x dan y pipa tersebut. ketinggian pipa akan dirandom dari 50 sampai 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, karena pada awal permainan tidak mungkin pipa langsung muncul, pasti pipa akan muncul perlahan dari kanan. Untuk lebih jelas bisa lihat gambar berikut :


Nah pertanyaannya kok pipanya berbentuk titik ? Nah jawabannya karena kita membuat 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 membuat pipa yang berada diatas dan dibawah. Kita juga sudah menentukan jarak antara pipa atas dan pipa bawah yaitu 150, bisa Anda lihat di kode diatas. (ctx.fillRect(pipa[i][0],pipa[i][1] + 150, 50, 250 - pipa[i][1]); //pipa bawah) .Lihat analoginya seperti 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. Jadi inti dari tambahan kode diatas adalah 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 bisa dilihat digambar berikut :





7. Cek tabrakan 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 jika 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 tambahan diatas adalah kode untuk mengecek apakah ada tabrakan antara burung dan pipa atau tidak. Jika ada, maka akan memunculkan pesan "Anda kalah !"

8. Tambahkan event click pada mouse dan batasan bawah agar 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 jika 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 menu

  {

   vy = -10;


    

  }

 </script>

</body>

</html>

Penjelasan : Jadi kita akan menambahkan event pada mouse dimana saat mouse di klik maka vy = -10 yang artinya kecepatannya dibuat -10 yang membuat burung tersebut bisa naik lagi.

9. Memberi pause pada awal permainan dan saat 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 jika 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 menu

  {

   permainandimulai = true;

   vy = -10;



   

  }

 </script>

</body>

</html>

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

Nah kode diatas adalah kode akhirnya. Jika Anda penasaran, Anda bisa melihat secara langsung game tersebut dibawah ini :

Flappy Bird Dengan Canvas




Walaupun masih simple dan belum seperti flappy bird beneran, tapi Anda bisa improvisasi sendiri dari kode yang saya beriktan diatas. Misal dikasi gambar, atau diubah warnanya, dikasi background, dikasi score, dll. Semoga bermanfaat untuk Anda belajar..

INGIN LIVE CHAT ? INGIN TANYA JAWAB GRATIS ? YUK LANGSUNG SAJA CHAT DENGAN KAMI DI FANSPAGE KOMPUTER67

    Blogger Comment
    Facebook Comment

0 komentar :

Post a Comment

Subscribe to: Post Comments ( Atom )