迷路ゲームサービスのために2Dでセルを表示

Question

私は2D迷路ゲーム用のWeb APIを作成しています。私は2つのGetメソッドを持つサービスを持っています.1つはすべてのセルを取得するメソッドで、もう1つは特定のセルの詳細を取得するメソッドです（次の移動リンクがあります）。

セルリストは、要求http://localhost:51910/api/cellsの次の形式で取得されます。次のようになり、特定の細胞の要求の

<Cell> 
    <BottomIsWall>true</BottomIsWall> 
    <IsExtCell>false</IsExtCell> 
    <IsStartCell>false</IsStartCell> 
    <LeftIsWall>true</LeftIsWall> 
    <RelativeName>Self</RelativeName> 
    <RightIsWall>false</RightIsWall> 
    <TopIsWall>false</TopIsWall> 
    <XVal>0</XVal> 
    <YVal>0</YVal> 
</Cell> 
<Cell> 
    <BottomIsWall>false</BottomIsWall> 
    <IsExtCell>false</IsExtCell> 
    <IsStartCell>true</IsStartCell> 
    <LeftIsWall>false</LeftIsWall> 
    <RelativeName>Self</RelativeName> 
    <RightIsWall>false</RightIsWall> 
    <TopIsWall>true</TopIsWall> 
    <XVal>1</XVal> 
    <YVal>0</YVal> 
</Cell> 

応答（ヘッダapplication/hal+xmlを受け入れる要求http://localhost:51910/api/cells/21、のために使用されます）。その方向にナビゲーションが許可されている場合は、リンク（上、右、下、左）が追加されます。

<?xml version="1.0" encoding="utf-8"?> 
<resource rel="self" href="~/api/cells/21"> 
    <link rel="down" href="~/api/cells/20" /> 
    <link rel="left" href="~/api/cells/11" /> 
    <link rel="up" href="~/api/cells/22" /> 
</resource> 

ユーザーは、使用可能なリンクをクリックして次のセルに移動できます。それぞれの応答で、すべてのセルを2Dデカルト図に表示し、ユーザーの現在の位置を表示する必要があります。私は（ドア/壁の）セルを表示するのに役立つコードのためにgoogled - しかし、私は1つを見つけることができませんでした。

私は迷路を生成するためのコードとアルゴリズムを持つ多くのチュートリアルを見つけました。私は迷路を生成する必要はありません。私はすでに迷路が定義され、利用可能です。私はちょうどそれを見るためにそれをプロットする必要があります。

このディスプレイを実現する最も簡単な方法は何ですか？

注：私は、サービスによって返された細胞に基づいて、JavaScriptを使用してCSSスタイルを適用する必要があります。それはどんな4X4迷路でもあり得る。

Answer 1

これは少し気が間違っていますが、最適化されていない選択肢のアドホックスプライトマップと関連があります。自分のデータに基づいてセルにクラスを割り当てることができるはずです。もちろん、それを含む構造体は簡単にdivにすることができます。

更新日： この回答は更新されており、提供されたデータは保証されていません。

これを最適化する方法はたくさんありますが、これは早く進んでいく方法を提供するためのすばらしいものです。

たとえば、データ構造がわかっている場合、xpathをJSONに変換するのと同じようにxpathを使用するのと同じように簡単です。また、私が行ったように16の部屋の1つを選ぶのではなく、部屋の壁の上に扉の画像をz-索引付けすることもあります。

// -------------------------------- 
 
// Maze data from service. 
 
// -------------------------------- 
 
var xmlString = "<root><Cell><BottomIsWall>true</BottomIsWall><IsExtCell>false</IsExtCell><IsStartCell>false</IsStartCell><LeftIsWall>true</LeftIsWall><RelativeName>Self</RelativeName><RightIsWall>false</RightIsWall><TopIsWall>false</TopIsWall><XVal>0</XVal><YVal>0</YVal></Cell><Cell><BottomIsWall>false</BottomIsWall><IsExtCell>false</IsExtCell><IsStartCell>true</IsStartCell><LeftIsWall>false</LeftIsWall><RelativeName>Self</RelativeName><RightIsWall>false</RightIsWall><TopIsWall>true</TopIsWall><XVal>1</XVal><YVal>0</YVal></Cell></root>"; 
 
// -------------------------------- 
 

 
// -------------------------------- 
 
// Convert the XML text to JSON 
 
// -------------------------------- 
 
var data = (function(xmlString){ 
 
    // -------------------------------- 
 
    // Changes XML to JSON 
 
    // see: https://davidwalsh.name/convert-xml-json 
 
    // -------------------------------- 
 
    function xmlToJson(xml) { 
 
     // Create the return object 
 
     var obj = {}; 
 

 
     if (xml.nodeType == 1) { // element 
 
      // do attributes 
 
      if (xml.attributes.length > 0) { 
 
      obj["@attributes"] = {}; 
 
       for (var j = 0; j < xml.attributes.length; j++) { 
 
        var attribute = xml.attributes.item(j); 
 
        obj["@attributes"][attribute.nodeName] = attribute.nodeValue; 
 
       } 
 
      } 
 
     } else if (xml.nodeType == 3) { // text 
 
      obj = xml.nodeValue; 
 
     } 
 

 
     // do children 
 
     if (xml.hasChildNodes()) { 
 
      for(var i = 0; i < xml.childNodes.length; i++) { 
 
       var item = xml.childNodes.item(i); 
 
       var nodeName = item.nodeName; 
 
       if (typeof(obj[nodeName]) == "undefined") { 
 
        obj[nodeName] = xmlToJson(item); 
 
       } else { 
 
        if (typeof(obj[nodeName].push) == "undefined") { 
 
         var old = obj[nodeName]; 
 
         obj[nodeName] = []; 
 
         obj[nodeName].push(old); 
 
        } 
 
        obj[nodeName].push(xmlToJson(item)); 
 
       } 
 
      } 
 
     } 
 
     return obj; 
 
    }; 
 
    // -------------------------------- 
 
    
 
    var _parser = new window.DOMParser(); 
 
    var xmlData = _parser.parseFromString(xmlString, "text/xml"); 
 

 
    return xmlToJson(xmlData); 
 
})(xmlString); 
 
// -------------------------------- 
 

 
// -------------------------------- 
 
// For each TD in the maze, find the service data and 
 
// set the room look. 
 
// -------------------------------- 
 
Array.from(document.querySelectorAll("tr")).forEach(function(row, rowIndex){ 
 
    Array.from(row.querySelectorAll("td")).forEach(function(col, colIndex){ 
 

 
    // --------------------- 
 
    // Find the data element for this cell 
 
    // --------------------- 
 
    var cellData = data.root.Cell.filter(function(data){ 
 
     var isRowMatch = data.YVal["#text"] == (3 - rowIndex); 
 
     var isColMatch = data.XVal["#text"] == colIndex; 
 
     return (isRowMatch && isColMatch); 
 
    }); 
 
    // --------------------- 
 
    
 
    var cellType = "cell-00"; 
 
    var cellRotation = "cell-south"; 
 

 
    // --------------------- 
 
    // if there is some issue with the data set the cell to the void 
 
    // --------------------- 
 
    if(cellData.length !== 1) { 
 
     col.classList.add(cellType); 
 
     col.classList.add(cellRotation); 
 
     return; 
 
    } 
 
    // --------------------- 
 
    
 
    // --------------------- 
 
    // Where are the doors? 
 
    // --------------------- 
 
    var isDoor_North = cellData[0].TopIsWall["#text"] === "false"; 
 
    var isDoor_East = cellData[0].RightIsWall["#text"] === "false"; 
 
    var isDoor_South = cellData[0].BottomIsWall["#text"] === "false"; 
 
    var isDoor_West = cellData[0].LeftIsWall["#text"] === "false"; 
 
    // --------------------- 
 

 
    // --------------------- 
 
    // Determine the classes based on where the doors are 
 
    // --------------------- 
 
    switch(true) { 
 
     case (isDoor_North && isDoor_East && isDoor_South && isDoor_West): 
 
      break; 
 
     case (isDoor_North && isDoor_East && isDoor_South && !isDoor_West): 
 
      break; 
 
     case (isDoor_North && isDoor_East && !isDoor_South && isDoor_West): 
 
      break; 
 
     case (isDoor_North && isDoor_East && !isDoor_South && !isDoor_West): 
 
      cellType = "cell-03"; 
 
      cellRotation = "cell-west"; 
 
      break; 
 
     case (isDoor_North && !isDoor_East && isDoor_South && isDoor_West): 
 
      break; 
 
     case (isDoor_North && !isDoor_East && isDoor_South && !isDoor_West): 
 
      break; 
 
     case (isDoor_North && !isDoor_East && !isDoor_South && isDoor_West): 
 
      break; 
 
     case (isDoor_North && !isDoor_East && !isDoor_South && !isDoor_West): 
 
      break; 
 
     case (!isDoor_North && isDoor_East && isDoor_South && isDoor_West): 
 
      cellType = "cell-04"; 
 
      cellRotation = "cell-east"; 
 
      break; 
 
     case (!isDoor_North && isDoor_East && isDoor_South && !isDoor_West): 
 
      break; 
 
     case (!isDoor_North && isDoor_East && !isDoor_South && isDoor_West): 
 
      break; 
 
     case (!isDoor_North && isDoor_East && !isDoor_South && !isDoor_West): 
 
      break; 
 
     case (!isDoor_North && !isDoor_East && isDoor_South && isDoor_West): 
 
      break; 
 
     case (!isDoor_North && !isDoor_East && isDoor_South && !isDoor_West): 
 
      break; 
 
     case (!isDoor_North && !isDoor_East && !isDoor_South && isDoor_West): 
 
      break; 
 
     case (!isDoor_North && !isDoor_East && !isDoor_South && !isDoor_West): 
 
      break; 
 
    } 
 
    // --------------------- 
 

 
    // --------------------- 
 
    // Assign the proper classes based on our data. 
 
    // --------------------- 
 
    col.classList.add(cellType); 
 
    col.classList.add(cellRotation); 
 
    // --------------------- 
 

 
    }); 
 
}); 
 
// ---------------------

.cell { 
 
    height: 36px; 
 
    width: 36px; 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 0; 
 
    background-repeat: no-repeat; 
 
    background-image: url(http://img.photobucket.com/albums/v323/ShadowDragon8685/KestralDefiant_zps88896fb8.png); 
 
} 
 

 
.cell-00 { background-position: -0px -15px; } 
 
.cell-01 { background-position: -115px -138px; } 
 
.cell-02 { background-position: -44px -173px; } 
 
.cell-03 { background-position: -254px -103px; } 
 
.cell-04 { background-position: -254px -278px; } 
 

 
.cell-north { transform: rotate(180deg); } 
 
.cell-east { transform: rotate(90deg); } 
 
.cell-south { transform: rotate(0deg); } 
 
.cell-west { transform: rotate(270deg); }

<table style="border-collapse: collapse"> 
 
    <tr><td class="cell"></td><td class="cell"></td><td class="cell"></td><td class="cell"></td></tr> 
 
    <tr><td class="cell"></td><td class="cell"></td><td class="cell"></td><td class="cell"></td></tr> 
 
    <tr><td class="cell"></td><td class="cell"></td><td class="cell"></td><td class="cell"></td></tr> 
 
    <tr><td class="cell"></td><td class="cell"></td><td class="cell"></td><td class="cell"></td></tr> 
 
</table>