Cara Membuat Game Flappy Bird Dengan Java Script 2019
 |
https://www.abc.net.au |
Flappy Bird adalah sebuah game di android dan ios, karakter utama dari game ini adalah seeokor burung.
Cara Membuat Game Flappy Bird Dengan Java Script 2019
Tahap 1 : Buat sebuah file html lalu save dengan nama index.html dan masukan script dibawah :
<!DOCTYPE html>
<html>
<head>
<title>Flappy Bird using JS | by learnWD</title>
</head>
<body>
<h3>flappyBird by LearnWD</h3>
<canvas id="canvas" width="288" height="512"></canvas>
<script src="flappyBird.js"></script>
</body>
</html>
Tahap 2 : Buat sebuah file java script lalu save dengan nama flappyBird.js dan masukan script di bawah :
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
// load images
var bird = new Image();
var bg = new Image();
var fg = new Image();
var pipeNorth = new Image();
var pipeSouth = new Image();
bird.src = "images/bird.png";
bg.src = "images/bg.png";
fg.src = "images/fg.png";
pipeNorth.src = "images/pipeNorth.png";
pipeSouth.src = "images/pipeSouth.png";
// some variables
var gap = 85;
var constant;
var bX = 10;
var bY = 150;
var gravity = 1.5;
var score = 0;
// audio files
var fly = new Audio();
var scor = new Audio();
fly.src = "sounds/fly.mp3";
scor.src = "sounds/score.mp3";
// on key down
document.addEventListener("keydown",moveUp);
function moveUp(){
bY -= 25;
fly.play();
}
// pipe coordinates
var pipe = [];
pipe[0] = {
x : cvs.width,
y : 0
};
// draw images
function draw(){
ctx.drawImage(bg,0,0);
for(var i = 0; i < pipe.length; i++){
constant = pipeNorth.height+gap;
ctx.drawImage(pipeNorth,pipe[i].x,pipe[i].y);
ctx.drawImage(pipeSouth,pipe[i].x,pipe[i].y+constant);
pipe[i].x--;
if( pipe[i].x == 125 ){
pipe.push({
x : cvs.width,
y : Math.floor(Math.random()*pipeNorth.height)-pipeNorth.height
});
}
// detect collision
if( bX + bird.width >= pipe[i].x && bX <= pipe[i].x + pipeNorth.width && (bY <= pipe[i].y + pipeNorth.height || bY+bird.height >= pipe[i].y+constant) || bY + bird.height >= cvs.height - fg.height){
location.reload(); // reload the page
}
if(pipe[i].x == 5){
score++;
scor.play();
}
}
ctx.drawImage(fg,0,cvs.height - fg.height);
ctx.drawImage(bird,bX,bY);
bY += gravity;
ctx.fillStyle = "#000";
ctx.font = "20px Verdana";
ctx.fillText("Score : "+score,10,cvs.height-20);
requestAnimationFrame(draw);
}
draw();
Tahap 3 : Download file gambar dan suaranya dibawah, ekstrak letekan pada satu folder
Download
Hasilnya :
0 Response to "Cara Membuat Game Flappy Bird Dengan Java Script 2019"
Post a Comment