I hope this is my last question on this topic
the function function computerTurn()
does not work, and I don’t have any thoughts on how to write this function correctly (it is right at the end of the code), and here I put all the code.
He must put an X or O after each move, depending on the situation (the possibility of choosing the first move has not yet been added, but it will be)
var s1 = document.getElementById("s1") var s2 = document.getElementById("s2") var s3 = document.getElementById("s3") var s4 = document.getElementById("s4") var s5 = document.getElementById("s5") var s6 = document.getElementById("s6") var s7 = document.getElementById("s7") var s8 = document.getElementById("s8") var s9 = document.getElementById("s9") var s = [s1, s2, s3, s4, s5, s6, s7, s8, s9]; var comChoice = 0; var clickScore = 0; function myGame() { var beginer = prompt("Кто будет начинать ? Нажмите 'ОК' - если хотите начать первым ", "Я"); } myGame() function click1(element) { if (element.innerText == "") { clickScore++ if (clickScore % 2 == 1) { element.style.cursor = "default" element.style.color = "white" element.style.fontSize = "40px" element.style.textAlign = "center" element.innerHTML = "X" } else { element.style.cursor = "default" element.style.color = "white" element.style.fontSize = "40px" element.style.textAlign = "center" element.innerHTML = "O" } } else { alert("Ячейка уже занята") } computerTurn() if (proverka()) { alert("Game Over") } } function proverka() { if (s1.innerHTML == s4.innerHTML && s4.innerHTML == s7.innerHTML && s7.innerHTML == "X" || s1.innerHTML == s4.innerHTML && s4.innerHTML == s7.innerHTML && s7.innerHTML == "O") return true; if (s3.innerHTML == s5.innerHTML && s5.innerHTML == s7.innerHTML && s7.innerHTML == "X" || s3.innerHTML == s5.innerHTML && s5.innerHTML == s7.innerHTML && s7.innerHTML == "O") return true; if (s1.innerHTML == s5.innerHTML && s5.innerHTML == s9.innerHTML && s9.innerHTML == "X" || s3.innerHTML == s5.innerHTML && s5.innerHTML == s7.innerHTML && s7.innerHTML == "O") return true; if (s1.innerHTML == s2.innerHTML && s2.innerHTML == s3.innerHTML && s3.innerHTML == "X" || s1.innerHTML == s2.innerHTML && s2.innerHTML == s7.innerHTML && s7.innerHTML == "O") return true; if (s4.innerHTML == s5.innerHTML && s5.innerHTML == s6.innerHTML && s6.innerHTML == "X" || s4.innerHTML == s5.innerHTML && s5.innerHTML == s6.innerHTML && s6.innerHTML == "O") return true; if (s7.innerHTML == s8.innerHTML && s8.innerHTML == s9.innerHTML && s9.innerHTML == "X" || s7.innerHTML == s8.innerHTML && s8.innerHTML == s9.innerHTML && s9.innerHTML == "O") return true; if (s3.innerHTML == s6.innerHTML && s6.innerHTML == s9.innerHTML && s9.innerHTML == "X" || s3.innerHTML == s6.innerHTML && s6.innerHTML == s9.innerHTML && s9.innerHTML == "O") return true; if (s8.innerHTML == s5.innerHTML && s5.innerHTML == s2.innerHTML && s2.innerHTML == "X" || s8.innerHTML == s5.innerHTML && s5.innerHTML == s2.innerHTML && s2.innerHTML == "O") return true; } function computerTurn() { comChoice = Math.floor((Math.random() * 9)); console.log(s[comChoice].innerHTML) if (s[comChoice].innerHTML == "") { s[comChoice].innerHTML == "Y" } else { console.log(s[comChoice].innerHTML) } }
* { margin: 0; padding: 0; } body { background: black; } table { margin: 12% auto; color: white; box-sizing: border-box; } tr { width: 90px; height: 90px; box-sizing: border-box; } td { width: 90px; height: 90px; box-sizing: border-box; } .qar { { cursor: default; }
<table width="300px" height="300px" border="5px"> <tr> <td id="s1" onclick="click1(this)"></td> <td id="s2" onclick="click1(this)"></td> <td id="s3" onclick="click1(this)"></td> </tr> <tr> <td id="s4" onclick="click1(this)"></td> <td id="s5" onclick="click1(this)"></td> <td id="s6" onclick="click1(this)"></td> </tr> <tr> <td id="s7" onclick="click1(this)"></td> <td id="s8" onclick="click1(this)"></td> <td id="s9" onclick="click1(this)"></td> </tr> </table>