How do I make , for example a Title screen and when an option is selected, for example "Play game", the screen switches to the gameplay screen?

Do I have to clear the screen and then enter the game loop?
Do I need to make Individual loops inside the main gameoop for different screens, if yes, can you provide a quick example?

I still don't understand the screen states.

How do I make , for example a Title screen and when an option is selected, for example "Play game", the screen switches to the gameplay screen?
Do I have to clear the screen and then enter the game loop?
Do I need to make Individual loops inside the main gameoop for different screens, if yes, can you provide a quick example?

I still don't understand the screen states.

set state to 'title screen'
while game is still running:
    handle input
    
    update according to state:
        when state is 'title screen':
            update timer
            update fade animation
            if timer expired or user pressed skip button:
                set state to menu
        
        when state is 'menu':
            navigate menu according to user input
            if user pressed 'start game' GUI button:
                set state to 'game'
            
        when state is 'game':
            if user pressed menu button:
                set state to 'menu'
            update game
    
    render according to state:
        when state is 'title screen':
            draw splash screen
            draw fade transition

        when state is 'menu':
            draw menu
            draw selected item
            
        when state is 'game':
            draw game
    
    present image

How do I make , for example a Title screen and when an option is selected, for example "Play game", the screen switches to the gameplay screen?
Do I have to clear the screen and then enter the game loop?
Do I need to make Individual loops inside the main gameoop for different screens, if yes, can you provide a quick example?

I still don't understand the screen states.

Read up on state machines, they'll help out here. What you want to do in this case is to use a state machine and transition to and from states. Implementations can be simple or complex, but you should only use one game loop.

Here's a small example:

set state to 'title screen'
while game is still running:
    handle input
    
    update according to state:
        when state is 'title screen':
            update timer
            update fade animation
            if timer expired or user pressed skip button:
                set state to menu
        
        when state is 'menu':
            navigate menu according to user input
            if user pressed 'start game' GUI button:
                set state to 'game'
            
        when state is 'game':
            if user pressed menu button:
                set state to 'menu'
            update game
    
    render according to state:
        when state is 'title screen':
            draw splash screen
            draw fade transition

        when state is 'menu':
            draw menu
            draw selected item
            
        when state is 'game':
            draw game
    
    present image

Amazing, thanks alot!
Although, essentially it's the same thing I thought of,just cleaner. The functions would be still loops till the user prompts(example, selects "Play game").
But thanks for clearing it up.

A state machine, as fastcall mentioned really is the best way to go, but the psuedo code presented makes it look like a giant switch statement, which I tend to try to avoid. Switches are fast which is good, but it tends to cluster your code together more than I like.

The way I generally do it is very similar to how XNA structures the game class.

I create a base GameStateNode class with Update/Draw functions, then each specific game state implements those functions however they like.

class GameStateNode
{
   virtual void gameStateNode Update(WorldState worldState)
   virtual void Draw(WorldState worldState)
}

class TitleScreen:GameStateNode
{
 void Update(worldState worldState)
 {
    ...
     if (KeyPressed(EnterButton))
        worldState.NextState=new MenuState();
    ...
    return
 }
 void Draw(WOrldState worldState)
 {
    ... 
    DrawTitle()
    ...
    Return
 }
}

Class MenuState(){....}

void main()
{
  WorldState world =new WorldState()
  world.CurrentNode=new TitleScreen()

  while(!world.IsDone)
  {
     world.CurrentState.Update(world)
     world.CurrentState.Draw(world)
     if (world.NextState!=null)
     {
        world.CurrentState.Dispose()
        world.CurrentState=world.NextState
     }
  }
}
 

A state machine, as fastcall mentioned really is the best way to go, but the psuedo code presented makes it look like a giant switch statement, which I tend to try to avoid. Switches are fast which is good, but it tends to cluster your code together more than I like.

The way I generally do it is very similar to how XNA structures the game class.

I create a base GameStateNode class with Update/Draw functions, then each specific game state implements those functions however they like.

class GameStateNode
{
   virtual void gameStateNode Update(WorldState worldState)
   virtual void Draw(WorldState worldState)
}

class TitleScreen:GameStateNode
{
 void Update(worldState worldState)
 {
    ...
     if (KeyPressed(EnterButton))
        worldState.NextState=new MenuState();
    ...
    return
 }
 void Draw(WOrldState worldState)
 {
    ... 
    DrawTitle()
    ...
    Return
 }
}

Class MenuState(){....}

void main()
{
  WorldState world =new WorldState()
  world.CurrentNode=new TitleScreen()

  while(!world.IsDone)
  {
     world.CurrentState.Update(world)
     world.CurrentState.Draw(world)
     if (world.NextState!=null)
     {
        world.CurrentState.Dispose()
        world.CurrentState=world.NextState
     }
  }
}
 

Interesting.. although I'm trying to avoid using classes right now, need to learn more about them.