Cara Menciptakan 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 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> 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> 
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 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> 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
0 Response to "Cara Menciptakan Game Flappy Bird Dengan Javascript (Canvas Html)"
Posting Komentar