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

Matching Javascript User array to "Solution" Array

本文关键字：数组解决方案 Javascript 用户用户数更新时间：2023-09-26

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

我的问题是，似乎唯一的事情，我目前正在改变我的网格是类持有每个瓷砖的css样式。由于我的表是通过javascript在飞行中创建的，是否有任何方法可以比较这两个表，而不必显示我的解决方案网格?即[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;
}

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

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");

小提琴

为了后代，如果你有很多数据，你可以使用这个方法(从这里):

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)){...}

假设你有一个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]);
        });
    });
}