Wednesday, September 25, 2013

Create an online text adventure using ASP.NET MVC

I think the best way to learn a new technology is to start using it in a way that is interesting, motivating and challenging. For me that usually means writing a game.

I learned C++ by writing my own versions of arcade games such as PacMan, Frogger or Tetris.

So when I decided to learn Microsoft's ASP.NET MVC framework, the natural choice was to create a game that would work in a web browser. The game of choice was a text adventure called 'Inca Curse' that I used to play as a kid.

MVC stands for Model, View, Controller. It's a way to organize your program into three distinct groups that each have their own responsibilities. The Controller takes care of the programming logic The View takes care of how your program presents itself to the browser and the Model takes care of the data: usually by reading and writing to a database.

I already knew how to program using ASP.NET Forms and still the learning curve was quite steep. I had to brush up on my C# skills and of course the MVC framework has its own set of challenges.  But once I got the hang of it, I really liked the way it worked.  It is quite elegant and allows you to create large, complex sites with relative ease.

MVC uses conventions.  For instance when you want to create code that responds to www.site.com/product, then you'd create a controller and call it ProductController.  Inside ProductController you can write methods that responds to Add, Edit or Remove.

An example: www.site.com/product/edit/22
This URL will look in ProductController for the Edit method which it will execute with parameter 22. 

Another example - http://incacurse.azurewebsites.net/adventure/start will execute the Start method of the AdventureController.  The web server will execute the code and serve a new page to the browser.

There is also a default controller that will execute when the website is requested without any additional information. For instance, if a user would browse to http://incacurse.azurewebsites.net (no controller, no method), the server would in fact serve the Index method of the HomeController.  So the result would be the exactly the same as browsing to http://incacurse.azurewebsites.net/home/index

Inca curse uses cookies to store all the data needed to play the game.  This data consists of the current location, all objects (and the location where the object is stored or if it is held by you), certain game states, and a copy of the text on the screen. 

If you use Internet Explorer and are curious, then you can actually look at the cookies and how the cookie data changes as you move from location to location.  Just press F12, click on Network, Start Capturing, Go to Detailed View, click on the 'Cookies' tab.  Here is an example of a typical cookie:
1100000003070610161719252712482122000013000021012327210050282942454647323600000003030024002400020100000000I AM IN A JUNGLE CLEARING |EXITS ARE SOUTH|I CAN ALSO SEE :|A BRANCH|TELL ME WHAT TO DO|GET BRANCH|IT IS HEAVY WITH LOTS OF LEAVES|TELL ME WHAT TO DO|HELP|TARZAN WOULD WEAR THEM SO WHY NOT STRIP THEM?|TELL ME WHAT TO DO|HELP|TARZAN WOULD WEAR THEM SO WHY NOT STRIP THEM?|TELL ME WHAT TO DO|THEEND
Cookies are just simple text files and it is possible to edit the cookie in order to cheat.  All you need to do is find the cookie on your computer.

Now just for fun - here is part of the actual code of the Index method inside the Adventure Controller:

public class AdventureController : Controller
{

    [HttpGet]  //This code responds to browser Get requests
    public ActionResult Index()

    {
        // Game class deals with the logic of the game
        Game game = new Game(); 
        // Parse class deals parsing user input.
 
       Parse parse = new Parse();
        if (CookieExists())
        {
            // If yes, Load Cookie data            

            string s = ReadCookie();
            parse.CookieToData(s, game, screen);
        }
        else
        {
            // no cookie found, it must be the start of a new game

            screen.ShowLocation(game);
            screen.WriteLine("TELL ME WHAT TO DO");

        }

        // Viewbag can be used to pass information to the view
        // In this game 22 lines of text are passed to the view

        SetViewBag();

        // Return the View to the browser
        return View();
    }
}


And this is what the game looks like when you play it.



Have a go!  Try you luck at the adventure.   If you go to the 'hints' section, you will get a brief introduction to the wonderful world of text adventures.

No comments:

Post a Comment