Как заставить уникальную ячейку удалять другие ячейки при нажатии

Question

Запустите фрагмент кода Пожалуйста, это позволит вам лучше понять мой вопрос

1. Как видите, у меня есть ячейки с числами и одна ячейка с символом ( S) и красного цвета.
2. Если я нажму на любую другую ячейку, мой (S) «UniqueCell» переместится туда.
3. Допустим, я нажимаю на ячейку с номером 55, My UniqueCell будет переместившись туда, заменив 55 на (S), теперь я нажимаю на другую ячейку, скажем, ячейка с номером 320, моя UniqueCell перемещается из ячейки 55 в ячейку 320, теперь моя UniqueCell заменила 320, но с (S), однако Ячейка 55 вернула свои числа.

Как я могу помешать клеткам вернуть свои числа? как я могу заставить его потерять свои номера навсегда, как только я нажму на него?

примечание: Я пытаюсь создать игру, в которой игрок A выбирает по вертикали, а игрок B - по горизонтали, следовательно, зеленый перемещается по вертикали и горизонтали каждый клик, если это возможно, я хочу каждый Когда я нажимаю на ячейку, где находится зеленый, если он был Вертикальным, игрок получает эти очки, если он был горизонтальным, игрок b получает очки

var isCol = 0;
var board = [];
for (r = 0; r < 7; r++) {
  var line = [];
  for (c = 0; c < 7; c++) {
    line.push(RandomGenerator(50, 500));
  }
  board.push(line);
}

function prs(curr, c, r) {
  showTable(curr, c, r);
  isCol = (isCol + 1) % 2;
}

function toColor(col, row, chosen_col, chosen_row) {
  var ret = false;
  switch (isCol) {
    case 0:
      if (row == chosen_row) {
        ret = true;
      }
      break;
    case 1:
      if (col == chosen_col) {
        ret = true;
      }
      break;
  }
  return ret;
}

function showTable(c, chosen_col, chosen_row) {
  var str = "";
  str += "<table border=1>";
  for (row = 0; row < 7; row++) {
    str += "<tr>";
    for (let col = 0; col < 7; col++) {
      str += "<td onclick='prs(this, " + col + "," + row + ")'";
      if (toColor(col, row, chosen_col, chosen_row)) {
        if(c.textContent == board[row][col]){
          str += " class=uniqueCell";
        }
        else str += " class='grn' ";
      }
      str += ">";
      if(c.textContent == board[row][col]){
        str += 'S';
      }
      else str += board[row][col];
      str += "</td>";
    }
    str += "</tr>";
  }
  str += "</table>";

  document.getElementById("ff").innerHTML = str;
}

function RandomGenerator(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

showTable(-1);

var getUnique = function(){
  var tdElements = document.querySelectorAll('#ff td');
  tdElements[
    RandomGenerator(0, tdElements.length)
  ].classList.add('uniqueCell');
  // update the text of the cell using the class
  document.querySelector('.uniqueCell').textContent = 'S';
};
getUnique();

td{
  border:2px solid black;
  width:10px;
  height:10px;
  text-align: center;
}
td:hover{background-color:lightgreen;}
.grn{
  background-color:green;
  color:white;
}

.uniqueCell {
  background-color: tomato;
}

<div id="ff"></div>

Answer 1

мы сохраняем очки, собранные в объекте P1 и P2, которые у него есть на данный момент. Свойство точек P1.points & P2.points

Я добавил функцию prs (), вызываемую в Onclick

  $('#turn').text(`Player ${(isCol+1)} turn`);
  if (CellPoint) {
    if (isCol) {P1.points+=CellPoint;}else{P2.points+= CellPoint;}
    $('#p1').text(`Player 1: ${P1.points}`);
    $('#p2').text(`Player 2: ${P2.points}`);
  } else {
    console.log('selected S');
  }

var isCol = 0;
var CellPoint = 0;
var board = [];
var P1 = {
  points: 0
};
var P2 = {
  points: 0
};
for (r = 0; r < 7; r++) {
  var line = [];
  for (c = 0; c < 7; c++) {
    line.push(RandomGenerator(50, 500));
  }
  board.push(line);
}

function prs(curr, c, r) {

  CellPoint = parseInt($(curr).text());

  showTable(curr, c, r);
  isCol = (isCol + 1) % 2;
  clr = isCol ? 'blue' : 'red';
  $(curr).text('S');
  $('#turn').css("color", clr)
    .text(`Player ${(isCol+1)} turn`);
  if (CellPoint) {
    if (isCol) {
      P1.points += CellPoint;
    } else {
      P2.points += CellPoint;
    }
    $('#p1').text(`Player 1: ${P1.points}`);
    $('#p2').text(`Player 2: ${P2.points}`);

  } else {
    console.log('selected S');
  }


}

function toColor(col, row, chosen_col, chosen_row) {
  var ret = false;
  switch (isCol) {
    case 0:
      if (row == chosen_row) {
        ret = true;
      }
      break;
    case 1:
      if (col == chosen_col) {
        ret = true;
      }
      break;
  }
  return ret;
}

function showTable(c, chosen_col, chosen_row) {
  if(c!==-1){board[chosen_row][chosen_col] = 'S';}
  var str = "";
  str += "<table border=1>";
  for (row = 0; row < 7; row++) {
    str += "<tr>";
    for (let col = 0; col < 7; col++) {
      str += "<td onclick='prs(this, " + col + "," + row + ")'";
      
        if(board[row][col]=='S'){
          str += " class=uniqueCell";
        } else{
        if (toColor(col, row, chosen_col, chosen_row)) {
        str += " class='grn' ";} }
     
      str += ">";
      if(board[row][col]=='S') {
        str += 'S';
      } else str += board[row][col];
      str += "</td>";
    }
    str += "</tr>";
  }
  str += "</table>";

  document.getElementById("ff").innerHTML = str;
}

function RandomGenerator(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

showTable(-1);

var getUnique = function() {
  var tdElements = document.querySelectorAll('#ff td');
  tdElements[
    RandomGenerator(0, tdElements.length)
  ].classList.add('uniqueCell');
  // update the text of the cell using the class
  document.querySelector('.uniqueCell').textContent = 'S';
};
getUnique();

td {
  border: 2px solid black;
  width: 10px;
  height: 10px;
  text-align: center;
}

td:hover {
  background-color: lightgreen;
}

.grn {
  background-color: green;
  color: white;
}

.turn1 {
  background-color: green;
  color: red;
}

.turn0 {
  background-color: green;
  color: blue;
}

.uniqueCell {
  background-color: tomato;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><span id='p1' style='color:red;'>Player1: </span>&nbsp; X &nbsp;<span style='color:blue;' id='p2'>Player2: </span></div>
<p id='turn'>Player 1 turn</p>
<div id="ff"></div>

Answer 2

Проблема в том, что вы перерисовываете таблицу при каждом щелчке ячеек, в результате чего отслеживать ранее нажатые элементы немного затруднительно. Вместо этого создайте таблицу только для одного (первого) времени, затем l oop через все td , чтобы добавить стиль и текст на основе указанного условия c.

Вы можете попробуйте следующий способ:

var isCol = 0;
var board = [];
for (r = 0; r < 7; r++) {
  var line = [];
  for (c = 0; c < 7; c++) {
    line.push(RandomGenerator(50, 500));
  }
  board.push(line);
}

function showTable(c, chosen_col, chosen_row) {
  var str = "";
  str += "<table border=1>";
  for (row = 0; row < 7; row++) {
    str += "<tr>";
    for (let col = 0; col < 7; col++) {
      str += `<td>${board[row][col]}</td>`;
    }
    str += "</tr>";
  }
  str += "</table>";
  document.getElementById("ff").innerHTML = str; 
}

function RandomGenerator(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

showTable(-1);

var getUnique = function(){
  var tdElements = document.querySelectorAll('#ff td');
  tdElements[
    RandomGenerator(0, tdElements.length)
  ].classList.add('uniqueCell');
  // update the text of the cell using the class
  document.querySelector('.uniqueCell').textContent = 'S';
};
getUnique();

var tds = document.querySelectorAll('td');
var isPlayerA = true;
var playerA = 0;
var playerB = 0;
tds.forEach(function(td){
  td.addEventListener('click', function(){
    document.querySelectorAll('.grn').forEach(td => td.classList.remove('grn'));
    var col = this.cellIndex + 1;
    var row = this.parentNode.rowIndex;
    if(isPlayerA){
      this.parentNode.querySelectorAll('td').forEach(td => td.classList.add('grn'));
      isPlayerA = false;
      playerA += Number(this.textContent);
    }
    else{ 
      document.querySelectorAll(`td:nth-child(${col})`).forEach(c =>c.classList.add('grn'));
      isPlayerA = true;
      playerB += Number(this.textContent);
    }
    this.textContent = 'S';
    this.classList.add('uniqueCell');
    console.clear();
    console.log(`Player A: ${playerA} :: Player B: ${playerB}`);
  });
});

td{
  border:2px solid black;
  width:10px;
  height:10px;
  text-align: center;
}
td:hover{background-color:lightgreen;}
.grn{
  background-color:green;
  color:white;
}

.uniqueCell {
  background-color: tomato;
}

<div id="ff"></div>