我简化了您的代码，将 numberOfClicks 和 colNames 添加为全局变量（在任何方法之外，因此所有方法都可以使用它们）。

我还删除了每个单元格上的 id 属性，而是添加了两个 data-* 属性：data-row 和 data-col。所以现在你可以通过 el.dataset.row 和 el.dataset.col 获取每个点击单元格的行和列索引。

我删除了 table 单元格上的所有类，因为 th 表示“table 标头”，它应该标记所有......好吧..标头。

我进行了更改，以便您不更改背景样式，而是添加 .green 或 .red 类。

我没有为你解决问题，但我给了你工具，所以你可以填写其余部分。点击一个单元格调用 tableText() 方法来检查它是否是正确的单元格，否则 tableText() 将调用一个 giveHint() 方法。

将 numberOfClicks++ 添加到正确的方法中，并用您自己的代码填写 giveHint()。

如果要重置游戏，请使用 gameReset() 方法。

您应该使用 javascript 而不是 HTML 创建整个 table，但目前这超出了您的知识范围。这将使再次重置 table 变得容易得多，即从单元格中删除所有类。

let rowIndex, colIndex, numberOfClicks;
const colNames = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];

function tableText(color) {
  if (typeof event !== 'undefined') {
    el = event.srcElement;
    let clickedRow = el.dataset.row;
    let clickedCol = el.dataset.col;
    
    if (reachedWinCondition(clickedRow, clickedCol)) {
      triggerWinCondition(el);
    } else {
      el.classList.add(color);      
      giveHint(clickedRow, clickedCol);
    }
  }
} 

function triggerWinCondition(el) {
  el.classList.add('green');
  alert("you found it");
}

function reachedWinCondition(clickedRow, clickedCol) {
  return clickedRow == rowIndex && clickedCol == colIndex;
}

function giveHint(clickedRow, clickedCol) {
  // do something with clickedRow, clickedCol, rowIndex, colIndex
  console.log({clickedRow}, {clickedCol})
}

function gameReset() {
  numberOfClicks = 0;
  randomizeHurklesHidingSpot();
}

function randomizeHurklesHidingSpot() {
  colIndex = Math.floor(Math.random() * 8) + 1;
  rowIndex = Math.floor(Math.random() * 8) + 1;
  
  console.log('col:' + colNames[colIndex - 1], 'row:' + rowIndex);
}

gameReset();

body {
  text-align: center;
  background-image: url('https://storage.pixteller.com/designs/designs-images/2019-03-27/05/simple-background-backgrounds-passion-simple-1-5c9b95bd34713.png');
}

table,
th,
td {
  border: 0px solid white;
  border-collapse: collapse;
  width: 45%;
  height: 55px;
  text-align: center;
  vertical-align: center;
  table-layout: fixed;
}

table.center {
  margin-left: auto;
  margin-right: auto;
}

th {
  border: 0px solid white;
  font-weight: normal;
}

td {
  background-color: rgb(252, 142, 215);
  border: 2px solid black;
}

td.red {
  background-color: red;
}

td.green {
  background-color: lightgreen;
}

td:hover {
  background-color: rgb(255, 230, 0);
}

.button {
  padding: 5px;
  background-color: #dcdcdc;
  border: 1px solid #666;
  color: #000;
  margin-top: 10px;
}

button:hover {
  color: yellow;
}

<div id="Table">
  <div id='playerName'></div>
  <h2>Hurkles</h2>
  <p> Click a Cell to Find Hurkles</p>
    <table id="tableID" class="center">
      <tr>
        <th></th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
        <th>F</th>
        <th>G</th>
        <th>H</th>
        <th>I</th>
        <th>J</th>
      </tr>
      <tr>
        <th>1</th>
        <td data-row="1" data-col="1" onclick="tableText('red')"></td>
        <td data-row="1" data-col="2" onclick="tableText('red')"></td>
        <td data-row="1" data-col="3" onclick="tableText('red')"></td>
        <td data-row="1" data-col="4" onclick="tableText('red')"></td>
        <td data-row="1" data-col="5" onclick="tableText('red')"></td>
        <td data-row="1" data-col="6" onclick="tableText('red')"></td>
        <td data-row="1" data-col="7" onclick="tableText('red')"></td>
        <td data-row="1" data-col="8" onclick="tableText('red')"></td>
        <td data-row="1" data-col="9" onclick="tableText('red')"></td>
        <td data-row="1" data-col="10" onclick="tableText('red')"></td>
      </tr>
      <tr>
        <th>2</th>
        <td data-row="2" data-col="1" onclick="tableText('red')"></td>
        <td data-row="2" data-col="2" onclick="tableText('red')"></td>
        <td data-row="2" data-col="3" onclick="tableText('red')"></td>
        <td data-row="2" data-col="4" onclick="tableText('red')"></td>
        <td data-row="2" data-col="5" onclick="tableText('red')"></td>
        <td data-row="2" data-col="6" onclick="tableText('red')"></td>
        <td data-row="2" data-col="7" onclick="tableText('red')"></td>
        <td data-row="2" data-col="8" onclick="tableText('red')"></td>
        <td data-row="2" data-col="9" onclick="tableText('red')"></td>
        <td data-row="2" data-col="10" onclick="tableText('red')"></td>
      </tr>
      <tr>
        <th>3</th>
        <td data-row="3" data-col="1" onclick="tableText('red')"></td>
        <td data-row="3" data-col="2" onclick="tableText('red')"></td>
        <td data-row="3" data-col="3" onclick="tableText('red')"></td>
        <td data-row="3" data-col="4" onclick="tableText('red')"></td>
        <td data-row="3" data-col="5" onclick="tableText('red')"></td>
        <td data-row="3" data-col="6" onclick="tableText('red')"></td>
        <td data-row="3" data-col="7" onclick="tableText('red')"></td>
        <td data-row="3" data-col="8" onclick="tableText('red')"></td>
        <td data-row="3" data-col="9" onclick="tableText('red')"></td>
        <td data-row="3" data-col="10" onclick="tableText('red')"></td>
      </tr>
      <tr>
        <th>4</th>
        <td data-row="4" data-col="1" onclick="tableText('red')"></td>
        <td data-row="4" data-col="2" onclick="tableText('red')"></td>
        <td data-row="4" data-col="3" onclick="tableText('red')"></td>
        <td data-row="4" data-col="4" onclick="tableText('red')"></td>
        <td data-row="4" data-col="5" onclick="tableText('red')"></td>
        <td data-row="4" data-col="6" onclick="tableText('red')"></td>
        <td data-row="4" data-col="7" onclick="tableText('red')"></td>
        <td data-row="4" data-col="8" onclick="tableText('red')"></td>
        <td data-row="4" data-col="9" onclick="tableText('red')"></td>
        <td data-row="4" data-col="10" onclick="tableText('red')"></td>
      </tr>
      <tr>
        <th>5</th>
        <td data-row="5" data-col="1" onclick="tableText('red')"></td>
        <td data-row="5" data-col="2" onclick="tableText('red')"></td>
        <td data-row="5" data-col="3" onclick="tableText('red')"></td>
        <td data-row="5" data-col="4" onclick="tableText('red')"></td>
        <td data-row="5" data-col="5" onclick="tableText('red')"></td>
        <td data-row="5" data-col="6" onclick="tableText('red')"></td>
        <td data-row="5" data-col="7" onclick="tableText('red')"></td>
        <td data-row="5" data-col="8" onclick="tableText('red')"></td>
        <td data-row="5" data-col="9" onclick="tableText('red')"></td>
        <td data-row="5" data-col="10" onclick="tableText('red')"></td>
      </tr>
      <tr>
        <th>6</th>
        <td data-row="6" data-col="1" onclick="tableText('red')"></td>
        <td data-row="6" data-col="2" onclick="tableText('red')"></td>
        <td data-row="6" data-col="3" onclick="tableText('red')"></td>
        <td data-row="6" data-col="4" onclick="tableText('red')"></td>
        <td data-row="6" data-col="5" onclick="tableText('red')"></td>
        <td data-row="6" data-col="6" onclick="tableText('red')"></td>
        <td data-row="6" data-col="7" onclick="tableText('red')"></td>
        <td data-row="6" data-col="8" onclick="tableText('red')"></td>
        <td data-row="6" data-col="9" onclick="tableText('red')"></td>
        <td data-row="6" data-col="10" onclick="tableText('red')"></td>
      </tr>
      <tr>
        <th>7</th>
        <td data-row="7" data-col="1" onclick="tableText('red')"></td>
        <td data-row="7" data-col="2" onclick="tableText('red')"></td>
        <td data-row="7" data-col="3" onclick="tableText('red')"></td>
        <td data-row="7" data-col="4" onclick="tableText('red')"></td>
        <td data-row="7" data-col="5" onclick="tableText('red')"></td>
        <td data-row="7" data-col="6" onclick="tableText('red')"></td>
        <td data-row="7" data-col="7" onclick="tableText('red')"></td>
        <td data-row="7" data-col="8" onclick="tableText('red')"></td>
        <td data-row="7" data-col="9" onclick="tableText('red')"></td>
        <td data-row="7" data-col="10" onclick="tableText('red')"></td>
      </tr>
      <tr>
        <th>8</th>
        <td data-row="8" data-col="1" onclick="tableText('red')"></td>
        <td data-row="8" data-col="2" onclick="tableText('red')"></td>
        <td data-row="8" data-col="3" onclick="tableText('red')"></td>
        <td data-row="8" data-col="4" onclick="tableText('red')"></td>
        <td data-row="8" data-col="5" onclick="tableText('red')"></td>
        <td data-row="8" data-col="6" onclick="tableText('red')"></td>
        <td data-row="8" data-col="7" onclick="tableText('red')"></td>
        <td data-row="8" data-col="8" onclick="tableText('red')"></td>
        <td data-row="8" data-col="9" onclick="tableText('red')"></td>
        <td data-row="8" data-col="10" onclick="tableText('red')"></td>
      </tr>
      <tr>
        <th>9</th>
        <td data-row="9" data-col="1" onclick="tableText('red')"></td>
        <td data-row="9" data-col="2" onclick="tableText('red')"></td>
        <td data-row="9" data-col="3" onclick="tableText('red')"></td>
        <td data-row="9" data-col="4" onclick="tableText('red')"></td>
        <td data-row="9" data-col="5" onclick="tableText('red')"></td>
        <td data-row="9" data-col="6" onclick="tableText('red')"></td>
        <td data-row="9" data-col="7" onclick="tableText('red')"></td>
        <td data-row="9" data-col="8" onclick="tableText('red')"></td>
        <td data-row="9" data-col="9" onclick="tableText('red')"></td>
        <td data-row="9" data-col="10" onclick="tableText('red')"></td>
      </tr>
      <tr>
        <th>10</th>
        <td data-row="10" data-col="1" onclick="tableText('red')"></td>
        <td data-row="10" data-col="2" onclick="tableText('red')"></td>
        <td data-row="10" data-col="3" onclick="tableText('red')"></td>
        <td data-row="10" data-col="4" onclick="tableText('red')"></td>
        <td data-row="10" data-col="5" onclick="tableText('red')"></td>
        <td data-row="10" data-col="6" onclick="tableText('red')"></td>
        <td data-row="10" data-col="7" onclick="tableText('red')"></td>
        <td data-row="10" data-col="8" onclick="tableText('red')"></td>
        <td data-row="10" data-col="9" onclick="tableText('red')"></td>
        <td data-row="10" data-col="10" onclick="tableText('red')"></td>
      </tr>

    </table>

</div>

对于单击计数创建变量，然后增加 value 每个单击的单元格，对于 hint 您需要从单元格 ID 中提取行和列，然后与正确答案进行比较。

Table.style.display = "none";
MainMenu.style.display = "block";
var name = '';
var counter = 1;

function Start() {
  Table.style.display = "block"
  MainMenu.style.display = "none"
  document.getElementById('playerName').innerHTML = 'Welcome ' + name;

}
var input = document.getElementById("text1");
input.addEventListener("keypress", function (event) {
  if (event.key === "Enter") {
    event.preventDefault();
    document.getElementById("submit").click();
  }
});

let colIndex = Math.floor(Math.random() * 8) + 1;
let rowIndex = Math.floor(Math.random() * 8) + 1;
let answer = 'R' + rowIndex + 'C' + colIndex;
console.log('col:' + ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'][colIndex - 1], 'row:' + rowIndex);

document.querySelectorAll('.TableCell').forEach(function (el) {
  el.addEventListener("click", function (event) {
    clickCount.textContent = counter++;
    if (el.id == answer) {
      el.style.background = 'green';
      alert("correct");
    } else {
      el.style.background = 'red';
      var cell = el.id.match(/R(\d+)C(\d+)/)
      var row = parseInt(cell[1])
      var col = parseInt(cell[2])
      if (row != rowIndex) {
        hint.textContent = row > rowIndex ? "Up" : "Down";
      } else {
        hint.textContent = col > colIndex ? "Left" : "Right";
      }
    }
  });
})


function hideAll() {
  Table.style.display = "none"
  MainMenu.style.display = "block"
}

function gameReset() { }

function required(e) {
  e.preventDefault();
  var empt = document.forms["form1"]["text1"].value;
  if (empt == "") {
    alert("Please input your name");
  } else {
    name = document.getElementById('text1').value;
    Start()
  }
}

body {
  text-align: center;
}

table,
th,
td {
  border: 0px solid white;
  border-collapse: collapse;
  width: 45%;
  height: 55px;
  text-align: center;
  vertical-align: center;
  table-layout: fixed;
}

table.center {
  margin-left: auto;
  margin-right: auto;
}

.Tableheader {
  border: 0px solid white
}

.TableCell {
  background-color: rgb(252, 142, 215);
  border: 2px solid black;
}

.button {
  padding: 5px;
  background-color: #dcdcdc;
  border: 1px solid #666;
  color: #000;
  margin-top: 10px;
}

button:hover {
  color: yellow;
}

.TableCell:hover {
  background-color: rgb(255, 230, 0);
}

body {
  background-image: url('https://storage.pixteller.com/designs/designs-images/2019-03-27/05/simple-background-backgrounds-passion-simple-1-5c9b95bd34713.png');
}

<div id="MainMenu">
    <form name="form1" action="#" onsubmit="required(event)">
        <ul>
            <h2>Hurkles the Game</h2>
            <p>Type in your name and click start to begin</p>
            <li><input type='text' name='text1' id='text1' /></li>
            <li class="rq">*Required Field</li>
            <li><input type="submit" name="submit" id='submit' value="Submit" /></li>
        </ul>
    </form>
</div>
<div id="Table">
    <div id='playerName'></div>
    <h2>Hurkles</h2>
    <p> Click a Cell to Find Hurkles</p>
    <p><strong>Click Count: <span id="clickCount">0</span> | Hint: <span id="hint"></span></strong></p>

    <table id="tableID" class="center">
        <tr>
            <td id="R0C0" class="Tableheader"></td>
            <td id="R0C1" class="Tableheader">A</td>
            <td id="R0C2" class="Tableheader">B</td>
            <td id="R0C3" class="Tableheader">C</td>
            <td id="R0C4" class="Tableheader">D</td>
            <td id="R0C5" class="Tableheader">E</td>
            <td id="R0C6" class="Tableheader">F</td>
            <td id="R0C7" class="Tableheader">G</td>
            <td id="R0C8" class="Tableheader">H</td>
            <td id="R0C9" class="Tableheader">I</td>
            <td id="R0C10" class="Tableheader">J</td>
        </tr>
        <tr>
            <td id="R1C0" class="Tableheader">1</td>
            <td id="R1C1" class="TableCell"></td>
            <td id="R1C2" class="TableCell"></td>
            <td id="R1C3" class="TableCell"></td>
            <td id="R1C4" class="TableCell"></td>
            <td id="R1C5" class="TableCell"></td>
            <td id="R1C6" class="TableCell"></td>
            <td id="R1C7" class="TableCell"></td>
            <td id="R1C8" class="TableCell"></td>
            <td id="R1C9" class="TableCell"></td>
            <td id="R1C10" class="TableCell"></td>
        </tr>
        <tr>
            <td id="R2C0" class="Tableheader">2</td>
            <td id="R2C1" class="TableCell"></td>
            <td id="R2C2" class="TableCell"></td>
            <td id="R2C3" class="TableCell"></td>
            <td id="R2C4" class="TableCell"></td>
            <td id="R2C5" class="TableCell"></td>
            <td id="R2C6" class="TableCell"></td>
            <td id="R2C7" class="TableCell"></td>
            <td id="R2C8" class="TableCell"></td>
            <td id="R2C9" class="TableCell"></td>
            <td id="R2C10" class="TableCell"></td>
        </tr>
        <tr>
            <td id="R3C0" class="Tableheader">3</td>
            <td id="R3C1" class="TableCell"></td>
            <td id="R3C2" class="TableCell"></td>
            <td id="R3C3" class="TableCell"></td>
            <td id="R3C4" class="TableCell"></td>
            <td id="R3C5" class="TableCell"></td>
            <td id="R3C6" class="TableCell"></td>
            <td id="R3C7" class="TableCell"></td>
            <td id="R3C8" class="TableCell"></td>
            <td id="R3C9" class="TableCell"></td>
            <td id="R3C10" class="TableCell"></td>
        </tr>
        <tr>
            <td id="R4C0" class="Tableheader">4</td>
            <td id="R4C1" class="TableCell"></td>
            <td id="R4C2" class="TableCell"></td>
            <td id="R4C3" class="TableCell"></td>
            <td id="R4C4" class="TableCell"></td>
            <td id="R4C5" class="TableCell"></td>
            <td id="R4C6" class="TableCell"></td>
            <td id="R4C7" class="TableCell"></td>
            <td id="R4C8" class="TableCell"></td>
            <td id="R4C9" class="TableCell"></td>
            <td id="R4C10" class="TableCell"></td>
        </tr>
        <tr>
            <td id="R5C0" class="Tableheader">5</td>
            <td id="R5C1" class="TableCell"></td>
            <td id="R5C2" class="TableCell"></td>
            <td id="R5C3" class="TableCell"></td>
            <td id="R5C4" class="TableCell"></td>
            <td id="R5C5" class="TableCell"></td>
            <td id="R5C6" class="TableCell"></td>
            <td id="R5C7" class="TableCell"></td>
            <td id="R5C8" class="TableCell"></td>
            <td id="R5C9" class="TableCell"></td>
            <td id="R5C10" class="TableCell"></td>
        </tr>
        <tr>
            <td id="R6C0" class="Tableheader">6</td>
            <td id="R6C1" class="TableCell"></td>
            <td id="R6C2" class="TableCell"></td>
            <td id="R6C3" class="TableCell"></td>
            <td id="R6C4" class="TableCell"></td>
            <td id="R6C5" class="TableCell"></td>
            <td id="R6C6" class="TableCell"></td>
            <td id="R6C7" class="TableCell"></td>
            <td id="R6C8" class="TableCell"></td>
            <td id="R6C9" class="TableCell"></td>
            <td id="R6C10" class="TableCell"></td>
        </tr>
        <tr>
            <td id="R7C0" class="Tableheader">7</td>
            <td id="R7C1" class="TableCell"></td>
            <td id="R7C2" class="TableCell"></td>
            <td id="R7C3" class="TableCell"></td>
            <td id="R7C4" class="TableCell"></td>
            <td id="R7C5" class="TableCell"></td>
            <td id="R7C6" class="TableCell"></td>
            <td id="R7C7" class="TableCell"></td>
            <td id="R7C8" class="TableCell"></td>
            <td id="R7C9" class="TableCell"></td>
            <td id="R7C10" class="TableCell"></td>
        </tr>
        <tr>
            <td id="R8C0" class="Tableheader">8</td>
            <td id="R8C1" class="TableCell"></td>
            <td id="R8C2" class="TableCell"></td>
            <td id="R8C3" class="TableCell"></td>
            <td id="R8C4" class="TableCell"></td>
            <td id="R8C5" class="TableCell"></td>
            <td id="R8C6" class="TableCell"></td>
            <td id="R8C7" class="TableCell"></td>
            <td id="R8C8" class="TableCell"></td>
            <td id="R8C9" class="TableCell"></td>
            <td id="R8C10" class="TableCell"></td>
        </tr>
        <tr>
            <td id="R9C0" class="Tableheader">9</td>
            <td id="R9C1" class="TableCell"></td>
            <td id="R9C2" class="TableCell"></td>
            <td id="R9C3" class="TableCell"></td>
            <td id="R9C4" class="TableCell"></td>
            <td id="R9C5" class="TableCell"></td>
            <td id="R9C6" class="TableCell"></td>
            <td id="R9C7" class="TableCell"></td>
            <td id="R9C8" class="TableCell"></td>
            <td id="R9C9" class="TableCell"></td>
            <td id="R9C10" class="TableCell"></td>
        </tr>
        <tr>
            <td id="R10C0" class="Tableheader">10</td>
            <td id="R10C1" class="TableCell"></td>
            <td id="R10C2" class="TableCell"></td>
            <td id="R10C3" class="TableCell"></td>
            <td id="R10C4" class="TableCell"></td>
            <td id="R10C5" class="TableCell"></td>
            <td id="R10C6" class="TableCell"></td>
            <td id="R10C7" class="TableCell"></td>
            <td id="R10C8" class="TableCell"></td>
            <td id="R10C9" class="TableCell"></td>
            <td id="R10C10" class="TableCell"></td>
        </tr>
    </table>
    <br>
    <br>
    <button type="button" id="reset" onclick="hideAll()">Start</button>
</div>