AI game creator

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

No:31454

←

Prev Next

→

Flappy bird
Developer User13318｜Date and time 23/12/27 0:32:07
Build time 32.014 sec｜Game capacity 2.901KB｜

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;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="400" height="600"></canvas>
	<script>
		// Flappy Bird game JavaScript code
		
		// Get the canvas element and its context
		const canvas = document.getElementById("canvas");
		const context = canvas.getContext("2d");

// Set up game variables
		let birdX = 50;
		let birdY = canvas.height / 2;
		let birdRadius = 20;
		let gravity = 0.5;
		let velocity = 0;
		let isGameOver = false;
		let score = 0;

// Load bird image
		const birdImage = new Image();
		birdImage.src = "bird.png";

// Load pipe image
		const pipeImage = new Image();
		pipeImage.src = "pipe.png";

// Bird jump function
		function birdJump() {
			velocity = -10;
		}

// Pipe objects
		const pipes = [];
		pipes[0] = {
			x: canvas.width,
			y: 0
		};

// Game loop
		function gameLoop() {
			// Clear the canvas
			context.clearRect(0, 0, canvas.width, canvas.height);

if (!isGameOver) {
				// Bird movement
				velocity += gravity;
				birdY += velocity;

// Draw bird
				context.drawImage(birdImage, birdX - birdRadius, birdY - birdRadius, birdRadius * 2, birdRadius * 2);

// Draw pipes
				for (let i = 0; i < pipes.length; i++) {
					context.drawImage(pipeImage, pipes[i].x, pipes[i].y);
					pipes[i].x--;

// Check collision with bird
					if (birdX + birdRadius > pipes[i].x && birdX - birdRadius < pipes[i].x + pipeImage.width &&
						(birdY - birdRadius < pipes[i].y + pipeImage.height || birdY + birdRadius > pipes[i].y + pipeImage.height + 100)) {
						isGameOver = true;
					}

// Increment score if bird passes the pipes
					if (pipes[i].x == canvas.width / 2 - 10) {
						score++;
					}

// Check if pipe is off the screen
					if (pipes[i].x + pipeImage.width < 0) {
						pipes.splice(i, 1);
					}
				}

// Add new pipe
				if (frames % 100 === 0) {
					pipes.push({
						x: canvas.width,
						y: Math.floor(Math.random() * pipeImage.height) - pipeImage.height
					});
				}

// Keep bird within canvas bounds
				if (birdY + birdRadius > canvas.height || birdY - birdRadius < 0) {
					isGameOver = true;
				}

// Display score
				context.fillStyle = "#000";
				context.font = "20px Arial";
				context.fillText("Score: " + score, 10, 50);
			} else {
				// Game over screen
				context.fillStyle = "#000";
				context.font = "30px Arial";
				context.fillText("Game Over", canvas.width / 2 - 70, canvas.height / 2);
				context.fillText("Score: " + score, canvas.width / 2 - 50, canvas.height / 2 + 40);
			}

// Animation loop
			requestAnimationFrame(gameLoop);
		}

// Event listeners
		document.addEventListener("keydown", birdJump);
		document.addEventListener("click", birdJump);

// Start the game loop
		requestAnimationFrame(gameLoop);
	</script>
</body>
</html>