Creating the Lights Out Game in XAML/C#

In an earlier post, I wrote about creating a simple game using C#/XAML. After finishing this game, I realized it would be easy to create other games based on the UI and game logic that I used for that game and then decided to try another related game, Lights Out. In this game, you try and get all of the squares in a grid to turn from white to blue. The following video shows the game running:

High level Game logic

Game class

This class has all of the game, UI, and input logic. The design is similar to how the Simon game worked. The rendering code, input code, and code used for moving the user through the various levels is all in this class for now.

Level class

The level class contains the state for a level and is referenced by the game to draw the current level and contains the code for generating levels.

LevelSolver class

This class was a helper class that I created to solve levels. I pretty much just added this to the game because creating a solver for a game like this seemed like a fun challenge. This class takes a level and then graphs the moves using various strategies until it finds a solution.

When the application starts, the Game class is instantiated and this creates the UI for the current level and adds handlers for clicks onto squares onto the game board. While the app is running, user input manipulates the current game state based on the click handlers. Pretty simple!

UI and Controlling the Game

Rendering the game UI

To render the game UI, a canvas is passed to the Game. Dimensions for the canvas are determined and the canvas is partitioned based on the game board settings. After the game dimensions are determined, squares and their respective handlers are dynamically created. The following code shows how this is done:

I’m not going to go too deeply into the details, but you should get the general idea from the code.

Adding animations for game elements

In the various points where UI is animated, storyboards are created and these storyboards animate the various canvas elements. For example, the following code will render the animation run at the application startup:

This animation just moves a square into the screen off of the left side and slides in squares in a straight horizontal line.

The solver

The solver is really the interesting piece of code for this game, I’ll be adding a short breakdown of my solution in my next post.

Other interesting problems and errata

When I was creating the game initially, I had just toggled all of the bits to create game boards. This potentially could create unsolvable games. So, to address this, I reverse simulate a game using the Level class. The animation for completing the level was actually done using a loop as opposed to storyboard logic. The UI updates at just the right rate to flash the screen, but this should probably be done using storyboards. In yet another future post, I will be taking this app and giving it a much better look and feel consistent with the Metro design language. Hopefully I can complete it in time for the app store code contest, but I’m not crossing my fingers.