AI game creator

Click here for free DL of the app version that can save data.

No:43108

←

Prev Next

→

Flappy bird
Developer User19095｜Date and time 24/2/14 9:35:50
Build time 13.504 sec｜Game capacity 3.13KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<title>Flappy Bird</title>
	<style>
		canvas {
			border:1px solid #000;
			background-color: #8ED6FF;
		}
	</style>
</head>
<body>
	<script>
		// Configurações do jogo
		var canvas = document.createElement("canvas");
		var ctx = canvas.getContext("2d");
		canvas.width = 800;
		canvas.height = 600;
		document.body.appendChild(canvas);

// Pictogramas
		var fundo = new Image();
		fundo.src = "https://i.imgur.com/NuKHR20.png";

var jogador = new Image();
		jogador.src = "https://i.imgur.com/jLv045L.png";

var obstaculoCima = new Image();
		obstaculoCima.src = "https://i.imgur.com/fcpy9b3.png";

var obstaculoBaixo = new Image();
		obstaculoBaixo.src = "https://i.imgur.com/TyDT0Gx.png";

// Variáveis do jogo
		var score = 0;
		var gravidade = 0.15;
		var pulo = 4.6;
		var gameOver = false;

// Objeto jogador
		var bird = {
			x: 80,
			y: 250,
			gravidade: gravidade,
			velocidade: 0,

atualiza: function() {
				this.velocidade += this.gravidade;
				this.y += this.velocidade;
			},
			pula: function() {
				if (!gameOver) {
					this.velocidade = -pulo;
				}
			}
		};

// Obstáculos
		var obstaculos = [];

var obstaculo = {
			x: canvas.width,
			y: 0,
			largura: 80,
			altura: 0,
			espaco: 120,

atualiza: function() {
				this.x -= 2;

if (this.x + this.largura < 0) {
					obstaculos.shift();
					score++;
					obstaculos.push({
						x: canvas.width,
						y: Math.floor(Math.random() * 330) - 180
					});
				}

// Verifica colisões
				if (bird.x + bird.radius + 5 > this.x && bird.x - bird.radius < this.x + this.largura && (bird.y - bird.radius < this.y + this.altura || bird.y + bird.radius + 5 > this.y + this.altura + this.espaco)) {
					gameOver = true;
				}
			},

desenha: function() {
				ctx.fillStyle = "#FF0000";
				ctx.drawImage(obstaculoCima, this.x, this.y);
				ctx.drawImage(obstaculoBaixo, this.x, this.y + this.altura + this.espaco);
			}
		};

obstaculos.push({
			x: canvas.width,
			y: Math.floor(Math.random() * 330) - 180
		});

// Handlers
		document.addEventListener("keydown", function(event) {
			if (event.keyCode === 32 || event.keyCode === 38) {
				bird.pula();
			}
		});

document.addEventListener("touchstart", function() {
			bird.pula();
		});

// Funções de desenho e atualização do jogo
		function desenha() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.drawImage(fundo, 0, 0);
			ctx.drawImage(jogador, bird.x - 20, bird.y - 13);

for (var i = 0; i < obstaculos.length; i++) {
				obstaculos[i].desenha();
			}

ctx.fillStyle = "#000";
			ctx.font = "20px Verdana";
			ctx.fillText("Score: " + score, 10, 20);

if (gameOver) {
				ctx.fillStyle = "#000";
				ctx.font = "30px Verdana";
				ctx.fillText("Game Over!", canvas.width / 2 - 85, canvas.height / 2);
			}
		}

function atualiza() {
			bird.atualiza();

for (var i = 0; i < obstaculos.length; i++) {
				obstaculos[i].atualiza();
			}
		}

function loop() {
			atualiza();
			desenha();

if (!gameOver) {
				requestAnimationFrame(loop);
			}
		}

loop();
	</script>
</body>
</html>