C# Tutorial – Create a T Rex Endless Runner Game in Visual Studio

In this tutorial we will show you how to create a run T Rex endless runner game in Visual Studio using C# programming language. This is a simple game, which you might of played in the Google Chrome offline page. This game is created for educational purposes and hopefully you will have fun and learn something new along the way. We will be using Visual Studio 2017 version to create this game you can use any version it will still work the same, make sure you have downloaded the game assets and using C# programming language.

New WPF C# Tutorial on Parallax Scrolling Endless Runner game tutorial is here, check it out

Lesson Objectives –

  1. Creating a fully working T Rex endless running game in visual studio using C#
  2. Creating jump simulation using force and gravity
  3. Using various data types such as integers, Booleans and strings
  4. Animating multiple objects using timer and picture boxes
  5. Triggering key down and key up events
  6. Creating and invoking a game reset function
  7. Allowing the game to keep score throughout the game
  8. Calculate collision between objects and player picture boxes

 

Full Video Tutorial –

 

Download the T Rex Endless runner images here

Download T Rex Endless Runner Project on GitHub

Start a new windows form application project under visual c# in visual studio, call it T Rex Endless Runner Game and press OK.

In the new form go to the properties window and change below.

Change the back colour to White, Size to 634, 514 and Text to “T Rex Endless Runner”.

This is what the form should look like.

We will need 4 picture boxes, 1 label and 1 timer for this game.

Lets add the 4 picture boxes first. Find the tool box, it’s usually pinned in on the left of the screen if you can’t find it go to View – and then click on Tool Box.

<– this is the picture box icon, drag and drop it to the form.

This is our first picture box. Let’s change some options in the properties window.

While the picture box is selected look at the properties window

Name: floor

Back colour: black

Size: 652, 50

Location: -12, 452

This is what the picture box should look like after all the options been applied to it. As you figured out this picture box will be used as the floor or ground of the game.

Add another picture box change the following options in its properties window.

name: trex

Back colour: white

Size: 44, 60

Location: 131, 385

Size Mode: Stretch Image

Right click on the picture and click on choose image.

under the project resource file click on import, this will bring up the image selector dialog box. Select all the images you downloaded from MOOICT and click open. There are 4 images import them all at once.

Select the running image and click OK.

We need two more picture boxes.

For the first one change the following in the properties window

Name: obstacle1

Back Colour: White

Image: obstacle1 [click on the 3 dotted button to get the resource browser open]

Location: 371, 405

Size Mode : Auto Size

Tag: obstacle [this is important make sure you add the tag obstacle to this picture box]

For the second one change the following in the properties window

Name: obstacle2

Back Colour: White

Image: obstacle2 [click on the 3 dotted button to get the resource browser open]

Location: 534, 400

Size: 50, 50

Size Mode : Stretch Image

Tag: obstacle [this is important make sure you add the tag obstacle to this picture box]

This is the final look of the player and obstacles, you should have the exact same result as this, if now please look back at the options in the properties window.

Now let’s add a label to the form

Name: scoreText

Font: Bold, size 14

Location: 13, 13

Text: Score- 0

This is the final look of the label.

Now add a timer to the form.

Drag and drop a timer to the form

Change the following in the timer properties. change name to gameTimer, enabled to true and interval to 20.

While the time is selected click on that little lightning bolt icon in the properties window. This will bring you to the events window, we need to add an event for the timer.

Type is gameEvent and press enter. This will take you to the code, for now come back to the design view we still have two more events to add for this game.

Click on the form we need to key down and key up event to the form

After you clicked on the form you will see the events window change and now you will be able to find the key down and key up event. Type keyisdown for the key down event and keyisup for the key up event and press enter.

This is the code view thus far into this project.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace T_Rex_Endless_Runner_Game
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void gameEvent(object sender, EventArgs e)
        {

        }

        private void keyisdown(object sender, KeyEventArgs e)
        {

        }

        private void keyisup(object sender, KeyEventArgs e)
        {

        }
    }
}

 

Add the highlighted code in the code view.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace T_Rex_Endless_Runner_Game
{
    public partial class Form1 : Form
    {
        bool jumping = false; // boolean to check if player is jumping or not
        int jumpSpeed = 10; // integer to set jump speed
        int force = 12; // force of the jump in an integer
        int score = 0; // default score integer set to 0
        int obstacleSpeed = 10; // the default speed for the obstacles
        Random rnd = new Random(); // create a new random class

        public Form1()
        {
            InitializeComponent();

            resetGame(); // run the reset game function
        }

        private void gameEvent(object sender, EventArgs e)
        {

        }

        private void keyisdown(object sender, KeyEventArgs e)
        {

        }

        private void keyisup(object sender, KeyEventArgs e)
        {

        }

        public void resetGame()
        {
            
        }
    }
}

 

bool jumping = false; // boolean to check if player is jumping or not

This is a Boolean called jumping. This Boolean will be used to judge whether the T Rex has jumped in the game. We can only change this between true and false.

int jumpSpeed = 10; // integer to set jump speed

This integer is called jump speed. This will contain a value of 10. The T Rex will jump 10 pixels from its location and it will be used to pull the player down using the jump speed as gravity.

int force = 12; // force of the jump in an integer

This integer called force will be used to figure out how faster the T Rex jumps up and how high he can do before coming down.

int score = 0; // default score integer set to 0

This integer will be keeping the score for the game. Each time a obstacles leaves the form successfully without hitting the player it 1 will be added to this integer.

int obstacleSpeed = 10; // the default speed for the obstacles

This integer will be used to animate the obstacles. This will pull the obstacles towards the left of the screen towards the player.

Random rnd = new Random(); // create a new random class

This random number generator called rnd will be used to calculate a random location for the obstacles to spawn once the game starts and when the reach the fast left of the screen.

All the green texts are comments, it’s a good practice to comment your code, especially for your grades ;-).

public Form1()

{

InitializeComponent();

resetGame(); // run the reset game function

}

The reset function is being called from the forms main function. This basically means that we are setting the reset function to run when the game starts.

public void resetGame()

{

 

}

This is the empty reset game function. We will come back to it later to put some instructions there for us.

In the key is down function add the following.

        private void keyisdown(object sender, KeyEventArgs e)
        {
            //if the player pressed the space key and jumping boolean is false
            // then we set jumping to true
            if (e.KeyCode == Keys.Space && !jumping)
            {
                jumping = true;
            }
        }

In this function we are checking if the space key is press and if jumping is equals to false then we change jumping back to false. It may seem simple but we are triggering the jump function which will play out in the timer event later on.

Add the following in the key is up function.

        private void keyisup(object sender, KeyEventArgs e)
        {
            // if the R key is pressed and released then we run the reset function
            if (e.KeyCode == Keys.R)
            {
                resetGame();
            }

            //when the keys are released we check if jumping is true
            // if so we need to set it back to false so the player can jump again
            if (jumping)
            {
                jumping = false;
            }
        }

First we are checking if the R key is pressed and released we run the game reset function, also we check if jumping is true then we can change jumping back to false.

Below is the game event which is linked to the game timer. Input all code from inside it. All the codes are commented so you will know what each part does as you type them down.

        private void gameEvent(object sender, EventArgs e)
        {
            // linking the jumpspeed integer with the player picture boxes to location
            trex.Top += jumpSpeed;

            // show the score on the score text label
            scoreText.Text = "Score: " + score;

            // if jumping is true and force is less than 0
            // then change jumping to false
            if (jumping && force < 0)
            {
                jumping = false;
            }

            // if jumping is true
            // then change jump speed to -12 
            // reduce force by 1
            if (jumping)
            {
                jumpSpeed = -12;
                force -= 1;
            }
            else
            {
                // else change the jump speed to 12
                jumpSpeed = 12;
            }

            foreach (Control x in this.Controls)
            {
                // is X is a picture box and it has a tag of obstacle
                if (x is PictureBox && x.Tag == "obstacle")
                {
                    x.Left -= obstacleSpeed; // move the obstacles towards the left

                    if (x.Left + x.Width < -120)
                    {
                        // if the obstacles have gone off the screen
                        // then we respawn it off the far right
                        // in this case we are calculating the form width and a random number between 200 and 800
                        x.Left = this.ClientSize.Width + rnd.Next(200, 800);
                        // we will add one to the score
                        score++;
                    }

                    // if the t rex collides with the obstacles
                    if (trex.Bounds.IntersectsWith(x.Bounds))
                    {
                        // we stop the timer
                        gameTimer.Stop();
                        // change the t rex image to the dead one
                        trex.Image = Properties.Resources.dead;
                        // show press r to restart on the score text label
                        scoreText.Text += "  Press R to restart";
                    }
                }
            }

             // if the t rex top is greater than or equals to 380 AND
             // jumping is not true
            if (trex.Top >= 380 && !jumping)
            {
                // then we do the following
                force = 12; // set the force to 8
                trex.Top = floor.Top - trex.Height; // also we place the player on top of the picture box
                jumpSpeed = 0; // set the jump speed to 0
            }

            // if score is equals or greater than 10
            if (score >= 10)
            {
                // the obstacle speed change to 15
                obstacleSpeed = 15;
            }
        }

Below is the reset function. All the codes have been commented and follow it carefully. This function overall will reset every variable, player and obstacles in the game. This function will run when the game loads up first and then it will run when the player presses the R button.

        public void resetGame()
        {
            // This is the reset function
            force = 12; // set the force to 8
            trex.Top = floor.Top - trex.Height; // also we place the player on top of the picture box
            jumpSpeed = 0; // set the jump speed to 0
            jumping = false; // change jumping to false
            score = 0; // set score to 0
            obstacleSpeed = 10; // set obstacle speed back to 10
            scoreText.Text = "Score: " + score; // change the score text to just show the score
            trex.Image = Properties.Resources.running; // change the t rex image to running

            foreach (Control x in this.Controls)
            {
                // is X is a picture box and it has a tag of obstacle
                if (x is PictureBox && x.Tag == "obstacle")
                {
                    // generate a random number in the position integer between 600 and 1000
                    int position = rnd.Next(600, 1000); 

                    // change the obstacles left position to a random location begining of the game
                    x.Left = 640 + (x.Left + position + x.Width * 3);
                }
            }

            gameTimer.Start(); // start the timer
        }

 

Click on the start button to start building the game and running it.

Final Screen shot of the game

Result – The game is working as are the obstacles and the reset function. Follow the tutorial along and debug it when it’s completed.




11 responses to “C# Tutorial – Create a T Rex Endless Runner Game in Visual Studio”

  1. Cory says:

    i have an issue with the “linking part” what exactly does it mean when you say gameEvent is linked to gameTimer??

  2. Woody says:

    So I got everything working righ texcept for one thing, the t-rex moves up and down through the floor without me pressing any buttons at all

  3. Majd says:

    I have zero erros but there is one problem , when I run the game the t-rex moves up and down through the floor without pressing any buttons what is the problem ???

  4. Mariana says:

    There are no errors in the code, but it does not work right. When running the dinosaur falls and crosses the floor that is appearing at the top of the screen. Upon reaching the base of the screen the dinosaur is regenerated in the initial position, and remains in this cycle.

  5. Fruit says:

    In gameEvent method, where if(trex.Top >= 380 && !jumping) is, change the value to 300 instead of 380 and t-rex won’t jump around without pressing any buttons

  6. pogi lang says:

    how do i tag a obstacle?

  7. Anhar Ali says:

    In the properties window. If you don’t see the properties window right click on the picture box and clock properties.

  8. Rem says:

    When I start my game, the dinosaur sinks under the ground

  9. kobubu says:

    This code works (it’s from youtube version)
    Just rename some functions like keyisup in form

    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using System.Windows.Forms;

    namespace TREX
    {
    public partial class Form1 : Form
    {

    bool jumping = false;
    int jumpSpeed;
    int force = 12;
    int score = 0;
    int obstacleSpeed = 10;
    Random rand = new Random();
    int position;
    bool isGameOver = false;

    public Form1()
    {
    InitializeComponent();
    GameReset();

    }

    private void MainGameTimerEvent(object sender, EventArgs e)
    {
    trex.Top += jumpSpeed;
    txtScore.Text = “Score: ” + score;

    if (jumping == true && force 366 && jumping == false)
    {
    force = 12;
    trex.Top = 367;
    jumpSpeed = 0;

    }

    foreach (Control x in this.Controls)
    {
    if (x is PictureBox && (string)x.Tag == “obstacle”)
    {
    x.Left -= obstacleSpeed;

    if (x.Left 5 && score < 50)
    {
    obstacleSpeed = 15;
    }
    }

    private void Form1_KeyDown(object sender, KeyEventArgs e)
    {
    if (e.KeyCode == Keys.Space && jumping == false)
    {
    jumping = true;

    }

    }

    private void Form1_KeyUp(object sender, KeyEventArgs e)
    {
    if (jumping == true)
    {
    jumping = false;
    }

    if (e.KeyCode == Keys.R && isGameOver == true)

    {
    GameReset();
    }

    }

    private void GameReset()
    {
    force = 12;
    jumpSpeed = 0;
    jumping = false;
    score = 0;
    obstacleSpeed = 10;
    txtScore.Text = "Score " + score;
    trex.Image = Properties.Resources.running;
    isGameOver = false;
    trex.Top = 367;

    foreach (Control x in this.Controls)
    {
    if (x is PictureBox && (string)x.Tag == "obstacle")
    {
    position = this.ClientSize.Width + rand.Next(10, 100) + (x.Width * 10);
    x.Left = position;
    }
    }

    gameTimer.Start();

    }

    }
    }

  10. Naghibayli says:

    No reaction when pressing spacebar, I think cannot fire an event (gameEvent)

  11. NO says:

    My obstacles keep occasionally over lap when they respawn anyone know how to solve this?