Question

寻找正确的方向。我正在开发一个纯javascript逻辑游戏，用户必须在每行/每列中获得3种颜色而不连续使用3种颜色。我现在要做的是将用户网格与我创建的解决方案网格进行比较。

我的问题是，我正在改变网格上唯一的东西就是拥有每个磁贴的css样式的类。由于我的表是通过javascript动态创建的，有什么方法可以比较两个表而不必显示我的解决方案网格？ I.e [0] [0] == [0] [0]，但我无法弄清楚我必须做些什么才能比较两者。

*我不打算为我创建一个功能，而是寻找一个可以开始的地方

    //6x6 array
var solutionArray = new Array(6);
solutionArray[0] = new Array(6);
solutionArray[1] = new Array(6);
solutionArray[2] = new Array(6);
solutionArray[3] = new Array(6);
solutionArray[4] = new Array(6);
solutionArray[5] = new Array(6);

    //6x6 array
var userArray = new Array(6);
userArray[0] = new Array(6);
userArray[1] = new Array(6);
userArray[2] = new Array(6);
userArray[3] = new Array(6);
userArray[4] = new Array(6);
userArray[5] = new Array(6);

var tile = {colour1:blue, colour2:white, colour3:grey};
var z = "";
var blue = tile.colour1 = "blue";
var white = tile.colour2 = "white";
var grey = tile.colour = "grey";

solutionArray[0][0] = blue;
solutionArray[0][1] = white;
solutionArray[0][2] = blue;
solutionArray[0][3] = blue;
solutionArray[0][4] = white;
solutionArray[0][5] = blue;

solutionArray[1][0] = white;
solutionArray[1][1] = blue;
solutionArray[1][2] = white;
solutionArray[1][3] = blue;
solutionArray[1][4] = blue;
solutionArray[1][5] = white;

solutionArray[2][0] = blue;
solutionArray[2][1] = white;
solutionArray[2][2] = blue;
solutionArray[2][3] = white;
solutionArray[2][4] = white;
solutionArray[2][5] = blue;

solutionArray[3][0] = white;
solutionArray[3][1] = blue;
solutionArray[3][2] = white;
solutionArray[3][3] = white;
solutionArray[3][4] = blue;
solutionArray[3][5] = blue;

solutionArray[4][0] = blue;
solutionArray[4][1] = blue;
solutionArray[4][2] = white;
solutionArray[4][3] = blue;
solutionArray[4][4] = white;
solutionArray[4][5] = white;

solutionArray[5][0] = blue;
solutionArray[5][1] = white;
solutionArray[5][2] = blue;
solutionArray[5][3] = white;
solutionArray[5][4] = blue;
solutionArray[5][5] = white;

//USER ARRAY
userArray[0][0] = blue;
userArray[0][1] = grey;
userArray[0][2] = grey;
userArray[0][3] = grey;
userArray[0][4] = grey;
userArray[0][5] = blue;

userArray[1][0] = grey;
userArray[1][1] = blue;
userArray[1][2] = grey;
userArray[1][3] = grey;
userArray[1][4] = grey;
userArray[1][5] = white;

userArray[2][0] = grey;
userArray[2][1] = grey;
userArray[2][2] = blue;
userArray[2][3] = grey;
userArray[2][4] = white;
userArray[2][5] = grey;

userArray[3][0] = grey;
userArray[3][1] = grey;
userArray[3][2] = grey;
userArray[3][3] = grey;
userArray[3][4] = grey;
userArray[3][5] = grey;

userArray[4][0] = grey;
userArray[4][1] = grey;
userArray[4][2] = white;
userArray[4][3] = grey;
userArray[4][4] = grey;
userArray[4][5] = white;

userArray[5][0] = grey;
userArray[5][1] = grey;
userArray[5][2] = grey;
userArray[5][3] = grey;
userArray[5][4] = blue;
userArray[5][5] = white;

var x = document.createElement("TABLE");
x.setAttribute("id", "gridTable");
document.body.appendChild(x);

for (i = 0; i < 6; i++) {
  //output the row tag
  var y = document.createElement("TR");
  y.setAttribute("id", "row" + i);
  document.getElementById("gridTable").appendChild(y)

  for (j = 0; j < userArray.length; j++) {

    ///output the td tag
    var z = document.createElement("TD");
    if (userArray[i][j] == blue) {
      z.setAttribute("class", "blue");
    } else if (userArray[i][j] == white) {
      z.setAttribute("class", "white");
    } else if (userArray[i][j] == grey) {
      z.setAttribute("class", "grey");
    }
    document.getElementById("row" + i).appendChild(z);

  }
}

document.querySelector("#gridTable").addEventListener("click", function(event) {
  if(event.target.classList.contains("blue")){
    event.target.className = 'grey';
  }else if(event.target.classList.contains("grey")){
    event.target.className = 'white'
  }else if(event.target.classList.contains("white")){
    event.target.className = 'blue'
  }
});

.blue {
  background-color: blue;
}
.grey{
background-color:grey;
}

.white{
background-color:white;
}
td {
  text-align: center;
  border: 1px solid black;
  padding: 3px;
  height: 50px;
  width: 50px;
}
table {
  border-collapse: collapse;
}
table td {
  cursor: pointer;
}

Answer 1

你可以对数组进行字符串化并比较它们，比循环更快更容易......

var array1 = ["asasdf","asdf","asdf"];
var array2 = ["asasdf","asdf","asdf"];
var array3 = ["asdf","asdf","asdf"];

if(JSON.stringify(array1)===JSON.stringify(array2)) alert("one and two are same");
if(JSON.stringify(array1)!==JSON.stringify(array3)) alert("one and three are not same");

fiddle

对于后代，如果您有大量数据，可以使用此方法（from here）：

Array.prototype.equals = function (array) {
    // if the other array is a falsy value, return
    if (!array)
        return false;

    // compare lengths - can save a lot of time 
    if (this.length != array.length)
        return false;

    for (var i = 0, l=this.length; i < l; i++) {
        // Check if we have nested arrays
        if (this[i] instanceof Array && array[i] instanceof Array) {
            // recurse into the nested arrays
            if (!this[i].equals(array[i]))
                return false;       
        }           
        else if (this[i] != array[i]) { 
            // Warning - two different object instances will never be equal: {x:20} != {x:20}
            return false;   
        }           
    }       
    return true;
}

使用方式：if(myarray.equals(anotherArray)){...}

Answer 2

假设您有一个3乘3的二维解数组和3乘3的用户数组：

var equal = true;

function compare(userArray, solutionArray){
    userArray.forEach(function(subArray, index){
        userArray[index].forEach(function(item, subindex){
            equal = equal && (userArray[index][subindex] === solutionArray[index][subindex]);
        });
    });
}

将Javascript用户数组与“解决方案”数组匹配

2 个答案: