Question

我正在进行一个井字游戏，我试图比较两个阵列。一个阵列有获胜的答案组合：

var answers = ["1,2,3", "1,4,7", "2,5,8", "3,6,9", "4,5,6", "7,8,9", "1,5,9", "3,5,7"];

根据单击的div，数组将填充div的相关值。所以，如果＆＃39; X＆＃39;点击第1，第3和第1第5个div，玩家X的数组= 1,3,5。

如果玩家X然后点击方框2，他就赢了，因为他连续有3个，因为当1,3,5,2与answers数组进行比较时，answers[0]包含所有这些价值观也是如此。

我首先尝试比较字符串，但顺序是一个问题，所以尝试比较整数。仍然不确定这是否正确。

Answer 1

你可以迭代answers然后检查所选位置的winnig位置。

此提案使用

Array#some用于迭代answers。

some() 方法测试数组中的某个元素是否通过了由提供的函数实现的测试。
String#split，获取字符串中的获胜位置。

split() 方法通过将字符串分隔为子字符串将String对象拆分为字符串数组。
Array#every用于检查所有职位

every() 方法测试数组中的所有元素是否都通过了提供的函数实现的测试。
Array#indexOf用于针对项目测试数组。该项目将转换为数字。

indexOf() 方法返回可在数组中找到给定元素的第一个索引，如果不存在则返回-1。

＆＃13;

function check(pos) {
    var answers = ["1,2,3", "1,4,7", "2,5,8", "3,6,9", "4,5,6", "7,8,9", "1,5,9", "3,5,7"];
    return answers.some(function (a) {
        return a.split(',').every(function (b) {
            return pos.indexOf(+b) !== -1;
        });
    });
}

console.log(check([1, 3, 5]));    // false
console.log(check([1, 3, 5, 2])); // true

＆＃13;

Answer 2

每次玩家转弯时，您都会想要确认他们是否在转弯时获胜。这意味着您的数据结构应该支持轻松验证胜利，而无需太多的预处理。字符串不适合这种情况有几个原因。首先，如果您使用直接字符串比较，则无法正确匹配已完成的游戏，例如1,2,3,5，因为有些轮次对游戏的完成没有贡献。

这意味着您要通过将字符串拆分为数组并迭代其值来单独考虑每个框。然而，这仍然不是理想的，因为你必须在每个玩家的回合之后拆分字符串，即使结果数组总是相同的。所以你不妨将答案存储为数组数组。

然后，一旦你拥有了那个数组数组，你只需要验证该数组中有some个答案（即至少一个）every其中一个数组是{{3}在玩家的猜测中。

这导致了一个相当简洁的表达：

var answers = [
  [1,2,3], [1,4,7], [2,5,8], 
  [3,6,9], [4,5,6], [7,8,9],
  [1,5,9], [3,5,7]
];

function isWinningGuess(guesses) {
  return answers.some(answer => answer.every(box => guesses.includes(box)));
}

此处，guesses是一个数组，其中包含玩家选择的每个方框。

有关完整的工作示例，请参阅下面的代码段，然后运行演示应用程序。

＆＃13;

var answers = [
  [1,2,3], [1,4,7], [2,5,8], 
  [3,6,9], [4,5,6], [7,8,9],
  [1,5,9], [3,5,7]
];

function isWinningGuess(guesses) {
  return answers.some(answer => answer.every(x => guesses.includes(x)));
}

// Below code for visualization only
$(function() {
  var current = 0;
  var players = [
    { 'symbol': 'X', 'plays': [] },
    { 'symbol' : 'O', 'plays' : [] }
  ];

  $(".row > div").click(function() {
    if ($(this).text() != '-') return;
    var player = players[current];

    $(this).html("<span>" + player.symbol + "</span>");

    var row = $(this).closest('.row').index();
    var col = $(this).index();
    var boxNumber = row * 3 + col + 1;
    player.plays.push(boxNumber);

    $("#status").text("Last Move: " + player.symbol + ' chose ' + boxNumber);

    if (isWinningGuess(player.plays)) {
      $("#status").append('; ' + player.symbol + ' wins!');
      $(".row > div").off('click');
    }
    
    current ^= 1;
  });
});

＆＃13;

.row {
  height: 45px;
  margin-top: 5px;
}

.row > div {
  width: 45px;
  height: 45px;
  border: 1px solid green;
  background-color: pink;
  display: inline-block;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="result"></div>
<div id="status">Last Move: </div>

<div>
<div class="row">
  <div>-</div> <div>-</div> <div>-</div>
</div>
<div class="row">
  <div>-</div> <div>-</div> <div>-</div>
</div>
<div class="row">
  <div>-</div> <div>-</div> <div>-</div>
</div>
</div>

＆＃13;

比较2个数组，1个答案键，1个字符串

2 个答案: