Anzeigen von Zellen in 2D für einen Labyrinth-Spieldienst

Question

Ich erstelle Web-API für ein 2D-Labyrinth-Spiel. Ich habe einen Dienst mit zwei Get-Methoden - eine für das Abrufen aller Zellen und eine für das Abrufen bestimmter Zelldetails (mit den nächsten möglichen Move-Links).

Die Zellenliste wird im folgenden Format für die Anforderung http://localhost:51910/api/cells abgerufen.

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

Antwort für die jeweilige Zelle Anfrage wird wie folgt sein (für die Anforderung http://localhost:51910/api/cells/21, wenn Header akzeptieren application/hal+xml verwendet wird). Die Links (oben, rechts, unten und links) werden hinzugefügt, wenn die Navigation in diese Richtung erlaubt ist.

Der Benutzer kann auf die verfügbaren Links klicken, um zur nächsten Zelle zu navigieren. Bei jeder Antwort muss ich alle Zellen in einem kartesischen Diagramm 2D mit der aktuellen Position des Benutzers anzeigen. Ich googelte nach Code, der hilft, die Zellen (mit Tür/Wand) anzuzeigen - aber ich konnte keinen finden.

Ich fand viele Tutorials, die Code und Algorithmus zum Generieren von Labyrinth hat. Ich muss kein Labyrinth erzeugen. Ich habe Labyrinth bereits definiert und verfügbar. Ich muss es einfach grafisch darstellen, damit der Benutzer es sehen kann.

Was ist der einfachste Ansatz zum Erreichen dieser Anzeige?

Hinweis: Ich brauche die CSS-Stile mit Javascript anwenden, basierend auf den vom Dienst zurück Zellen. Es kann jedes 4X4 Labyrinth sein.

Answer 1

Es sieht ein bisschen beschissen aus, aber das hat mehr mit der un-optimierten Auswahl ad-hoc spritemap zu tun. Sie sollten den Zellen basierend auf Ihren Daten Klassen zuweisen können. Die beinhaltende Struktur könnte natürlich genauso leicht div sein.

UPDATE: Ich habe diese Antwort aktualisiert, um aus den bereitgestellten Daten zu entfernen.

Es gibt viele Möglichkeiten, dies zu optimieren, dies ist nur etwas schnell und schmutzig, um Ihnen eine Möglichkeit zu geben, vorwärts zu gehen.

Zum Beispiel könnte es angesichts Ihrer Datenstruktur genauso einfach sein, Xpath zu verwenden, als das XML in JSON zu konvertieren. Außerdem könnte man Türbilder auf die Zimmerwände z-indexieren, anstatt eines von 16 Zimmern auszuwählen, wie ich es getan habe.

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