DevPocalypse

ASP.Net MVC + jQuery = Simple Multiplayer Action

The basic idea of the game is that multiple players can exist on a grid (a “screen”) and move around to unoccupied spaces (“blocks”) adjacent to their current location. I had grand hopes of being able to click another player to attack them and include some basic chat, but alas, it was not meant to be. At least not for this presentation. My hope is to continue working on this as a single sample app I can use to illustrate various MVC techniques for future speaking engagements.

Let’s take a gander at what the app looks like when it is running:

Yup, like I said: basic. So those two little guys are players. You can’t see it in a screenshot, but when you click a square next to where your player is standing, jQuery will smoothly animate the transition of your character from the current block to the new block. What is even neater is that when a player on a different computer moves their player, you also see the same jQuery animation execute. How are we doing this? Well first we use a simple polling script (from Game.js):

   1: $(document).ready(function() {

   2:     updateScreen();

   3:     setInterval(updateScreen, updateFrequency * 1000);

   4: });

Ultimately, this code calls an action named GetCurrentScreen on the GameController. Currently this executes twice a second so as to be nice and responsive, but of course I have no idea how that would handle under load. Here is the entire GameController class:

   1: using System;

   2: using System.Linq;

   3: using System.Web.Mvc;

   4: using DevPocalypse.Domain;

   5: using DevPocalypse.Domain.Repositories;

   6: using DevPocalypse.Website.App.ModelBinders;

   7:

   8: namespace DevPocalypse.Website.Controllers

   9: {

  10:     [Authorize]

  11:     public class GameController : Controller

  12:     {

  13:         public ICharacterRepository CharacterRepository { get; set; }

  14:         public IScreenRepository ScreenRepository { get; set; }

  15:

  16:         public ViewResult Index()

  17:         {

  18:             ViewData["Title"] = "Play!";

  19:             return View();

  20:         }

  21:

  22:         public JsonResult GetCurrentScreen(

  23:             [ModelBinder( typeof( CurrentCharacterBinder ) )]

  24:             Character currentCharacter

  25:             )

  26:         {

  27:             // IE will cache aggressively if we don't set our expiration date

  28:             Response.ExpiresAbsolute = DateTime.Now.AddYears( -1 );

  29:

  30:             // get screen character is on, and a list of all characters on that screen

  31:             var screen = ScreenRepository.Retrieve().Where( s => s.ID == currentCharacter.ScreenID ).Single();

  32:             var characters = CharacterRepository.Retrieve().Where( c => c.ScreenID == screen.ID ).ToList();

  33:             return Json( new { Screen = screen, MyCharacter = currentCharacter, Characters = characters } );

  34:         }

  35:

  36:         public void MoveTo(

  37:             [ModelBinder( typeof( CurrentCharacterBinder ) )]

  38:             Character currentCharacter,

  39:             int x,

  40:             int y

  41:             )

  42:         {

  43:             currentCharacter.X = x;

  44:             currentCharacter.Y = y;

  45:             CharacterRepository.Update( currentCharacter );

  46:         }

  47:     }

  48: }

Pretty simple, huh? Note how nice and easy it was to return an anonymous type as a JSON (JavaScript Object Notation) object via the Json(obj) method. Finally, here is the bit of Game.js that performs the actual animation (this is done in a loop updating all characters – hence the id and c variables):

   1: $("#" + id).animate({

   2:     left: currentCharacters[c].X * 33,

   3:     top: currentCharacters[c].Y * 33

   4: }, updateFrequency * 1000 / 4);

Gotta love jQuery. There is plenty more to look at in the source, so feel free to download it, check it out, play around with it – use it for whatever you want.

Thanks, and I hope to see you at the next CodeCamp!

Download: DevPocalypse.zip (762.63 kb)

I don’t yet have word on the final presentation schedule, but here is the abstract for the presentation I will be giving:

Creating an AJAX MMORPG With jQuery & Asp.Net MVC

C’mon, it’s Saturday, let’s take a break from those enterprise class systems and make something that we can enjoy ourselves! Over the past several years users have become increasingly conditioned to expect a fast, responsive UI that communicates changes in a clear manner – even in the apps we build at our day jobs. We’ll see how jQuery allows us to build such a UI using AJAX and animations in a quick, cross-platform manner. We’ll also see how ASP.Net MVC makes it easier than ever to integrate with AJAX frameworks like jQuery. By the end of our session, we’ll even have a fun little game to play!

In the following two weeks I’ll be posting the code I’m currently creating as the basis of this presentation to my blog so that everyone can download it and check it out. I hope to see some of you at the CodeCamp!