How does the Physics of Flappy Bird works?

Started by
1 comment, last by dr01d3k4 10 years, 1 month ago

This is the game: https://itunes.apple.com/us/app/flappy-bird/id642099621?mt=8

And I don't really understand on how does the physics works.. In the physics term..

I know it has gravity that pull the bird down.. and then I'm not sure on what makes the bird fly when I tap?

Is that called an impulse force?

Thank you!

Advertisement

From watching a Youtube video, it seems to me that there is not much physics (as in buyoant force vs gravity) involved at all.

It looks more somewhat like:


for(;;)
{
    height -= 2;
    if(tapped) height += 3;

    ++xpos;
    draw();

    if(is_wall(xpos, height))
        die();
}

I just made a tutorial of flappy bird and box2d its very simple but its in spanish, but if you look at the code maybe you will understand

here is it

I made a flappy bird clone called "Buzzy Bee" in CoffeeScript and HTML5 (because my teacher started making one and I wanted to make a better one :P). The source is on Github: https://github.com/dr01d3k4/BuzzyBee and you can play it on jsfiddle: http://jsfiddle.net/dr01d3k4/BGAD7/

The physics are pretty simple. It doesn't use Box2D because the vertical motion is handled by simple integration and collision is just AABB with no resolution (because instant game over, though may get a bit harder if you want to add a dieing animation). All the code for the game logic is in game_screen.coffee. Here are the important parts (commented to explain)


# In the constructor, declare a player object (@ means self/this)
# The velocity and acceleration are both vertical, horizontal movement is handled differently
@player =
	x: PLAYER_START_X
	y: PLAYER_START_Y
	width: PLAYER_WIDTH
	height: PLAYER_HEIGHT
	velocity: 0
	acceleration: GRAVITY
	rotation: 0


# Create the pipes (fixed amount that get recycled) and keep track of where the first one is
# The player doesn't actually move horizontally - the pipes do
@firstPipeX = START_PIPE_X
@pipes = [ ]
for i in [0...PIPE_COUNT]
	@pipes.push @newPipe()



# The methods for creating new pipes (as a JavaScript object)
randomPipeHeight: -> randomNumberInclusive PIPE_MIN_HEIGHT, SCREEN_HEIGHT - PIPE_MIN_HEIGHT - PIPE_GAP_HEIGHT

newPipe: -> baseHeight: @randomPipeHeight(), gapHeight: PIPE_GAP_HEIGHT, width: PIPE_WIDTH, scored: no



# When the player jumps, set his velocity to jump velocity and add some rotation for graphical effect
playerJump: ->
	@player.velocity = JUMP_VELOCITY
	@player.rotation = PLAYER_JUMP_ROTATION



# Game logic with some parts like AI and trail taken out
update: (deltaTime) ->
	@time += deltaTime
		
	# This is just for graphical effect
	@player.rotation += PLAYER_ROTATION_SPEED * deltaTime

	# Jump if the player is pressing the correct keys and is actually playing
	# (In the menu screen, the game is played by the AI and uses the same code so these @playerControlled checks are common)
	@playerJump() if @playerControlled and (isKeyPressed(Key.JUMP) or isMousePressed())

	# Simple integration vertically
	@player.velocity += @player.acceleration * deltaTime
	@player.y += @player.velocity * deltaTime

	# Check if the player's gone out of bounds
	if @player.y + @player.height > SCREEN_HEIGHT
		@player.y = SCREEN_HEIGHT - @player.height
		@player.velocity = 0
		@gameOver() if @playerControlled

	if @player.y < 0
		@player.y = 0
		@player.velocity = 0
		@gameOver() if @playerControlled

	# Offset the first pipe by the speed of the player
	# Negative because player going to right, so pipes must go to the left for same effect
	@firstPipeX -= MOVE_SPEED * deltaTime

	# If the first pipe's gone off screen
	if @firstPipeX < -PIPE_WIDTH * 2
		# Remove the first pipe by moving each down
		for i in [1...@pipes.length]
			@pipes[i - 1] = @pipes[i]

		# Add a new pipe
		# However probably would be more efficient to reuse the first that was removed
		@pipes[PIPE_COUNT - 1] = @newPipe()

		# Because the first pipe was removed, need to reset this back to position of new first pipe
		@firstPipeX += PIPE_WIDTH + PIPE_GAP_HORIZONTAL

	# Check player not rotating too much
	@player.rotation = -PLAYER_MAX_ROTATION if @player.rotation < -PLAYER_MAX_ROTATION
	@player.rotation = PLAYER_MAX_ROTATION if @player.rotation > PLAYER_MAX_ROTATION

	# Detect collision and scoring
	x = @firstPipeX
	collision = no
	for pipe in @pipes
		# Only if the left of the pipe is to the left of the player's right (i.e player's going through/gone past)
		# Ones further on get skipped
		if x < @player.x + @player.width
			# If the right of the pipe is on right of player's left
			# And the player isn't inside the gap
			# Then collided
			# Like AABB intersection but y is negated
			if x + pipe.width > @player.x and (@player.y + @player.height > SCREEN_HEIGHT - pipe.baseHeight or @player.y < SCREEN_HEIGHT - pipe.baseHeight - pipe.gapHeight)
				collision = yes
				break

			# If the right of the pipe is on the left of the player
			if x + pipe.width <= @player.x
				# And it hasn't already been used for scoring
				# Then the player has gone through this pipe and so gains a point
				@score += 1 unless pipe.scored
				pipe.scored = yes

		# Update the pipe's left position to the one of the next pipe
		x += pipe.width + PIPE_GAP_HORIZONTAL

	# Player hit a pipe and so game over
	return @gameOver() if collision and @playerControlled

Falling block colour flood game thing I'm making: http://jsfiddle/dr01d3k4/JHnCV/

This topic is closed to new replies.

Advertisement