Looping

Run the program. What happens? The program starts, a window appears, and it closes after a short delay. How can we change the program so that it closes when the user decides?

We can achieve this using a loop. The loop will repeat while the user has not asked to quit (which you can check with the QuitRequested function). This will require us to call ProcessEvents inside the loop so that SplashKit can detect if the user has closed the window.

Have a go at adding this loop yourself. This should start after the window is opened, and include the code to clear the screen and fill the circle. You can remove the Delay code now, as the loop will control the duration of the program.

• Code with loop

  using static SplashKitSDK.SplashKit;
  
  const int PLAYER_RADIUS = 50;
  
  OpenWindow("Circle Moving", 1280, 720);
  
  while( ! QuitRequested() )
  {
      ClearScreen(ColorWhite());
      FillCircle(ColorTurquoise(), 640, 360, PLAYER_RADIUS);
      RefreshScreen(60);
  
      ProcessEvents();
  }

Tip

Remember to indent the code within the { ... }.

Compile and run the program. It should now stay around for as long as you want.

Think about what is happening in the background. The computer is running through the loop again and again. Each loop it redraws the screen, records what events happened, and then the loop condition checks if the user has quit.

It looks like nothing is happening, so it can be hard to believe this is all happening. Add a WriteLine("here"); call inside the loop and run it again. Watch the terminal output, and you will see the message written over and over.

We need this loop so that we can now add code to check what events have occurred and update the program in response.

Note

The while loop is letting you repeat some code based on a condition. In an interactive program, this loop is called the event loop as it allows you to watch for, and react to, events.

Now we have the loop going, let’s get the player moving. At the moment, the circle’s position is fixed. Let’s change this to use a variable for the x coordinate of the player.

Add a new playerX variable, initialise this to 640, and use the variable as the value for the x coordinate when filling the circle. Using a variable will allow us to change the value.

• Code with player position variable

  using static SplashKitSDK.SplashKit;
  
  const int PLAYER_RADIUS = 50;
  
  int playerX = 640;
  
  OpenWindow("Circle Moving", 1280, 720);
  
  while( ! QuitRequested() )
  {
      ClearScreen(ColorWhite());
      FillCircle(ColorTurquoise(), playerX, 360, PLAYER_RADIUS);
      RefreshScreen(60);
  
      ProcessEvents();
  }

Run the program and make sure that it is still working.

Now that we have a variable for the player’s position, we can change this every loop. This should make the circle appear to move!

Create a PLAYER_SPEED constant with the value 3. Add this to the playerX variable within the loop.

• Code with player moving

  using static SplashKitSDK.SplashKit;
  
  const int PLAYER_RADIUS = 50;
  const int PLAYER_SPEED = 3;
  
  int playerX = 640;
  
  OpenWindow("Circle Moving", 1280, 720);
  
  while( ! QuitRequested() )
  {
      ClearScreen(ColorWhite());
      FillCircle(ColorTurquoise(), playerX, 360, PLAYER_RADIUS);
      RefreshScreen(60);
  
      ProcessEvents();
  
      // playerX = playerX + PLAYER_SPEED;
      playerX += PLAYER_SPEED;
  }

Compile and run the program. What happens? Can you update the code to move the player in the other direction.

Have a go at adding the code to move the player vertically as well. This will need a playerY variable.