javascript - 以二维方式显示迷宫游戏服务的单元格

Question

我正在为 2D 迷宫游戏创建 Web API。我有一个带有两种 Get 方法的服务——一种用于检索所有单元格，另一种用于检索特定单元格详细信息(带有下一个可能的移动链接)。

对于请求 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>

特定单元格请求的响应如下(对于请求 http://localhost:51910/api/cells/21 ，当使用接受 header application/hal+xml 时)。如果允许在该方向导航，将添加链接(上、右、下和左)。

<?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 笛卡尔图中显示所有单元格，以及用户当前位置。我在谷歌上搜索了有助于显示单元格(带门/墙)的代码——但我找不到。

我发现很多教程都有生成迷宫的代码和算法。我不必生成迷宫。我已经定义了迷宫并且可用。我只需要绘制它以供用户查看。

实现此显示的最简单方法是什么？

注意:我需要根据服务返回的单元格，使用 javascript 应用 css 样式。它可以是任何 4X4 迷宫。

Answer 1

它看起来有点糟糕，但这更多地与未优化的选择 ad-hoc spritemap 有关。您应该能够根据您的数据为单元格分配类别。当然，包含结构也可以很容易地基于 div。

更新:我已经更新了这个答案，以消除所提供的数据。

有很多方法可以优化它，这只是一些快速而肮脏的东西，可以为您提供前进的方法。

例如，给定您的数据结构，使用 xpath 可能比将 xml 转换为 JSON 更容易。此外，人们可能会在房间墙壁的顶部使用 z-index 门图像，而不是像我所做的那样从 16 个房间中挑选一个。

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