javascript - 获取元素在二维数组中的位置

Question

所以我正在构建一个回合制棋盘游戏，需要包含 2 个可以在 map 上移动的玩家。我坚持在该二维数组中获取播放器的位置(这只是一个简单的 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 类(class)，因为你的问题非常简单，你会发现通过一些基本概念(如选择器、事件和回调)，整个编程过程变得更容易

也就是说，这是一个基本示例，说明如何返回包含播放器元素的 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>