const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); let bird = { x: 50, y: canvas.height / 2, radius: 20, velocity: 0, gravity: 1, jump: -20, draw: function() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = '#FF5733'; ctx.fill(); ctx.closePath(); }, update: function() { this.velocity += this.gravity; this.y += this.velocity; if (this.y + this.radius > canvas.height) { this.y = canvas.height - this.radius; this.velocity = 0; } if (this.y - this.radius < 0) { this.y = this.radius; this.velocity = 0; } }, flap: function() { this.velocity = this.jump; } }; let pipes = { position: [], top: { height: 200, width: 50, color: '#2ECC71' }, bottom: { height: 200, width: 50, color: '#2ECC71' }, gap: 100, draw: function() { for (let i = 0; i < this.position.length; i++) { let p = this.position[i]; let topY = p.y; let bottomY = p.y + this.top.height + this.gap; ctx.fillStyle = this.top.color; ctx.fillRect(p.x, topY, this.top.width, this.top.height); ctx.fillStyle = this.bottom.color; ctx.fillRect(p.x, bottomY, this.bottom.width, this.bottom.height); } }, update: function() { if (this.position.length === 0) return; if (this.position[0].x + this.top.width < 0) { this.position.shift(); } }, add: function() { let min = 50; let max = canvas.height - this.top.height - this.gap - 50; let randomHeight = Math.floor(Math.random() * (max - min + 1) + min); this.position.push({ x: canvas.width, y: randomHeight }); }, collision: function() { for (let i = 0; i < this.position.length; i++) { let p = this.position[i]; let topPipe = { x: p.x, y: p.y, width: this.top.width, height: this.top.height }; let bottomPipe = { x: p.x, y: p.y + this.top.height + this.gap, width: this.bottom.width, height: this.bottom.height }; if ( bird.x + bird.radius > topPipe.x && bird.x - bird.radius < topPipe.x + topPipe.width && bird.y + bird.radius > topPipe.y && bird.y - bird.radius < topPipe.y + topPipe.height || bird.x + bird.radius > bottomPipe.x && bird.x - bird.radius < bottomPipe.x + bottomPipe.width && bird.y + bird.radius > bottomPipe.y && bird.y - bird.radius < bottomPipe.y + bottomPipe.height ) { return true; } } return false; } }; let score = { value: 0, draw: function() { ctx.fillStyle = '#000'; ctx.font = '20px Arial'; ctx.fillText('Score: ' + this.value, 10, 30); } }; function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); bird.draw(); pipes.draw(); score.draw(); } function update() { bird.update(); pipes.update(); if (pipes.position[0].x === canvas.width - pipes.top.width - 200) { pipes.add(); } if (pipes.collision()) { clearInterval(game); } for (let i = 0; i < pipes.position.length; i++) { if (pipes.position[i].x === bird.x) { score.value++; } } } function loop() { update(); draw(); } function start() { bird = { x: 50, y: canvas.height / 2, radius: 20, velocity: 0, gravity: 1, jump: -20, draw: function() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = '#FF5733'; ctx.fill(); ctx.closePath(); }, update: function() { this.velocity += this.gravity; this.y += this.velocity; if (this.y + this.radius > canvas.height) { this.y = canvas.height - this.radius; this.velocity = 0; } if (this.y - this.radius < 0) { this.y = this.radius; this.velocity = 0; } }, flap: function() { this.velocity = this.jump; } }; pipes = { position: [], top: { height: 200, width: 50, color: '#2ECC71' }, bottom: { height: 200, width: 50, color: '#2ECC71' }, gap: 100, draw: function() { for (let i = 0; i < this.position.length; i++) { let p = this.position[i]; let topY = p.y; let bottomY = p.y + this.top.height + this.gap; ctx.fillStyle = this.top.color; ctx.fillRect(p.x, topY, this.top.width, this.top.height); ctx.fillStyle = this.bottom.color; ctx.fillRect(p.x, bottomY, this.bottom.width, this.bottom.height); } }, update: function() { if (this.position.length === 0) return; if (this.position[0].x + this.top.width < 0) { this.position.shift(); } }, add: function() { let min = 50; let max = canvas.height - this.top.height - this.gap - 50; let randomHeight = Math.floor(Math.random() * (max - min + 1) + min); this.position.push({ x: canvas.width, y: randomHeight }); }, collision: function() { for (let i = 0; i < this.position.length; i++) { let p = this.position[i]; let topPipe = { x: p.x, y: p.y, width: this.top.width, height: this.top.height }; let bottomPipe = { x: p.x, y: p.y + this.top.height + this.gap, width: this.bottom.width, height: this.bottom.height }; if ( bird.x + bird.radius > topPipe.x && bird.x - bird.radius < topPipe.x + topPipe.width && bird.y + bird.radius > topPipe.y && bird.y - bird.radius < topPipe.y + topPipe.height || bird.x + bird.radius > bottomPipe.x && bird.x - bird.radius < bottomPipe.x + bottomPipe.width && bird.y + bird.radius > bottomPipe.y && bird.y - bird.radius < bottomPipe.y + bottomPipe.height ) { return true; } } return false; } }; score = { value: 0, draw: function() { ctx.fillStyle = '#000'; ctx.font = '20px Arial'; ctx.fillText('Score: ' + this.value, 10, 30); } }; pipes.add(); score.value = 0; game = setInterval(loop, 30); } document.addEventListener('keydown', function(event) { if (event.keyCode === 38) { bird.flap(); } }); start();

GPTgame

Sign up for free tokens!

A mobile game exactly like flappy bird

GPTgame