获取2D数组中元素的位置

Question

所以我建立了一个基于回合制的棋盘游戏，需要包含2个可以在地图上移动的玩家。我坚持在2D阵列中获得玩家的位置（这只是一个简单的div元素）。我尝试过使用indexOf，但即使将它放在onclick函数中，也总是返回0。

html代码只包含几个带有col类的div：

这是JavaScript代码（顺便说一下，它包含了我为测试目的添加的一些不必要的东西）：

let row = document.querySelector('.row');
let fields = document.getElementsByClassName('col-md-2')
let fieldsArr = Array.from(fields);
let header = document.getElementById("clicked");
let cols = header.getElementsByClassName("col-md-2");
let player = document.getElementById('player');
let player2 = document.getElementById('player2');
let blockedField = document.getElementsByClassName('blocked');

fieldsArr.sort(function() {
  return 0.5 - Math.random();
}).forEach(function(el) {

  row.appendChild(el);
});

// ADD AN EVENT LISTENER AND LISTEN FOR COLS ID
function replyClick(e) {
  e = e || window.event;
  e = e.target || e.srcElement;
  if (e.nodeName === 'DIV') {
    let changable = e.id;
    //console.log(changable);
  }
}
// CREATE A 2D ARRAY (MAP)
var map = [];
while (fieldsArr.length) map.push(fieldsArr.splice(0, 6));

// ON CLICK ADD A CLASS OF ACTIVE
for (var i = 0; i < cols.length; i++) {
  cols[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

// MOVE PLAYER ONE ACROSS THE MAP
function movePlayer(multWidth, multHeight) {
  $(".active").append(player);
  if ((row).click > multWidth) {
    alert(1)
  }

}

// MOVE PLAYER 2 ACROSS THE MAP
function movePlayer2() {
  $(".active").append(player2);
}

// MAKE GRAYED OUT FIELD UNAVALIABLE AND SHOW AN ALERT
$(blockedField).css("pointer-events", "none");

// APPEND PLAYER1(2) TO THE FIRST(LAST) FIELD ON THE MAP
map[0][0].appendChild(player);
map[5][5].appendChild(player2);

// GET PLAYERS CURRENT POSITION
$(row).click(function() {
  let current = player.offsetTop; 
});

const widthAllowed = 3 * 156;
const heightAllowed = 3 * 146;

// LIMIT PLAYER MOVES
let player1Moves = 3;
player2Moves = 3;

$(row).click(function() {
  movePlayer();
  let remainingMoves = player1Moves -= 1;
  if (remainingMoves === 0) {
    alert("You don't have any more moves. Player's 2 turn.");
    $(player).css("pointer-events", "none");

    $(row).click(movePlayer2);
  }
})

for (var x = 0; x < map.length; x++) {
  for (var y = 0; y < map[x].length; y++) {
    console.log(x, y);

  }
}

console.log(map);
console.log(map[2][5]);
console.log(map[5][0]);

Answer 1

你应该学习一些初学者jquery / javascript课程，因为你的问题非常简单，你会发现整个编程方式更容易用一些基本概念（如选择器，事件和回调）

也就是说，这是一个基本的例子，说明如何返回包含player元素的div元素以及如何使用事件附件而不是内联事件。

let row = $('.row');

row.on('click', replyClick);

function replyClick(e) {
  var targetRow = $(e.target);
  $('.row > div.active').removeClass('active');
  targetRow.addClass('active');
  var player = $('.row div.player');
  alert(player.parent().attr('id'));
};

.player {
  width: 20px;
  height: 20px;
  background: red;
}
.row > div {
  padding: 10px;
  width: 20px;
  height: 20px;
  border: 1px solid red;
}
.row > div.active {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
    <div id="col1" class="col-md-2">
       <div class="player"></div>
    </div>
    <div id="col2" class="col-md-2 blocked"></div>
    <div id="col3" class="col-md-2 active"></div>
    <div id="col4" class="col-md-2"></div>
  </div>
</div>