Question

I am implementing browser turn-based game, using javascript and asp.net MVC, probably going to use html5 at the future.

I have some issues regarding it, since I am pretty new to asp.net MVC and javascript:

1. I don’t know how can I interact between javascript and MVC,
   which means how can I make a GUI that doesn’t reload the page but send the information given to a function/action at the server that uses it and update the GUI accordingly.

   for example: clicking on a button will call a server-side function that will update some fields at the website without reloading the page.

   naturally, I want to make the javascript responsible for the GUI only,
   and all the calculations will be on the server side, and it seems that:

   • Click on something

   • Send information to sever-side function

   • Calculate and update GUI

2. I have lot of data need to be saved for each player during the fight
   and I wonder whats the best place to save this data.

   I will probably have a Battle object containing the data, that will both access the database and update the gui using javascript.

3. Since its a turned-base game, I will have to implement a system that will sync between the players. The best way i think to do that is to create a timer on each client,
   that every 2 seconds will take information from the database and update the GUI accordingly if something has changed (for example, the other player done his move with X type of move dealt X damage). Do you have a better solution for this?

Thanks.

Answer 1

Yes, you need Ajax and possibly some JavaScript libraries to assist in your single page app. You might start your prototyping by using jQuery to get used to the Ajax approach:

<script type="text/javascript">
    $(function() {
        $('#battleHitButton').click(function(e) {
            $.ajax({
                type: 'POST',
                url: 'Battle/Hit',
                data: { 'opponent': 'someName', 'bonus': 42 },
                success: function(data) {
                    $('#result').html(data);
                    // do some other stuff after hit
                }
            });
        });
    });
</script>

And your MVC application on the back-end would need an action in a controller to support the /Battle/Hit URL

public class BattleController : Controller
{
    [HttpPost]
    public ActionResult Hit(BattleModel model)
    {
        string whoToHit = model.opponent;
        int bonusDamage = model.bonus;
        // do battle, persist to database, etc
    }
}

This is, by no means, a complete solution. However, it should get you started thinking in terms of MVC and JavaScript/jQuery. Once you get the hang of it, I’d highly recommend exploring some alternates to jQuery if your application gets more complex. jQuery.ajax can quickly turn into spaghetti code!