Cara menggunakan javascript games

Question

Table of Contents Show

SOURCE CODE FULL FLAPPY BIRD
Yuk Belajar Membuat Dari Nol !
1. Membuat HTML disertai element Canvas
2. Membuat variabel untuk menyimpan koordinat burung, kecepatan burung, dan canvas.
3. Membuat efek gravitasi sehingga membuat variabel y akan terus menurun dan sekalian memberi gambar burung.
4. Membuat pipa dalam bentuk array
5. Mewarnai pipa
6. Menggerakan Pipa
7. Cek tabrakan dengan burung
8. Tambahkan event click pada mouse dan batasan bawah agar burung tidak jatuh kebawah terus menerus
9. Memberi pause pada awal permainan dan saat selesai permainan
Flappy Bird Dengan Canvas
Apakah JavaScript bisa buat game?
Apa saja yang bisa dilakukan dengan JavaScript?
Bagaimana game itu bisa dibuat?

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 -> 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>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..

Apakah JavaScript bisa buat game?

Tidak hanya untuk membuat website saja, tetapi JavaScript juga dapat digunakan untuk membangun server, aplikasi, atau bahkan game.

Apa saja yang bisa dilakukan dengan JavaScript?

Apa kegunaan JavaScript?.

Pembaruan konten secara dinamis. Anda dapat menggunakan fungsi JavaScript untuk membuat fitur interaktif yang memungkinkan pengguna situs web Anda memperbarui kontennya secara dinamis. ... .

Pengembangan aplikasi web dan seluler. ... .

Pengembangan aplikasi sisi server. ... .

Pengembangan game..