如何將猜測次數添加到我的游戲中？ Javascript

Question

我是編碼新手，對這個項目有很多幫助。 我必須為學校項目制作游戲。 游戲很簡單，你只需要在表格中選擇正確的單元格，我不明白我將如何計算玩家的猜測次數。 我還有另一個問題，我不明白如何在玩家選擇錯誤的單元格時提醒他們一個方向，例如，如果他們選擇了錯誤的單元格，則會出現警報並告訴他們向北或類似的東西。 我的代碼在這里，如果你想看的話。

 Table.style.display = "none"; MainMenu.style.display = "block"; var name = ''; 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(); } }); function tableText(col) { if (typeof event !== 'undefined') el = event.srcElement el.style.backgroundColor = col } let colIndex = Math.floor(Math.random() * 8) + 1; let rowIndex = Math.floor(Math.random() * 8) + 1; console.log('col:' + ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'][colIndex - 1], 'row:' + rowIndex); document.querySelector('#R' + rowIndex + 'C' + colIndex).onclick = () => { tableText('green'); alert("correct"); } 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> <table> <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" onclick="tableText('red')"></td> <td id="R1C2" class="TableCell" onclick="tableText('red')"></td> <td id="R1C3" class="TableCell" onclick="tableText('red')"></td> <td id="R1C4" class="TableCell" onclick="tableText('red')"></td> <td id="R1C5" class="TableCell" onclick="tableText('red')"></td> <td id="R1C6" class="TableCell" onclick="tableText('red')"></td> <td id="R1C7" class="TableCell" onclick="tableText('red')"></td> <td id="R1C8" class="TableCell" onclick="tableText('red')"></td> <td id="R1C9" class="TableCell" onclick="tableText('red')"></td> <td id="R1C10" class="TableCell" onclick="tableText('red')"></td> </tr> <tr> <td id="R2C0" class="Tableheader">2</td> <td id="R2C1" class="TableCell" onclick="tableText('red')"></td> <td id="R2C2" class="TableCell" onclick="tableText('red')"></td> <td id="R2C3" class="TableCell" onclick="tableText('red')"></td> <td id="R2C4" class="TableCell" onclick="tableText('red')"></td> <td id="R2C5" class="TableCell" onclick="tableText('red')"></td> <td id="R2C6" class="TableCell" onclick="tableText('red')"></td> <td id="R2C7" class="TableCell" onclick="tableText('red')"></td> <td id="R2C8" class="TableCell" onclick="tableText('red')"></td> <td id="R2C9" class="TableCell" onclick="tableText('red')"></td> <td id="R2C10" class="TableCell" onclick="tableText('red')"></td> </tr> <tr> <td id="R3C0" class="Tableheader">3</td> <td id="R3C1" class="TableCell" onclick="tableText('red')"></td> <td id="R3C2" class="TableCell" onclick="tableText('red')"></td> <td id="R3C3" class="TableCell" onclick="tableText('red')"></td> <td id="R3C4" class="TableCell" onclick="tableText('red')"></td> <td id="R3C5" class="TableCell" onclick="tableText('red')"></td> <td id="R3C6" class="TableCell" onclick="tableText('red')"></td> <td id="R3C7" class="TableCell" onclick="tableText('red')"></td> <td id="R3C8" class="TableCell" onclick="tableText('red')"></td> <td id="R3C9" class="TableCell" onclick="tableText('red')"></td> <td id="R3C10" class="TableCell" onclick="tableText('red')"></td> </tr> <tr> <td id="R4C0" class="Tableheader">4</td> <td id="R4C1" class="TableCell" onclick="tableText('red')"></td> <td id="R4C2" class="TableCell" onclick="tableText('red')"></td> <td id="R4C3" class="TableCell" onclick="tableText('red')"></td> <td id="R4C4" class="TableCell" onclick="tableText('red')"></td> <td id="R4C5" class="TableCell" onclick="tableText('red')"></td> <td id="R4C6" class="TableCell" onclick="tableText('red')"></td> <td id="R4C7" class="TableCell" onclick="tableText('red')"></td> <td id="R4C8" class="TableCell" onclick="tableText('red')"></td> <td id="R4C9" class="TableCell" onclick="tableText('red')"></td> <td id="R4C10" class="TableCell" onclick="tableText('red')"></td> </tr> <tr> <td id="R5C0" class="Tableheader">5</td> <td id="R5C1" class="TableCell" onclick="tableText('red')"></td> <td id="R5C2" class="TableCell" onclick="tableText('red')"></td> <td id="R5C3" class="TableCell" onclick="tableText('red')"></td> <td id="R5C4" class="TableCell" onclick="tableText('red')"></td> <td id="R5C5" class="TableCell" onclick="tableText('red')"></td> <td id="R5C6" class="TableCell" onclick="tableText('red')"></td> <td id="R5C7" class="TableCell" onclick="tableText('red')"></td> <td id="R5C8" class="TableCell" onclick="tableText('red')"></td> <td id="R5C9" class="TableCell" onclick="tableText('red')"></td> <td id="R5C10" class="TableCell" onclick="tableText('red')"></td> </tr> <tr> <td id="R6C0" class="Tableheader">6</td> <td id="R6C1" class="TableCell" onclick="tableText('red')"></td> <td id="R6C2" class="TableCell" onclick="tableText('red')"></td> <td id="R6C3" class="TableCell" onclick="tableText('red')"></td> <td id="R6C4" class="TableCell" onclick="tableText('red')"></td> <td id="R6C5" class="TableCell" onclick="tableText('red')"></td> <td id="R6C6" class="TableCell" onclick="tableText('red')"></td> <td id="R6C7" class="TableCell" onclick="tableText('red')"></td> <td id="R6C8" class="TableCell" onclick="tableText('red')"></td> <td id="R6C9" class="TableCell" onclick="tableText('red')"></td> <td id="R6C10" class="TableCell" onclick="tableText('red')"></td> </tr> <tr> <td id="R7C0" class="Tableheader">7</td> <td id="R7C1" class="TableCell" onclick="tableText('red')"></td> <td id="R7C2" class="TableCell" onclick="tableText('red')"></td> <td id="R7C3" class="TableCell" onclick="tableText('red')"></td> <td id="R7C4" class="TableCell" onclick="tableText('red')"></td> <td id="R7C5" class="TableCell" onclick="tableText('red')"></td> <td id="R7C6" class="TableCell" onclick="tableText('red')"></td> <td id="R7C7" class="TableCell" onclick="tableText('red')"></td> <td id="R7C8" class="TableCell" onclick="tableText('red')"></td> <td id="R7C9" class="TableCell" onclick="tableText('red')"></td> <td id="R7C10" class="TableCell" onclick="tableText('red')"></td> </tr> <tr> <td id="R8C0" class="Tableheader">8</td> <td id="R8C1" class="TableCell" onclick="tableText('red')"></td> <td id="R8C2" class="TableCell" onclick="tableText('red')"></td> <td id="R8C3" class="TableCell" onclick="tableText('red')"></td> <td id="R8C4" class="TableCell" onclick="tableText('red')"></td> <td id="R8C5" class="TableCell" onclick="tableText('red')"></td> <td id="R8C6" class="TableCell" onclick="tableText('red')"></td> <td id="R8C7" class="TableCell" onclick="tableText('red')"></td> <td id="R8C8" class="TableCell" onclick="tableText('red')"></td> <td id="R8C9" class="TableCell" onclick="tableText('red')"></td> <td id="R8C10" class="TableCell" onclick="tableText('red')"></td> </tr> <tr> <td id="R9C0" class="Tableheader">9</td> <td id="R9C1" class="TableCell" onclick="tableText('red')"></td> <td id="R9C2" class="TableCell" onclick="tableText('red')"></td> <td id="R9C3" class="TableCell" onclick="tableText('red')"></td> <td id="R9C4" class="TableCell" onclick="tableText('red')"></td> <td id="R9C5" class="TableCell" onclick="tableText('red')"></td> <td id="R9C6" class="TableCell" onclick="tableText('red')"></td> <td id="R9C7" class="TableCell" onclick="tableText('red')"></td> <td id="R9C8" class="TableCell" onclick="tableText('red')"></td> <td id="R9C9" class="TableCell" onclick="tableText('red')"></td> <td id="R9C10" class="TableCell" onclick="tableText('red')"></td> </tr> <tr> <td id="R10C0" class="Tableheader">10</td> <td id="R10C1" class="TableCell" onclick="tableText('red')"></td> <td id="R10C2" class="TableCell" onclick="tableText('red')"></td> <td id="R10C3" class="TableCell" onclick="tableText('red')"></td> <td id="R10C4" class="TableCell" onclick="tableText('red')"></td> <td id="R10C5" class="TableCell" onclick="tableText('red')"></td> <td id="R10C6" class="TableCell" onclick="tableText('red')"></td> <td id="R10C7" class="TableCell" onclick="tableText('red')"></td> <td id="R10C8" class="TableCell" onclick="tableText('red')"></td> <td id="R10C9" class="TableCell" onclick="tableText('red')"></td> <td id="R10C10" class="TableCell" onclick="tableText('red')"></td> </tr> </table> <br> <br> <button type="button" id="reset" onclick="hideAll()">Start</button> </div>

Answer 1

我簡化了您的代碼，將numberOfClicks和colNames添加為全局變量（在任何方法之外，因此所有方法都可以使用它們）。

我還刪除了每個單元格上的id屬性，而是添加了兩個data-*屬性： data-row和data-col 。 因此，現在您可以通過el.dataset.row和el.dataset.col獲取每個單擊的單元格的行和列索引。

我刪除了表格單元格上的所有類，因為th意味着“表格標題”應該標記所有......好吧..標題。

我進行了更改，以便您不更改背景樣式，而是添加.green或.red類。

我沒有為你解決問題，但我給了你工具，所以你可以填寫其余部分。 單擊單元格會調用tableText()方法來檢查它是否是正確的單元格，否則tableText()將調用giveHint()方法。

將numberOfClicks++添加到正確的方法中，並用您自己的代碼填寫giveHint() 。

---

如果要重置游戲，請使用gameReset()方法。

您應該已經使用 javascript 而不是 HTML 創建了整個表格，但目前這超出了您的知識范圍。 這將使再次重置表格變得容易得多，即從單元格中刪除所有類。

 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>

Answer 2

對於單擊計數創建變量，然后增加每個單擊單元格的值，作為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>