Flappy, first of all very simple...

Flappy was a mobile app programmed for Android and iPhones in 2013. A bird named Flappy can be moved up and down with the cursor keys. In between, pillars appear from above and below, which he is not allowed to touch. If he has flown through it, he gets a point. If he touches the pillars, he gets a minus point. For the game you should use simple graphic shapes firs . Flappy is represented as a circle and the pillars as rectangles. To keep it simple, you also set the canvas to a height of 600 and a width of 500 pixels. To do this, use the predefined variables Width and Height, to which you assign a value using the equals sign. Then you set the timer variable to your own function again. It's best to call this Draw again. In the Draw function, first draw the circle for Flappy with the Circle function. Flappy should appear in the center of the canvas. Try it alone first.

	Timer = Draw;

	Height = 600;
	Width = 500;

	void Draw()
	{
		// Flappy
		////////////////////
		EllipseMode(EllipseModes.Corner);
		Circle(Width / 2, 500 / 2, 40);
	}	
	

To make it easier to check if Flappy got through the "flight path", instead of drawing the circle from the center, draw the circle from the top corner.

Flappy moves...

Next, you want Flappy to move when you press the up and down arrow keys. Currently, Flappy still "remains" in the middle of the drawing area, since neither the x nor the y coordinates change when Draw is called up again. Since Flappy should only move up and down, the y-coordinate must be variable. So you create a variable yFlappy of the data type double outside of the draw function and set it to half the height, i.e. 500 / 2. In the draw function you check whether one of the two keys has been pressed and increase or decrease it variable by 5 pixels

	Timer = Draw;

	Height = 600;
	Width = 500;

	double yFlappy = 500 / 2;

	void Draw()
	{
		// Flappy
		////////////////////
		if (KeyIsPressed == true)
		{
			if (KeyCode == KeyCodes.Up)
				yFlappy = yFlappy - 5;
			else if (KeyCode == KeyCodes.Down)
				yFlappy = yFlappy + 5;
		}
		EllipseMode(EllipseModes.Corner);
		Circle(Width / 2, yFlappy, 40);
	}

If you try your program, you will notice that the previously drawn circles have not been erased. You can do this by calling the Background function at the beginning of the Draw function. Set the background color to a light shade of gray, e.g. 192.

Now the pillars are moving...

Two columns are to be drawn as an obstacle for Flappy, leaving a gap of 100 pixels so that Flappy can fly through them. The columns should be drawn with the Rect function. In order to create the impression of movement, the columns should first be drawn on the right edge and then move to the left. You achieve this by first setting the x-coordinate of the columns to the width of the painting area and reducing the x-coordinate by e.g. 10 pixels each time Draw is called. So that it is not so complicated at first, try it out for a single rectangle that is 20 pixels wide and occupies the entire height of the canvas. Name the variable for the x-coordinate of the pillar xPillar.

	double yFlappy = 500 / 2;
	double xPillar = Width;

	void Draw()
	{
		Background(192);
	...
		// Pillars
		////////////////////
		RectMode(RectModes.Corner);
		Rect(xPillar, 0, 20, Height);

		xPillar = xPillar - 10;
	}
	  

If you entered everything correctly, the pillar (well, the rectangle) should move from right to left and disappear from the canvas.
Now, of course, a new pillar should also appear. To do this, you check whether the variable xPillar has become negative. Because then the pillar disappeared on the left. Then you set xPillar back to the value of the predefined variable Width.

		  ...
		// Pillars
		////////////////////
		if(xPillar < 0)
		{
			xPillar = Width;
		}
		RectMode(RectModes.Corner);
		Rect(xPillar, 0, 20, Height);

		xPillar = xPillar - 10;
	}
	  

...and now the second pillar

As can be seen in the figure, the two pillars should always leave a gap of 100 pixels so that Flappy can fly through. Of course, this "flight path" should not always be at the same y-coordinates, but should be set randomly. Therefore, the y-coordinate of the bottom column is randomly determined between 100 and 500. You use the Random function to do this.

Since you need this y-coordinate for the entire movement of the columns from left to right, you have to create this variable outside of the draw function. Name the variable of data type double yPillarBelow because it is the y-coordinate of the bottom pillar. Now you can display both pillars accordingly by calculating the heights of the two pillars as shown in the figure.

	...
	double xPillar = Width;
	double yPillarBelow = Random(100, Height - 100);

	void Draw()
	{
	...
		// Pillars
		////////////////////
		if(xPillar < 0)
		{
			xPillar = Width;
			yPillarBelow = Random(100, Height - 100);
		}
		RectMode(RectModes.Corner);
		Rect(xPillar, 0, 20, yPillarBelow - 100); 
		Rect(xPillar, yPillarBelow, 20, 600 - yPillarBelow);

		xPillar = xPillar - 5;
	}
	  

You can "trick" here. By setting the initial value for xPillar to the value -1, the first time the Draw function is executed, xPillar and yPillarBelow will be set to the correct start values. This means you don't need to set the start values for xPillar and yPillarBelow separately.

	...
	double xPillar = -1;
	double yPillarBelow;

	void Draw()
	{
	...
		if(xPillar < 0)
		{
			xPillar = Width;
			yPillarBelow = Random(100, Height - 100);
		}
	...	  
	  

...successfully through the "flight path"

To check if Flappy has reached the pillars, you must first test if the x-coordinates of Flappy and the pillars are in the same range. For Flappy, the y-coordinate is not changed, it is constant at the center of the canvas. The x-coordinate of each column changes by an amount of -5 so that the columns move from right to left.

	...
		double xFlappy = Width / 2;
		if(xFlappy >= xPillar && xFlappy <= xPillar + 5)
		{
			if(yFlappy >= yPillarBelow-100 && 
			   yFlappy <= yPillarBelow - 40)
				correct = correct + 1;
			else
				wrong = wrong + 1;
		}
		xPillar = xPillar - 5;
	}	  
	  

The first if-statement checks if Flappy has reached the pillars. If this expression is true, you have to check in a new if-statement whether Flappy is inside the "flight path" and has hit the gap correctly. To do this, Flappy's y-coordinate, which you remember in yFlappy, must be between yPillarBelow and yPillarBelow – 100. Only the single coordinate point is considered. In addition, the height of Flappy must be taken into account, i.e. 40 pixels.
If Flappy has successfully flown through the "flight path", a new variable named correct should count the successful attempts. If the attempt failed, the new variable named wrong should be incremented instead. You create these outside of the draw function. You can then output these two variables using the Text function.

	...
	int correct;
	int wrong;

	void Draw()
	{
	...
		// Hit test
		////////////////////
		double xFlappy = Width / 2;
		if(xFlappy >= xPillar && xFlappy <= xPillar + 5)
		{
			if(yFlappy >= yPillarBelow-100 && 
			   yFlappy <= yPillarBelow-40)
				correct = correct + 1;            
			else
				wrong = wrong + 1;
		}
		Text($"good {correct} / bad {wrong}");

		xPillar = xPillar - 5;
	}

If you want, you can change the font size and font using the TextSize and TextFont functions. Your Flappy game should work now.

...and now a colorful "background"

Now the game needs to be "pepped up" a bit. First, a landscape should appear as the background, moving in the opposite direction to Flappy. To do this, you use the Image function to display an image as the background. As the first parameter you give the function the path to the image file and then the x and y coordinates. You can also omit the coordinates, then the image will be displayed from the upper left corner. The background image should have a size of 500 by 600 pixels. With the Image function, it should be created right after the Background function.

	...
	void Draw()
	{
		Background(192);
		Image(@"C:\Images\Background.png", 0, 0);
	...

When you start the program, the background is still static and doesn't move. To do this, the x-coordinate must change and the image must be "moved" to the left each time the Draw function is called. The x-coordinate must therefore be reduced and becomes negative as a result. To do this, create a variable x outside of the draw function and set it to 0. Each time you call the draw function, you decrease the x variable by a fixed amount, e.g. by -4.

	...
	double x; // Background

	void Draw()
	{
		Background(192);

		Image(@"C:\Images\Background.png", x, 0);
		x = x - 4;
	 ...

Now the background should move to the left. At some point, however, the picture ends and the light gray background appears completely (see figure).

You must therefore check whether x is smaller than the width of the image. In addition, the image must be duplicated, i.e. appear twice in the image file, so that the image is then 1000 pixels wide instead of 500. The beginning and end of the image must be identical, otherwise a "jump" will appear in the image. If the x-coordinate is below -500, the variable x is set to 0 again.

	...
	void Draw()
	{
		Background(192);

		Image(@"C:\Images\Background.png", x, 0);
		x = x - 4;
		if (x < -(1000 / 2))
			x = 0;  // start background again
	...

...and finally a real flappy

As a last small change, you can now replace the circle for Flappy with an image. In order for your programming code to continue to work, your flappy should be as high as the circle, i.e. 40 pixels.

	...
	void Draw()
	{
	...
		// Flappy
		////////////////////
		if (KeyIsPressed == true)
		{
			if (KeyCode == KeyCodes.Up)
				yFlappy = yFlappy - 5;
			else if (KeyCode == KeyCodes.Down)
				yFlappy = yFlappy + 5;
		}
		//EllipseMode(EllipseModes.Corner);
		//Circle(Width / 2, yFlappy, 40);
		Image(@"C:\Images\Flappy.png", Width / 2, yFlappy);
	...

This completes the Flappy game and you can program additional features such as a start screen and so on. To further improve your programming code, you should assign speaking variables for constant values such as the width and height of Flappy or the speed of the background image. You can then use these instead of the constant values. This will make your programming code easier to understand. Have fun programming and of course playing.

Download source code

 This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License