Coding4Fun Blog

Reversi XAML/C# Windows Store Sample Game

Description

So you got a new Windows 8 PC or Surface RT this holiday season? And since you're reading this, you're likely someone who likes to code. So of course you want to code something up for your new Windows 8 PC/Surface! What's more fun than digging into a game?

Today's project is an "end-to-end" Windows Store game that runs great on PC's (x86/x64) and the Surface RT (ARM).

And as an added bonus you get to see MVVM in action, Sharing contracts (so you can share your awesomeness with friends and family) and is even packaged in such a way as you can use the "engine" with other WinRT supported languages too!

Oh and finally there's good bit of documentation that details how everything works.

Reversi XAML/C# sample board game app

The Reversi sample is an end-to-end board game app that shows some common features of Windows Store apps in a real-world setting. It also shows the use of XAML and C# features to create a layered (MVVM) app structure that is helpful as an app becomes more complex.

For a general introduction to the sample, see Developing Reversi.

To learn how the sample uses some features without having to understand the whole sample, see Reversi feature scenarios.

To learn how the overall sample works, see Reversi app structure, which describes the layers of the app and the parts in each layer. 

image

The Reversi sample shows you:

This sample represents a work in progress. Not every scenario has documentation coverage, and some scenarios have only simple implementations. The sample is provided as-is, with no guarantees that it meets store certification requirements. However, the goal of this project is to provide accurate guidance on designing and developing a complete Windows Store app. Additional work is currently planned to ensure that the app is fully compliant with store requirements.

Changes in the 12/6 release

This release differs from the initial release in the following ways:

  • The share contract has been implemented to share an image of the current game, including text info describing its state. This info is shared in a variety of formats to increase the number of compatible share targets.
  • The ReversiGame project has been refactored into a Windows Runtime component to make it reusable in Windows Store apps based on other languages (such as JavaScript), and to enable replacement with a C++ implementation in order to optimize performance.
  • The ReversiGame and ReversiTests projects have been renamed to ReversiGameComponent and ReversiGameComponentTests to make their roles clearer.

Developing Reversi, a Windows Store game in C# and XAML (Windows)

The Reversi board game app is an end-to-end sample that shows some common features of Windows Store apps in a real-world setting. It also shows the use of XAML and C# features to create a layered app structure (using the Model-View-ViewModel or MVVM pattern) that is helpful as an app becomes more complex. This topic introduces the sample and provides links to additional documentation.

For a short intro to MVVM, see Using the Model-View-ViewModel pattern.

To learn how this sample uses particular features without having to understand the whole sample, see Reversi feature scenarios.

To learn how the overall sample works, see Reversi app structure, which describes the layers of the app and the parts in each layer.

Note  This documentation reflects the current state of the sample at the time of writing. See the following links for the latest code and info about any updates.

...

Reversi is one of the most common board games implemented on computers. This is because the rules and artificial intelligence (AI) are relatively easy to implement, and the rules are over a hundred years old and are thus not under copyright. It also represents a programming problem that is not too hard but also not too easy.

The Reversi sample app includes features that let a player:

  • Read the rules of the game.
  • Play against other humans or against an AI at several difficulty levels.
  • Pause the clock when the game isn't active.
  • Show and hide the clock.
  • Show and hide visual indications of the legal moves and the spaces affected by the previous move.
  • Undo and redo moves to explore alternate plays.
  • Play the game on different board sizes.

This set of features provides enough complexity to represent a truly "real world" app, but with enough simplicity to keep the app relatively small for learning purposes.

Reversi feature scenarios (Windows)

In this article

The Reversi sample uses several common features of Windows Store apps using XAML and C#. This topic describes how the sample uses some of these features, and provides links to key feature topics.

This topic does not require you to understand the whole sample, but it does assume that you already know XAML and C#, and already understand the basics of each feature, or are willing to learn by reading the linked topics. For info on app development fundamentals, see Create your first Windows Store app using C# or Visual Basic.

...

Reversi app structure (Windows)

In this article

The Reversi sample uses a layered structure known as the Model-View-ViewModel (MVVM) pattern. This structure separates UI from non-UI code, which can simplify debugging, testing, and future development. This topic describes each layer in the sample, the parts in each layer, and how all the parts work together.

The Reversi sample differs from simpler XAML samples that put most of their non-XAML code in code-behind files. Reversi adds code to code-behind files in a few cases, but moves most of its non-XAML code to other layers and uses data binding to connect those layers to the UI.

The Reversi sample also differs from more complex XAML samples that use more advanced techniques, including separate MVVM frameworks. Such frameworks are useful for increasingly complex

...

Okay, okay... I think you now see there's a number of interesting things to read about, learn and see in the game.

Let's take a look at it. Here's a snap of the Solution. BTW, kudu's to the authors for including Unit Tests. It's great to see something like that included in a "sample".

image

So you can the game and game component are broken into the two pieces mentioned toward the beginning of the post (aka the 12/6/2012 note).

If you're like me, you're wondering if this really works on the Surface RT?

Yep! I'm here to tell, and show, you it does. There's just a couple things to do to get it run on the Surface RT, both pretty easy.

First, you need to change the Active Platform from x86 to All CPU's.

This is how it looks when first downloaded.

image

So obviously this will be a problem when trying to deploy it to an ARM device... Just switch the Active Solution Platform to Any CPU.

image

image

So now that it's possible to run it on a Surface RT, how do you get it over there? For dev's there's two primary ways. The approach I use is via Remote Debugging. Getting this setup isn't hard, but does take a few steps. Tim Heuer has a great write-up about that, Remote Debugging your Windows Store app on your Surface.

The other approach is to side-load an app package.

image

image

image

Which creates...

image

You'd copy all these to the Surface RT and then execute the included powershell, *ps1, script to install the app.

Both deployment schemes have their pluses and minus, where the remote debugger is much easier when both devices are on the same network, and the appdevpackage is perfect when the devices are not...

So I said I'd show you?

image

image

I think that's enough to get you started? Code, doc's screenshots, stuff to learn and a pretty complete game to play (where I... um... "invested" too much time in when writing this post up... Wink. Now that's the way to start the year!

The Discussion

  • Duncanma

    Reversi, or more specifically ninuki-renju was the first 'complete app' project that I was given in university. I loved working on that game Smiley

    Our only limitation for the AI was think-time, so if you could optimize a loop or an if-statement it made all the difference. All built in Think LightSpeed Pascal... a really long time ago.

     

Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.