Использование IndexedDB в вашей игре для Windows 8

Поскольку я собирал свой предыдущий пост об уведомлениях в игре HTML 5 на Windows 8 , я не мог не подумать, что должен быть лучший способ управлять хранилищем локальной таблицы лидеров. Если вы не знакомы с этим образцом , это простая игра, в которой вы видите, сколько раз вы можете коснуться прыгающего мяча, прежде чем он достигнет границ дисплея десять раз.

Что плохого в использовании ApplicationData для таблицы лидеров?

В этом примере реализована локальная таблица лидеров, которая использует хранилище данных роуминга в хранилище данных приложений Windows 8 , как видно из этого фрагмента кода в методе Scores.setScores :

   var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
   roamingSettings.values["scores"] = JSON.stringify(scoresToSet);

Здесь ScoresToSet представляет собой массив объектов JavaScript, каждый из которых содержит игрока, счет и уровень квалификации, например

       { player:"Jim", score: 32, skill: 1 }

Поскольку хранилище в роуминге синхронизируется с облаком, текущая реализация выводит таблицу лидеров на любые другие устройства, на которых пользователь установил игру, и это может быть, а может и не быть функцией, которую вы хотели бы показать. В конце концов, в игру может быть сложнее играть с различными форм-факторами, касанием мыши и т. Д. Так имеет ли смысл объединять таблицу лидеров в одну на этих разных устройствах? В противном случае было бы тривиально переключиться на локальное хранилище данных приложения, просто ссылаясь на Windows.Storage.ApplicationData.current.localSettings вместо roamingSettings .

Это не та часть, которая беспокоила меня, хотя; это был этот код:

  for (var i = scores.length - 1; i >= 0; i--) {
      if (score.score > scores[i].score) {
          if (i < scores.length - 1) {
              scores[i + 1] = scores[i];
              scores[i] = score;
              newScoreRank = i + 1;
          }
          if (i === 0) {
              scores[i] = score;
              newScoreRank = 1;
          }
      } else if (score.score === scores[i].score && i < scores.length - 1) {
          scores[i + 1] = score;
          newScoreRank = i + 2;
          break; 
      }
  }

Конечно, это всего лишь пример приложения, но посмотрите на объем кода, необходимый для манипулирования таблицей лидеров, и вставьте новый счет в нужном месте, чтобы впоследствии его можно было массово сериализовать в хранилище в роуминге. Кроме того, есть ограниченная возможность показывать другие интересные виды игрового процесса, например историю всех игр, которые Джо завершил, или таблицу лидеров, отфильтрованную по уровню мастерства.

Дело за IndexedDB

Чтобы получить желаемую гибкость, нам нужно хранить больше, чем просто снимок таблицы лидеров, и нам нужны некоторые возможности для выполнения хотя бы элементарных специальных запросов к данным. Это то, для чего SQL Server подойдет! Конечно, в контексте приложений Магазина Windows гораздо меньше вариантов JavaScript, SQL Server и серверов реляционных баз данных не поддерживаются, если только они не размещены в качестве службы.

Хорошая новость заключается в том, что приложения JavaScript встроенные в Windows 8 могут использовать индексированную спецификацию API баз данных в W3C или IndexedDB для краткости. IndexedDB — это нереляционное хранилище объектов JavaScript-объектов, обеспечивающее семантику транзакций с помощью следующих конструкций:

Если вы раньше работали с системами управления реляционными базами данных, эти понятия должны быть знакомы, но имейте в виду, что здесь нет реляционной семантики — это означает, что нет соединений! Если вы возились с некоторыми предложениями NoSQL «ключ-значение» , это не будет шоком, и вы будете чувствовать себя как дома.

Реализация локальной таблицы лидеров

Определение схемы

Таблица лидеров в текущем примере HTML 5 содержит объекты с согласованной схемой трех свойств (или атрибутов):

игрок : имя игрока

оценка : оценка игры

skill: уровень навыка связанной игры (от 0 до 2, от Basic до Advanced)

Одна из проблем этой объектной структуры заключается в том, что уникальность не обязательно гарантируется. Я мог забить одинаково в двух играх на одном уровне. В этом случае я был бы вынужден добавить метку времени, которая указывает, когда игра была завершена, и это то, что я, вероятно, хотел бы показать в любом случае в таблице лидеров — чем длиннее кто-то на вершине, тем более убедительным является попытка бить их!

В этом случае временная метка (в формате UTC) будет отлично работать в качестве ключа, поскольку она будет уникальной на этом устройстве. Но вы также можете использовать генератор ключей, который просто создает монотонно возрастающую последовательность значений (до 2 ^ 53) всякий раз, когда нужен ключ.

Теперь давайте вернемся к основным конструкциям IndexedDB и сопоставим с ними несколько конкретных имен, которые будут использоваться в реальном коде:

Чтобы обновить таблицу лидеров для использования IndexedDB, нам просто нужно заменить реализацию методов, которые в настоящее время обращаются к хранилищу в роуминге, и этот код локализован для трех методов, расположенных в Scores.js.

• getScores возвращает массив JavaScript из десяти лучших результатов, полученных из перемещаемого хранилища. Этот метод будет изменен, чтобы возвращать оценки из IndexedDB, возможно, с некоторыми критериями фильтра, позволяющими более богатый набор параметров
• setScores записывают снимок таблицы лидеров, сериализованной как JSON, обратно в хранилище в роуминге. Обновленная реализация не нуждается в этом методе.
• newScore добавляет оценку из недавно завершенной игры в соответствующую позицию массива таблицы лидеров JavaScript, а затем записывает весь массив обратно в роуминг-хранилище (через setScores ). В обновленной реализации эта работа сводится к простой операции вставки (или, точнее, запроса на запись ) в IndexedDB.

Создание базы данных

Нам нужно начать с создания базы данных, если она не существует (и это не будет первый раз, когда приложение будет запущено на устройстве с Windows 8). Хорошее место для этого в игровой среде HTML 5 — метод initialize модуля Game (в game.js ):

     initialize: function (state) {

            

         if (GameManager.gameId === null) {

             this.stateHelper = state;

             this.state = state.internal;

             this.settings = state.external;

         }

      

         var db = window.indexedDB.open("leaderboard", 1);

        db.onupgradeneeded = function (e) {

            GameManager.leaderboard = e.target.result;

     

            scoresTable = GameManager.leaderboard.createObjectStore(
                                              "scores", { keyPath: "gamedate" });

            scoresTable.createIndex("playerIdx", "player", { unique: false });

            scoresTable.createIndex("scoreIdx", "score", { unique: false });

            scoresTable.createIndex("skillIdx", "skill", { unique: false });

     

            txn = e.target.transaction;

            txn.onerror = function () { console.log("Schema definition failed"); };

            txn.oncomplete = function () { console.log("Schema definition worked"); };

        };

        db.onerror = function () { console.log("Database creation failed"); };

        db.onsuccess = function (e) {

            GameManager.leaderboard = e.target.result;

        };

    },

Добавление новых результатов в базу данных

На данный момент база данных пуста, и записи добавляются каждый раз, когда игрок завершает игру и регистрируется новый счет. Это происходит в методе newScore модуля Scores ( Scores.js ). Если код извлек последнюю известную таблицу лидеров из хранилища в роуминге и вручную вставил новую оценку (если она появилась в первой десятке), теперь новая запись оценки просто вставляется в базу данных:

         newScore: function (score) {

      

             var txn = GameManager.leaderboard.transaction(["scores"], "readwrite");

      

             scoreTable = txn.objectStore("scores");

             insRequest = scoreTable.add(

                 {

                     player: score.player,

                     score: score.score,

                    skill: score.skill,

                    gamedate: new Date()

                });

        },

Получение результатов из базы данных

В исходной реализации поток кода для заполнения таблицы лидеров шел примерно так:

ScoresPage пользовательский интерфейс содержит ListView , который привязан к массиву JavaScript (модели представления) , возвращенного GetItems в scoresPage.js . getItems, в свою очередь, вызывает getScores, чтобы извлечь последний снимок таблицы лидеров из настроек роуминга, по сути захватывая модель и создавая модель представления. Все это происходит синхронно. На приведенной выше схеме цепочка вызовов обозначена сплошными синими стрелками, а возвращаемые данные представлены красными пунктирными стрелками.

         getScores: function (populateViewModel) {

      

             var scoresFromDb = [];

      

             var txn = GameManager.leaderboard.transaction(["scores"], "readonly");

             txn.oncomplete = function () {

                 populateViewModel(scoresFromDb);

             };

      

            var query = txn.objectStore("scores")

                           .index("scoreIdx")

                           .openCursor(null, "prev");

            query.onsuccess = function (e) {

                var cursor = e.target.result;

                if (cursor) {

                    scoresFromDb.push(cursor.value);

                    cursor.continue();

                }

            };

        },

        function getItems(updateBindings) {

             // TODO: Update desired background styling values of the score table here

             var colors = ["rgba(209, 211, 212, 1)", "rgba(147, 149, 152, 1)", "rgba(65, 64, 66, 1)"];

      

             var scores = GameManager.scoreHelper.getScores(

                 function (scores) {

                     var items = [];

                     var groupId = 0;

      

                    // TODO: Update to match your score structure

                    for (var i = 0; i < scores.length; i++) {

                        items.push({

                            group: pageData.groups[groupId],

                            key: "item" + i,

                            rank: i + 1,

                            player: scores[i].player,

                            score: scores[i].score,

                            skill: GameManager.scoreHelper.getSkillText(scores[i].skill),

                            backgroundColor: colors[i % colors.length],

                        });

                    }

     

                    updateBindings(items);

                });

        }

         function ready(element, options) {

      

             // Set up ListView

             WinJS.UI.processAll(element)

                 .done(function () {

                     if (list) {

                         var listView = element.querySelector(".collectionList").winControl;

                         pageData.groups = getGroups();

                         getItems(function (items) {

                            pageData.items = items;

                            list = new WinJS.Binding.List(pageData.items);

                            groupedItems = list.createGrouped(groupKeySelector, groupDataSelector);

                            listView.forceLayout();

                        });

                    }

                });

        }

        var query = txn.objectStore("scores")
                       .index("scoreIdx")
                       .openCursor(null, "prev");
        query.onsuccess = function (e) {
            var cursor = e.target.result;
            if (cursor) {
                scoresFromDb.push(cursor.value);
                cursor.continue();
            }
        };

        var query = txn.objectStore("scores")
                       .index("skillIdx")
                       .openCursor(IDBKeyRange.only(skillLevel), "prev");
        query.onsuccess = function (e) {
            var cursor = e.target.result;
            if (cursor) {
                scoresFromDb.push(cursor.value);
                cursor.continue();
            }
            scoresFromDb.sort(function (a, b) {
                return b.score - a.score;
            });
        };