Реализация пошаговой веб-игры с использованием MVC / Javascript

Question

Я реализую пошаговую браузерную игру, используя javascript и asp.net MVC, возможно, в будущем буду использовать html5.

У меня есть некоторые проблемы, связанные с этим, так как я довольно плохо знаком с asp.net MVC и javascript:

1. Я не знаю, как я могу взаимодействовать между JavaScript и MVC, что означает, как я могу создать графический интерфейс, который не перезагружает страницу, но отправляет информацию, переданную функции / действию, на сервер, который ее использует, и соответственно обновляет графический интерфейс.

   например: нажатие кнопки вызовет серверную функцию, которая обновит некоторые поля на сайте без перезагрузки страницы.

   естественно, я хочу сделать javascript ответственным только за графический интерфейс, и все вычисления будут на стороне сервера, и кажется, что:

   • Нажмите на что-нибудь

   • Отправка информации на сторону сервера

   • Расчет и обновление графического интерфейса пользователя

2. У меня есть много данных, которые нужно сохранить для каждого игрока во время боя и мне интересно, как лучше всего сохранить эти данные.

   Вероятно, у меня будет объект Battle, содержащий данные, который будет обращаться к базе данных и обновлять графический интерфейс с помощью javascript.

3. Так как это игра с переворотом, мне нужно будет внедрить систему, которая будет синхронизировать игроков. Лучший способ сделать это - создать таймер на каждом клиенте, что каждые 2 секунды будут извлекать информацию из базы данных и соответствующим образом обновлять графический интерфейс, если что-то изменилось (например, другой игрок сделал свой ход с Х-типом хода, нанесшим Х-урон). У вас есть лучшее решение для этого?

Спасибо.

Answer 1

Да, вам нужен Ajax и, возможно, несколько библиотек JavaScript, чтобы помочь в вашем одностраничном приложении.Вы могли бы начать создание прототипа с помощью jQuery , чтобы привыкнуть к подходу Ajax:

<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>

А вашему MVC-приложению на внутреннем сервере потребуется действие в контроллере для поддержки/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
    }
}

Это ни в коем случае не полное решение.Тем не менее, вы должны начать думать с точки зрения MVC и JavaScript / jQuery.Как только вы это освоите, я настоятельно рекомендую изучить некоторые альтернативы jQuery, если ваше приложение становится более сложным.jQuery.ajax может быстро превратиться в код спагетти!

Answer 2

Я хотел бы изучить длинный опрос javascript и асинхронную обработку на стороне сервера - чтобы клиент обновлялся сразу, что-то происходило на стороне сервера. Пример в java: http://www.playframework.org/documentation/1.2/asynchronous

Для создания модели клиентской части вы можете взглянуть на backbone.js

Кстати, поиск в ajax-приложении asp.net для чата может дать вам хорошие отправные точки в общении с клиентом