CODEWITHSUNDEEP
javascriptjquery
RonyD Kid
RonyD Kid

Reputation: 83

Getting a position of an element in a 2D array

So I'm building a a turn based board game which needs to contain 2 player that can move across the map. I'm stuck at getting the position of the player(which is just a simple div element) inside of that 2D array. I've tried using indexOf, but even tho it's placed inside an onclick function, always returns 0.

The html code contains just of few div's with col classes: enter image description here

And here is the JavaScript code (btw it contains some unnecessary stuff that I've just added for test purposes) : 

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

Upvotes: 1

Views: 417

Answers (1)

rafaelcastrocouto
rafaelcastrocouto

Reputation: 12161

You should take some beginner jquery/javascript course, since your question is very simple and you will find the whole programming thing way easier with a few basic concepts (like selectors, events and callbacks)

That said, here is a basic example of how to return the div element that contains the player element and how to use event attachment instead of inline events.

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>

Upvotes: 1

Related Questions