Мой текстМатериалы не показывают на компьютере Ai - PullRequest
0 голосов
/ 31 октября 2019

Я использую код Tic Tac Toe, чтобы создать непревзойденный Tic Tac Toe, но когда я использую тег td в моем HTML-файле, я получил ошибку с textContent (код JavaScript). как я могу решить это и заставить играть aiplayer. пожалуйста, если кто-то может мне помочь, я буду очень здорово, спасибо

Я использую таблицу тегов tr td insted из div, и я получил ошибку, или она должна работать

var humanPlayer, aiPlayer;
humanPlayer = "X";
aiPlayer = "O";
var cells =document.getElementsByClassName('cell');


function checkWinner(arr, player){
if(
(arr[0] === player && arr[1] === player && arr[2] === player)||
(arr[3] === player && arr[4] === player && arr[5] === player)||
(arr[6] === player && arr[7] === player && arr[8] === player)||
(arr[0] === player && arr[3] === player && arr[6] === player)||
(arr[1] === player && arr[4] === player && arr[7] === player)||
(arr[2] === player && arr[5] === player && arr[8] === player)||
(arr[0] === player && arr[4] === player && arr[8] === player)||
(arr[2] === player && arr[4] === player && arr[6] === player)){
return true;
}

}


function getAvailableSpots (ncnj){
var spo = [];
for(var i = 0; i < ncnj.length; i++){
if(ncnj[i] !== "X" && ncnj[i] !== "O"){
spo.push(i);
}
}
return spo;
   
}

function minimax(newBoard, player){

var availSpots = this.getAvailableSpots(newBoard);
if(this.checkWinner(newBoard, aiPlayer)){
  return {score: 10};
}
else if(this.checkWinner(newBoard, humanPlayer)){
return {score: -10};
}
else if(availSpots.length === 0){
return {score: 0};
}

var moves = [];

for(var j = 0; j < availSpots.length; j++){
var move = {};
move.c = availSpots[j];
newBoard[availSpots[j]] = player;
if(player === aiPlayer){
var result1 = this.minimax(newBoard, humanPlayer);
move.score = result1.score;
}
else{
var result2 = this.minimax(newBoard, aiPlayer);
move.score = result2.score;
}

newBoard[availSpots[j]] = move.c;
moves.push(move);
}

var bestMove;
if(player === aiPlayer){
var bestScore1 = -100000;
for(var k = 0; k < moves.length; k++){
if(moves[k].score > bestScore1){
bestScore1 = moves[k].score;
bestMove = k;
}
}
}
else{
var bestScore2 = 100000;
for(var l = 0; l < moves.length; l++){
if(moves[l].score < bestScore2){
bestScore2 = moves[l].score;
bestMove = l;
}
}
}

return moves[bestMove];
}// minimax function.




function move(e){
if( e.textContent === ""){
e.textContent = humanPlayer;
var result =minimax(domBoardToArray(cells), aiPlayer);
cells[result.index].textContent = aiPlayer;
}
}

function domBoardToArray(cells){
return Array.prototype.slice.call(cells).map(function (cell){
return cell.textContent
})
}


document.querySelector('.cells').addEventListener('click', move);
td{
border:3px solid #dedede;
height:60px;
width:60px;
text-align: center;
vertical-align:center;
font-family:"Comic Sans MS",cursive, sans-serif; 
cursor: pointer;
font-size: 40px;
text-shadow: 2px 2px 5px  ;
font-weight: bold;
}


 
table tr:first-child td {
border-top:0;
} 

table tr:last-child td {
border-bottom:0;
}
table tr td:first-child {
border-left: 0;
}
table tr td:last-child {
border-right:0;
}
table {
border-collapse: collapse;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size:center; 
   
color: #52BE80;
justify-content: center;
bottom: -200px;
 
}
<!DOCTYPE html>
<html>
<head>


  
<table class="cells">
<tr>
<td class="cell" onclick="move(this);"></td>
<td class="cell" onclick="move(this);"></td>
<td class="cell" onclick="move(this);"></td>
</tr>


<tr>
<td class="cell" onclick="move(this);"></td>
<td class="cell" onclick="move(this);"></td>
<td class="cell" onclick="move(this);" ></td>
</tr>
<tr>
<td class="cell" onclick=" move(this);"></td>
<td class="cell" onclick="move(this);"></td>
<td class="cell" onclick="move(this); " ></td>
</tr>

</table>
   
</body>
</html>

Я получил эту ошибку: Uncaught TypeError: Невозможно установить свойство 'textContent' из неопределенного ",

...