Upit | Learn about creating the game Flappy Bird

/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); var storage = LK.import("@upit/storage.v1"); /**** * Classes ****/ var Bird = Container.expand(function () { var self = Container.call(this); // Create bird body var birdBody = self.attachAsset('bird', { anchorX: 0.5, anchorY: 0.5 }); // Create bird wing var birdWing = self.attachAsset('birdWing', { anchorX: 0.3, anchorY: 0.5 }); birdWing.x = -10; birdWing.y = -5; // Create bird beak var birdBeak = self.attachAsset('birdBeak', { anchorX: 0, anchorY: 0.5 }); birdBeak.x = 25; birdBeak.y = -5; self.velocity = 0; self.gravity = 0.6; self.jumpStrength = -11; self.wingState = 0; // 0 = down, 1 = up self.lastY = 0; self.flap = function () { self.velocity = self.jumpStrength; LK.getSound('flap').play(); // Wing animation self.wingState = 1 - self.wingState; if (self.wingState === 1) { birdWing.y = -15; birdWing.scaleY = 0.8; } else { birdWing.y = -5; birdWing.scaleY = 1; } }; self.update = function () { // Store last position for collision detection self.lastY = self.y; self.velocity += self.gravity; self.y += self.velocity; // Rotate bird based on velocity for realistic flight if (self.velocity < -3) { birdBody.rotation = -0.4; } else if (self.velocity > 3) { birdBody.rotation = Math.min(self.velocity * 0.08, 1.2); } else { birdBody.rotation = self.velocity * 0.05; } // Wing flapping animation during flight if (LK.ticks % 8 === 0) { self.wingState = 1 - self.wingState; if (self.wingState === 1) { birdWing.y = -15; birdWing.scaleY = 0.8; } else { birdWing.y = -5; birdWing.scaleY = 1; } } }; return self; }); var Pipe = Container.expand(function (isTop, gapY) { var self = Container.call(this); var pipeGraphics = self.attachAsset('pipe', { anchorX: 0.5, anchorY: isTop ? 1 : 0 }); self.speed = -4; self.passed = false; self.isTop = isTop; self.gapY = gapY; // Fix pipe positioning to ensure proper gap and ground contact if (isTop) { // Top pipe: anchor at bottom (1), position at top edge of gap self.y = gapY - gapSize / 2; } else { // Bottom pipe: anchor at top (0), position at bottom edge of gap - ensure it touches ground self.y = gapY + gapSize / 2; // Ensure bottom pipe extends to ground level (2532 is ground surface) var pipeBottom = self.y + 800; // pipe height is 800 if (pipeBottom < 2532) { // Adjust position so pipe touches ground self.y = 2532 - 800; } } self.update = function () { self.x += self.speed; }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x87CEEB }); /**** * Game Code ****/ var bird; var pipes = []; var ground; var gameSpeed = 4; var gapSize = 500; // Further increased gap size for much easier gameplay var pipeSpacing = 500; // Increased spacing for better playability var nextPipeX = 2048; var gameStarted = false; var gameOver = false; var gameWaitingForRestart = false; var lastBirdY = 0; var highScore = storage.highScore || 0; // Create score display with better visibility var scoreTxt = new Text2('SKOR: 0', { size: 70, fill: 0xFFFFFF }); scoreTxt.anchor.set(0.5, 0); LK.gui.top.addChild(scoreTxt); scoreTxt.y = 80; // Add text stroke for better visibility scoreTxt.stroke = 0x000000; scoreTxt.strokeThickness = 4; // Create game over display elements with better visibility var gameOverTxt = new Text2('OYUN BİTTİ!', { size: 90, fill: 0xFF0000 }); gameOverTxt.anchor.set(0.5, 0.5); gameOverTxt.visible = false; gameOverTxt.stroke = 0xFFFFFF; gameOverTxt.strokeThickness = 5; LK.gui.center.addChild(gameOverTxt); var currentScoreTxt = new Text2('', { size: 60, fill: 0xFFFFFF }); currentScoreTxt.anchor.set(0.5, 0.5); currentScoreTxt.visible = false; currentScoreTxt.stroke = 0x000000; currentScoreTxt.strokeThickness = 3; LK.gui.center.addChild(currentScoreTxt); currentScoreTxt.y = 100; var highScoreTxt = new Text2('', { size: 60, fill: 0xFFD700 }); highScoreTxt.anchor.set(0.5, 0.5); highScoreTxt.visible = false; highScoreTxt.stroke = 0x000000; highScoreTxt.strokeThickness = 3; LK.gui.center.addChild(highScoreTxt); highScoreTxt.y = 180; // Create bird bird = game.addChild(new Bird()); bird.x = 400; bird.y = 1366; // Create ground ground = game.addChild(LK.getAsset('ground', { anchorX: 0, anchorY: 1 })); ground.x = 0; ground.y = 2732; function createPipePair() { // Ensure gap is positioned properly within screen bounds with better proportions // Account for pipe height (800px), gap size (500px), and ground position (2532) var minGapY = 600; // Higher minimum gap center position for better clearance var maxGapY = 1800; // Ensure bottom pipe can reach ground properly var gapY = minGapY + Math.random() * (maxGapY - minGapY); // Ensure the bottom pipe will touch the ground var bottomPipeTop = gapY + gapSize / 2; var bottomPipeBottom = bottomPipeTop + 800; if (bottomPipeBottom < 2532) { // Adjust gap position so bottom pipe touches ground var adjustment = 2532 - bottomPipeBottom; gapY += adjustment; } var topPipe = new Pipe(true, gapY); topPipe.x = nextPipeX; pipes.push(topPipe); game.addChild(topPipe); var bottomPipe = new Pipe(false, gapY); bottomPipe.x = nextPipeX; pipes.push(bottomPipe); game.addChild(bottomPipe); nextPipeX += pipeSpacing; } function resetGame() { // Reset bird bird.x = 400; bird.y = 1366; bird.velocity = 0; bird.lastY = bird.y; bird.wingState = 0; // Reset bird visual state bird.children[0].rotation = 0; // Reset body rotation bird.children[1].y = -5; // Reset wing position bird.children[1].scaleY = 1; // Reset wing scale // Clear pipes for (var i = pipes.length - 1; i >= 0; i--) { pipes[i].destroy(); } pipes = []; // Reset variables nextPipeX = 2048; gameStarted = false; gameOver = false; gameWaitingForRestart = false; lastBirdY = bird.y; lastFlapTime = 0; gameSpeed = 4; LK.setScore(0); scoreTxt.setText('SKOR: 0'); // Hide game over display elements gameOverTxt.visible = false; currentScoreTxt.visible = false; highScoreTxt.visible = false; // Create initial pipes createPipePair(); createPipePair(); } // Initialize first pipes createPipePair(); createPipePair(); function showGameOverScreen() { var currentScore = LK.getScore(); // Update high score if needed if (currentScore > highScore) { highScore = currentScore; storage.highScore = highScore; } // Show game over display gameOverTxt.visible = true; currentScoreTxt.setText('SKOR: ' + currentScore); currentScoreTxt.visible = true; highScoreTxt.setText('EN YÜKSEK SKOR: ' + highScore); highScoreTxt.visible = true; // Set waiting for restart state instead of auto-restart gameWaitingForRestart = true; } var lastFlapTime = 0; var flapCooldown = 100; // Minimum time between flaps in milliseconds game.down = function (x, y, obj) { // Handle restart after game over if (gameWaitingForRestart) { resetGame(); return; } if (gameOver) return; // Ignore clicks when game is over var currentTime = Date.now(); if (currentTime - lastFlapTime < flapCooldown) return; // Debounce rapid clicks if (!gameStarted) { gameStarted = true; } bird.flap(); lastFlapTime = currentTime; }; game.update = function () { if (!gameStarted || gameOver || gameWaitingForRestart) return; // Store last position for collision detection lastBirdY = bird.y; // Check if bird hits ground (immediate detection with proper hitbox) // Ground is positioned at y=2732 with height 200, so ground surface is at y=2532 if (bird.y + 30 >= 2532) { gameOver = true; showGameOverScreen(); return; } // Check if bird goes too high if (bird.y < 50) { gameOver = true; showGameOverScreen(); return; } // Check pipe collisions and scoring for (var i = pipes.length - 1; i >= 0; i--) { var pipe = pipes[i]; // Remove off-screen pipes if (pipe.x < -100) { pipe.destroy(); pipes.splice(i, 1); continue; } // Improved collision detection with proper hitbox var birdLeft = bird.x - 35; var birdRight = bird.x + 35; var birdTop = bird.y - 25; var birdBottom = bird.y + 25; var pipeLeft = pipe.x - 60; var pipeRight = pipe.x + 60; // Only check collision if bird is within pipe X range if (birdRight > pipeLeft && birdLeft < pipeRight) { // Check collision using correct pipe boundaries based on anchor if (pipe.isTop) { // Top pipe - anchored at bottom, extends upward from anchor point // Collision if bird hits the pipe (pipe extends from y position upward) if (birdTop <= pipe.y) { gameOver = true; showGameOverScreen(); return; } } else { // Bottom pipe - anchored at top, extends downward from anchor point // Collision if bird hits the pipe (pipe extends from y position downward) if (birdBottom >= pipe.y) { gameOver = true; showGameOverScreen(); return; } } } // Improved scoring - check for passing through gap (only once per pipe pair) if (!pipe.passed && pipe.isTop && pipe.x + 60 < bird.x) { // Bird has passed this pipe pair pipe.passed = true; // Find and mark the corresponding bottom pipe as passed too for (var k = 0; k < pipes.length; k++) { if (pipes[k] !== pipe && Math.abs(pipes[k].x - pipe.x) < 5 && !pipes[k].isTop) { pipes[k].passed = true; break; } } LK.setScore(LK.getScore() + 1); scoreTxt.setText('SKOR: ' + LK.getScore().toString()); LK.getSound('score').play(); } } // Create new pipes when needed if (pipes.length === 0 || nextPipeX - pipes[pipes.length - 1].x >= pipeSpacing) { createPipePair(); } // Gradually increase game speed if (LK.getScore() > 0 && LK.getScore() % 5 === 0) { gameSpeed = Math.min(6, 4 + LK.getScore() * 0.1); } // Update pipe speed for (var j = 0; j < pipes.length; j++) { pipes[j].speed = -gameSpeed; } };

===================================================================
--- original.js
+++ change.js
@@ -82,15 +82,21 @@
 	self.speed = -4;
 	self.passed = false;
 	self.isTop = isTop;
 	self.gapY = gapY;
-	// Fix pipe positioning to ensure proper gap and eliminate visual artifacts
+	// Fix pipe positioning to ensure proper gap and ground contact
 	if (isTop) {
 		// Top pipe: anchor at bottom (1), position at top edge of gap
 		self.y = gapY - gapSize / 2;
 	} else {
-		// Bottom pipe: anchor at top (0), position at bottom edge of gap  
+		// Bottom pipe: anchor at top (0), position at bottom edge of gap - ensure it touches ground
 		self.y = gapY + gapSize / 2;
+		// Ensure bottom pipe extends to ground level (2532 is ground surface)
+		var pipeBottom = self.y + 800; // pipe height is 800
+		if (pipeBottom < 2532) {
+			// Adjust position so pipe touches ground
+			self.y = 2532 - 800;
+		}
 	}
 	self.update = function () {
 		self.x += self.speed;
 	};
@@ -110,10 +116,10 @@
 var bird;
 var pipes = [];
 var ground;
 var gameSpeed = 4;
-var gapSize = 400; // Increased gap size for easier gameplay
-var pipeSpacing = 450; // Increased spacing for better playability
+var gapSize = 500; // Further increased gap size for much easier gameplay
+var pipeSpacing = 500; // Increased spacing for better playability
 var nextPipeX = 2048;
 var gameStarted = false;
 var gameOver = false;
 var gameWaitingForRestart = false;
@@ -171,13 +177,21 @@
 }));
 ground.x = 0;
 ground.y = 2732;
 function createPipePair() {
-	// Ensure gap is positioned properly within screen bounds with larger margins
-	// Leave more space for ground (200px) and top area, account for pipe height (800px)
-	var minGapY = 500; // Higher minimum gap center position
-	var maxGapY = 2000; // Lower maximum gap center for better positioning
+	// Ensure gap is positioned properly within screen bounds with better proportions
+	// Account for pipe height (800px), gap size (500px), and ground position (2532)
+	var minGapY = 600; // Higher minimum gap center position for better clearance
+	var maxGapY = 1800; // Ensure bottom pipe can reach ground properly
 	var gapY = minGapY + Math.random() * (maxGapY - minGapY);
+	// Ensure the bottom pipe will touch the ground
+	var bottomPipeTop = gapY + gapSize / 2;
+	var bottomPipeBottom = bottomPipeTop + 800;
+	if (bottomPipeBottom < 2532) {
+		// Adjust gap position so bottom pipe touches ground
+		var adjustment = 2532 - bottomPipeBottom;
+		gapY += adjustment;
+	}
 	var topPipe = new Pipe(true, gapY);
 	topPipe.x = nextPipeX;
 	pipes.push(topPipe);
 	game.addChild(topPipe);

Creation History

Images