Zap Game: Function calls inside a loop

References:

• Pre-requisite: it is assumed that you have read through the prior tutorials, and are familiar with the concepts covered in those tutorials.

Goals:

• In this tutorial, we will:
  • Examine how to use a while loop to count forward, send a zap path from the Hero towards the Enemy.

1. Obtain the example code

• Here is the zip file to the source files and compiled executable of this example.
• Here is the keyboard mapping for the XBOX 360 controller.  
• Here is the main tutorial page for working with XNACS1Lib, and here is the complete documentation of the library: html-page or compiled html help file .

When the game starts, you'll see a screen that looks similar to this:

You'll notice that this is almost identical to the 050 tutorial , except that when the player pushes the 'A' button, the laser now extends across the entire screen.  You'll notice that when the hero's laser beam overlaps the enemy soccer ball, the hero gets a point.  The enemy's laser beam is still only a couple of circles long, leaving it with no hope of reaching the hero, which makes this version of the game a bit lopsided.  You'll also notice that the laser beam is NOT stopped by the blocks in the middle of the screen.  As you can see in the above picture, the laser beam is drawn behind the block, and continues on afterwards.  We'll fix both problems a future tutorials.

Because the program is almost entirely the same as the previous tutorial that used this program, we will focus only what's new in this program.  If you need to refresh your memory about how the game is set up overall, please refer to the 050 tutorial .

2. Examining The Program:

Let's examine the C# source code that produces the behavior we see on-screen

• Drawing the Hero's Laser in UpdateWorld():

  #region Hero zapping                 if (GamePad.ButtonAClicked())                 {                     PlayACue( "ZapPath" );                       XNACS1Circle lastCircle = null ;                     Vector2 HeroBeam = m_Hero.Center;                     while (HeroBeam.X <= m_Enemy.CenterX)                     {                         HeroBeam.X += 1f;                         lastCircle = CreateHeroPath(HeroBeam);                     }                       if ( lastCircle .Collided(m_Enemy))                     {                         m_Enemy.Texture = null ;                         PlayACue( @"EnemyZapped" );                         m_HeroScore++;                     }                   }                 #endregion hero zapping

  • You'll notice that the code above, which draws the laser beam as a horizontal line from the hero towards the right side of the screen, is fundamentally just like the the while loop that drew a series of soccer balls on the screen:
    

                        Vector2 HeroBeam = m_Hero.Center;

                        while (HeroBeam.X <= m_Enemy.CenterX)

                        {

                            HeroBeam.X += 1f;

                            lastCircle = CreateHeroPath(HeroBeam);

                        }

  • Indeed, the only real change is that once the loop has finished, we want to see if the laser beam has overlapped the enemy soccer ball.  We could do this by asking if each and every circle that we draw as part of the hero's laser beam overlaps with the enemy, but if we did, then we might detect that the last three circles (say) collide with the enemy, and then mistakenly count that as three hits, instead of just one.  We stop drawing the beam after the X value of the beam's final circle is equal to the X value of the enemy soccer ball.  Therefore we only need to check if that final circle overlaps the enemy soccer ball. 
    In order to keep track of which circle is the final circle, we'll declare the lastCircle variable, which we will assign to each circle, as we create each circle.  When the while loop ends, lastCircle will refer to the circle that was created in that final iteration through the loop.
    Thus, after the loop ends, lastCircle   refers to the last circle that was created, which we will then check to see if it overlaps with the enemy soccer ball:
    

                        if ( lastCircle .Collided(m_Enemy))

                        {

                            m_Enemy.Texture = null ;

                            PlayACue( @"EnemyZapped" );

                            m_HeroScore++;

                        }  

    • Note that when the enemy is zapped with the laser beam, a sound is played, the hero's score goes up by one, and we want the enemy soccer ball to 'flash', as a means of providing visual feedback that the player successfully zapped the enemy.
      • We cause the enemy to flash by setting it's texture to null.   Because the enemy object has no other color assigned to it, when the texture is removed, a pink circle will be displayed after UpdateWorld finishes.  After the pink circle is drawn, UpdateWorld will be called again, and on line line 93 (listed below) the enemy's texture is reset to being the soccer ball, which is how it will appear in the future.  Because of how fast this cycle happens, the enemy soccer ball will appear to 'flash pink' when it gets zapped by the player.
        

        m_Enemy.Texture = @"SoccerBall" ; // line 93

  • Notice that nowhere do we check for a collision with any of the blocks!!
    This is why, when we play the game, we can shoot through the blocks - we aren't doing anything to prevent the laser from going through them!

FURTHER EXERCISES::  

1. Instead of drawing a single laser beam, draw two laser beams, one slightly above the other, and both perfectly horizontal.  Make sure that you check for a collision between the enemy, and either laser beam.
2. Instead of drawing a single laser beam that is perfectly horizontal, try altering the above code so that the laser beam angles downwards slightly.  The beam should still go all the way to the enemy soccer ball's location.  An example is pictured below; don't worry about the exact angle of the beam, just make sure that it angles downwards:
   
   1. Try angling the beam upwards, instead of downwards
3. Instead of drawing a single laser beam, draw three laser beams.  The 'top' beam should angle upwards slightly, the 'middle' beam should be perfectly horizontal, and the 'bottom' bean should angle downwards slightly, as pictured below.  Make sure to detect a collision between the enemy soccer ball, and any of the beams
   
4. Try changing the code, so that when the enemy shoots a laser beam, instead of drawing just three circles, a line of circles is drawn from the enemy soccer ball towards the left side of the screen.
   1. Once you've got that working, see if you can detect if the enemy has zapped the player, and if so, increase the enemy's score, play a sound, and make the hero basketball flash

	This work is supported in part by a grant from Microsoft Research under the Computer Gaming Curriculum in Computer Science RFP, Award Number 15871 and 16531.
2/8/2010