A simple SPA game with AngularJS and ASP.NET Web API 2

This is a simple single page application (SPA) game which has a AngularJS (1.x) front-end talking to a ASP.NET Web API 2 back-end. This is in the initial stage and there’s plenty to improve (see end of this article).

How the game works

Player 1 sets a word for player 2 to guess. This word is sent to the server, which returns a unique game key. This key is manually given to player 2 who uses it to retrieve the word they are supposed to guess (masked on the UI).

This slideshow requires JavaScript.

Under the hood

Player 1 sends a HTTP POST request with the word they want player 2 to guess to the server. The server returns JSON data with a unique game key, which player 2 then uses to retrieve the word (masked) that they should guess. Player 2’s guesses are handled client-side using AngularJS.

gtwuml1

A few key code snippets.

Sever-side: A very simple API. A POST request handler that puts the new word in the database and generates a corresponding unique game key; and, a GET request handler that returns the underlying target word to guess for a given unique game key.

Client-side: AngularJS script to handle client-side player 2 gameplay.

The code that updates the state of the guessed string given a new character guess.

And the corresponding unit tests (using QUnit)

Of course, this is in the initial stages and there’s much to improve, including the following:

  • Currently, the entire word that player 2 is supposed to guess comes to their client. Player 2 could easily retrieve this word (and cheat!) using dev tools in their browser. A solution would be to do the checking – of whether the candidate letter that player 2 entered occurs in the target – on the server-side.
  • Plenty of user interface improvements. For example, after player 2 successfully guesses the word, the input box and “check” button should be hidden. Could be easily with ng-hide.
  • Player 1 doesn’t, currently, have a way of being notified when Player 2 finishes the game. This could be done using server-to-client messaging using SignalR.

You can find the full code on GitHub.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s