Cara Membuat Game Flappy Bird Dengan Javascript (Canvas HTML)
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>
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>
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>
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>
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..
0 Response to "Cara Membuat Game Flappy Bird Dengan Javascript (Canvas HTML)"
Post a Comment