Introduction

In this blog post, we are going to see the classic Frogger game ported to Windows Phone 7. The game was created by Ionian University professor K. Anagnostou and his students (you can read more on prof. Anagnostou’s blog post here). He also gave me the kind permission to port his source code from PC to Windows Phone 7, and he also suggested that I could use an accelerometer to control the frog’s movement. Since I do not currently have a device, I decided to use the accelerometer and the corresponding library described in my previous blog post “Emulating accelerometer in Windows Phone 7”.

Porting the project to Windows Phone 7

Not much to say here. I created a new Windows Phone 7 project, added the files from the original project and … snap! It worked like a charm! Windows Phone 7’s XNA project default orientation is Landscape, which is perfect for the game concept. The only thing I had to do is get rid of the gamepad related code and add the accelerometer one.

Using the accelerometer library

First of all, I had to create a WCF service reference from the XNA project to the Windows application. Unfortunately, while Windows Phone developer tools are in Beta, adding a service reference from inside Visual Studio 2010 does not work as expected, so I had to use a workaround that you can see in a great DarkGenesis post here (I am highly confident that this will be fixed when tools go RTM in a couple of weeks). However, when I implemented that and used the library in the game, I had to face an interesting problem regarding the frog’s movement. If you hold the accelerometer in a way (e.g. towards the X axis), the frog will go up continuously. So, I had to implement a strategy in which during the time between two updates from the accelerometer coming from WCF service (remember that the accelerometer library sends updates every 200 milliseconds) the player has to bring the accelerometer to the “near zero” position (all X,Y and Z values are close to zero). This was implemented using two instances of the same enumeration.

   1:      public enum ToMoveFrog
   2:      {
   3:          Nowhere,
   4:          Up,
   5:          Down,
   6:          Left,
   7:          Right
   8:      }

As you can understand, this enumeration helps to keep track of the direction the player has moved the accelerometer, thus the direction he wants the frog to move. I’m keeping track of the current selected direction and the previous one. Here is the code that is executed when an update from the accelerometer is received

   1:          void client_GetReportCompleted(object sender, GetReportCompletedEventArgs e)
   2:          {
   3:                  float X = e.Result.AxisX_G;
   4:                  float Y = e.Result.AxisY_G;
   5:                  if (X > 0.5 && frogMovementPrevious == ToMoveFrog.Nowhere )
   6:                  {
   7:                      frogMovement = ToMoveFrog.Up;
   8:                  }
   9:                  else if (X < -0.5 && frogMovementPrevious == ToMoveFrog.Nowhere)
  10:                  {
  11:                      frogMovement = ToMoveFrog.Down;
  12:                  }
  13:                  else if (Y > 0.5 && frogMovementPrevious == ToMoveFrog.Nowhere)
  14:                  {
  15:                      frogMovement = ToMoveFrog.Left;
  16:                  }
  17:                  else if (Y < -0.5 && frogMovementPrevious == ToMoveFrog.Nowhere)
  18:                  {
  19:                      frogMovement = ToMoveFrog.Right;
  20:                  }
  21:                  else
  22:                  {
  23:                      frogMovementPrevious = ToMoveFrog.Nowhere;
  24:                  }
  25:  
  26:          }

The method gets the values for the X and Y axis and then compares them to the thresholds (0.5 and –0.5), to decide on the fromMovement (instance of the ToMoveFrog enumeration). Moreover, the person performs a check on the fromMovementPrevious value (also an instance of ToMoveFrog) to check if the player has brought the accelerometer to the “near zero” position. Moreover, the code to update the frog’s position in the updateFromPosition is pretty straightforward

   1:              if (frogMovement == ToMoveFrog.Up)
   2:              {
   3:                  frogRectangle.Y -= frogRectangle.Height;
   4:                  frogState = FrogState.OnRoad;
   5:                  frogMovementPrevious = ToMoveFrog.Up;
   6:              }
   7:              else if (frogMovement == ToMoveFrog.Down)
   8:              {
   9:                  frogRectangle.Y += frogRectangle.Height;
  10:                  frogMovementPrevious = ToMoveFrog.Down;
  11:              }
  12:              else if (frogMovement == ToMoveFrog.Left)
  13:              {
  14:                  frogRectangle.X -= frogRectangle.Width;
  15:                  frogMovementPrevious = ToMoveFrog.Left;
  16:              }
  17:              else if (frogMovement == ToMoveFrog.Right)
  18:              {
  19:                  frogRectangle.X += frogRectangle.Width;
  20:                  frogMovementPrevious = ToMoveFrog.Right;
  21:              }
  22:  
  23:              frogMovement = ToMoveFrog.Nowhere;

Finally, a photo of the running game on the emulator using the accelerometer

As always, source code is free! (it includes the Accelerometer library) here: http://cid-10e568adbb498dc8.office.live.com/self.aspx/Windows%20Phone%20Source%20Code/FroggerWP7.zip