I am writing a flappy bushes and it is not yet possible to make ups and downs like in a real game, gravity is tied to a button

var Bird; var Pipes = []; var Score; function startGame() { Bird = new component(30, 30, "bird.png", 10, 120, "image"); Background = new component(480, 750, "background.png", 0, 0, "image"); Bird.gravity = 0; //for start Score = new component("30px", "cooper", "orange", 5, 40, "text"); GameArea.start(); } var GameArea = { canvas: document.createElement("canvas"), start: function() { this.canvas.width = 480; // GameArea width this.canvas.height = 380; // GameArea height this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes[0]); this.frameNo = 0; //start spase before bird this.interval = setInterval(updateGameArea, 20); //game speed }, clear: function() { this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); } } function component(width, height, color, x, y, type) { this.type = type; if (type == "image") { this.image = new Image(); this.image.src = color; } this.score = 0; this.width = width; // width all components this.height = height; // height all components this.speedY = 0; //bird speedY this.x = x; // pipes layout x this.y = y; // pipes layout y this.gravity = 0; this.gravitySpeed = 0; this.update = function() { ctx = GameArea.context; if (type == "image") { ctx.drawImage(this.image, this.x, this.y, this.width, this.height); } else { ctx.fillStyle = color; ctx.fillRect(this.x, this.y, this.width, this.height); } if (this.type == "text") { //variable for graphic ctx.font = this.width + " " + this.height; ctx.fillStyle = color; ctx.fillText(this.text, this.x, this.y); } } this.newPos = function() { //manage bird altitude this.gravitySpeed = this.gravity; //this.gravitySpeed = Bird.News() ; this.y += this.speedY + this.gravitySpeed; this.hitBottom(); this.hitUpper(); } this.hitBottom = function() { //stop border down var rockbottom = GameArea.canvas.height - this.height; if (this.y > rockbottom) { this.y = rockbottom; this.gravitySpeed = 0; } } this.hitUpper = function() { //stop border up if (this.y <= 0) { this.y = 0; this.gravitySpeed = 0; } } this.crashWith = function(otherobj) { //crash with pipe var myleft = this.x; var myright = this.x + (this.width); var mytop = this.y; var mybottom = this.y + (this.height); var otherleft = otherobj.x; var otherright = otherobj.x + (otherobj.width); var othertop = otherobj.y; var otherbottom = otherobj.y + (otherobj.height); var crash = true; var DownBorder = GameArea.canvas.height - 1; var UpBorder = 0; if (((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) && ((mytop > UpBorder) && (mybottom < DownBorder))) { crash = false; } return crash; } } function updateGameArea() { var x, height, gap, minHeight, maxHeight, minGap, maxGap; for (i = 0; i < Pipes.length; i += 1) { //crashWith Pipes and border if (Bird.crashWith(Pipes[i])) { return; } } GameArea.clear(); Background.newPos(); Background.update(); GameArea.frameNo += 1; if (GameArea.frameNo == 1 || everyinterval(150)) { x = GameArea.canvas.width; minHeight = 20; maxHeight = 200; height = Math.floor(Math.random() * (maxHeight - minHeight + 1) + minHeight); minGap = 50; maxGap = 200; gap = Math.floor(Math.random() * (maxGap - minGap + 1) + minGap); Pipes.push(new component(20, height, "green", x, 0)); Pipes.push(new component(20, x - height - gap, "green", x, height + gap)); } for (i = 0; i < Pipes.length; i += 1) { Pipes[i].x += -1; Pipes[i].update(); } // + GameArea.frameNo; Score.text = "SCORE: " + GameArea.frameNo; Score.update(); Bird.newPos(); Bird.update(); } function everyinterval(n) { if ((GameArea.frameNo / n) % 1 == 0) { return true; } return false; } function Up(n) { Bird.gravity = n; } function News() { Bird.gravity = 0.1; } 
 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="main.js"></script> <meta charset="utf-8" /> <title>Flappy Bird</title> <style> canvas { border: 1px solid #111111; background-color: #00FAFF; } </style> </head> <body onload="startGame()"> <br> <button onmousedown="Up(-1.5)" onmouseup="Up(1.5)">Up</button> </body> </html>

    0