Крестики-нолики: бесконечный выигрыш после сброса игры

ProgramBox

Крестики-нолики: бесконечный выигрыш после сброса игры

Post author:admin
Запись опубликована:27 февраля, 2023
Post category:Вопросы по программированию

#javascript #html #css #tic-tac-toe

#javascript #HTML #css #крестики-нолики

Вопрос:

Я воссоздаю классические крестики-нолики, используя HTML, CSS и JS.

Я добился успешного запуска игры для одного матча, но, похоже, в функциональности есть некоторые ошибки после создания новой опции игры. После нажатия кнопки «Новая игра» сообщение о победителе будет появляться каждый раз, когда игрок отмечает квадрат.

Алгоритм проверки игры находится внутри переменной gameBoard и называется checkWin . Он вызывается внутри displayController после обновления представления.

Изображения, показывающие проблему:

Работает нормально, если не считать появления сообщения о выигрыше перед отображением окончательного размещения X (внизу слева)

ПРОБЛЕМА: после нажатия кнопки «Новая игра» я нажимаю на один квадрат, и появляется сообщение о выигрыше.

 let counter = 0;
let gameBoard = (function() {
  // 'use strict';

  let Board = ["", "", "", "", "", "", "", "", ""];

  let winningCombinations = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
  ]

  // has array 
  return {
    Board: Board,
    clickSquare: function(player) {
      document.querySelectorAll('td').forEach(item => {
        item.addEventListener('click', event => {
          // console.log(item.id.replace('_',''));
          player.markSquare(item.id.replace('_', ''));
        })
      });
    },
    checkWin: function() {
      return winningCombinations.some(combination => {
        return combination.every(index => {
          return Board[index] === "X"
        }) || combination.every(index => {
          return Board[index] === "O"
        })
      })
    }
  }
})();



let displayController = (function() {
  'use strict';

  function updateView(square) {
    console.log(square);
    document.querySelector("#_"   square).textContent = gameBoard.Board[square];
    if (gameBoard.checkWin() amp;amp; counter % 2 === 0) {
      alert("Player One Wins!");
    } else if (gameBoard.checkWin() amp;amp; counter % 2 !== 0) {
      alert("Player Two Wins!");
    } else if (counter == 8) {
      alert("TIE!");
    }
    counter  ;
  }
  return {
    updateView: updateView
  }
})();

function createPlayer(name) {
  return {
    name: name,
    markSquare(square) {
      if (gameBoard.Board[square] === "") {
        if (counter % 2 === 0) {
          gameBoard.Board[square] = "X";
        } else {
          gameBoard.Board[square] = "O";
        }

        displayController.updateView(square);
      }
    }
  }
}

function gameFlow() {
  let player1 = createPlayer("Phil");
  gameBoard.clickSquare(player1);

  let resetGame = document.querySelector("button");
  resetGame.addEventListener('click', function() {
    for (let i = 0; i <= 8; i  ) {
      document.querySelector("#_"   i).textContent = "";
    }
    gameBoard.Board = ["", "", "", "", "", "", "", "", ""];
    counter = 0;
  });

}
gameFlow();

 body {
  margin: 0;
  font-family: 'Nunito', sans-serif;
}

h1 {
  text-align: center;
}

#playerNames {
  margin: auto;
  align-items: center;
  justify-content: center;
  display: flex;
}

input {
  width: 170px;
  height: 40px;
  font-size: 30px;
  margin: 0 30px 0 30px;
}

button {
  width: 100px;
  height: 100px;
  font-size: 30px;
  border-radius: 50%;
  background-color: yellow;
}

table {
  margin: auto;
}

td {
  width: 190px;
  height: 190px;
  text-align: center;
  font-size: 100px;
}

tr td:nth-of-type(2) {
  border-left: 2px solid black;
  border-right: 2px solid black;
}

tr:nth-of-type(2) td {
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}

 <!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="TicTac.css">
  <link href="https://fonts.googleapis.com/css2?family=Nunitoamp;display=swap" rel="stylesheet">
</head>

<body>
  <h1><b>Tic Tac Toe</b></h1>
  <div id="playerNames">
    <input id="pOne" placeholder="Player One" type="text">
    <button>New Game</button>
    <input id="pTwo" placeholder="Player Two" type="text">
  </div>

  <div>
    <table>
      <tr>
        <td id="_0"></td>
        <td id="_1"></td>
        <td id="_2"></td>
      </tr>
      <tr>
        <td id="_3"></td>
        <td id="_4"></td>
        <td id="_5"></td>
      </tr>
      <tr>
        <td id="_6"></td>
        <td id="_7"></td>
        <td id="_8"></td>
      </tr>

    </table>
  </div>

  <script src="TicTac.js"></script>
</body>

</html>

Ответ №1:

Вы очень близки, но у вас возникли две проблемы.

Во-первых, вы неправильно добавили click событие к кнопке «Новая игра». Я быстро отредактировал, чтобы заставить его работать, но есть и другие способы сделать это.

Вторая проблема заключалась в том, что вы назначали новый массив gameBoard.Board.Board . Я не уверен, почему это не сработало, но сброс текущих значений в цикле, который у вас уже был, работает.

Внесение этих двух незначительных изменений, похоже, заставляет все работать. Я использовал console.log s, чтобы убедиться, что не только все работает правильно, но и видеть значения в переменных. Это помогло мне быстро определить, что метод «Сброса» не вызывался при нажатии кнопки, а также подтвердило, что данные обновляются не так, как ожидалось. Я оставил в этих журналах, чтобы вы могли видеть их в качестве примеров того, как их использовать. Я также оставил в коде, который я прокомментировал, чтобы показать несколько отличий, так что не забудьте все это убрать.

Кстати, есть несколько вещей, которые можно было бы сделать немного лучше, но пока все хорошо. Это действительно довольно чисто и лаконично во время работы.

 let counter = 0;
let gameBoard = (function() {
    // 'use strict';

    let Board = ["", "", "", "", "","","","",""];

    let winningCombinations = [
        [0,1,2],
        [3,4,5],
        [6,7,8],
        [0,3,6],
        [1,4,7],
        [2,5,8],
        [0,4,8],
        [2,4,6]
    ]

    // has array 
    return {
        Board: Board,
        clickSquare: function(player) {
            document.querySelectorAll('td').forEach(item => {
                item.addEventListener('click', event => {
                    // console.log(item.id.replace('_',''));
                    player.markSquare(item.id.replace('_',''));
                })
            });       
        },
        checkWin: function() {
        console.log(Board);
            return winningCombinations.some(combination => {
                return combination.every(index => {
                    return Board[index] === "X"
                }) || combination.every(index => {
                    return Board[index] === "O"
            })
        })
        }
    }
})();



let displayController = (function() {
    'use strict';

    function updateView(square) {
            console.log(square);
            document.querySelector("#_" square).textContent = gameBoard.Board[square];
            if (gameBoard.checkWin() amp;amp; counter %2 === 0) {
                alert("Player One Wins!");
            }
            else if (gameBoard.checkWin() amp;amp; counter %2 !== 0) {
                alert("Player Two Wins!");
            }
            else if (counter == 8) {
                alert("TIE!");
            }
            counter  ;
    }
    return {
        updateView: updateView
    }
})();

function createPlayer(name) {
    return {
        name: name,
        markSquare(square) {
            if (gameBoard.Board[square] === "") {
                if (counter %2 === 0) {
                    gameBoard.Board[square] = "X";
                }
                else {
                    gameBoard.Board[square] = "O";
                }
                
                displayController.updateView(square);
            }
        }
    }
}

function gameFlow() {
    let player1 = createPlayer("Phil");
    gameBoard.clickSquare(player1);

    let resetGame = document.getElementById("resetbutton");
    resetGame.addEventListener('click', function() {
        console.log("reset");
        for (let i =0; i<=8; i  ) {
            document.querySelector("#_" i).textContent="";
            gameBoard.Board[i] = "";
        }
        //gameBoard.Board = ["", "", "", "", "","","","",""];
        counter = 0;
    });
        
}
gameFlow();

 body {
    margin: 0;
    font-family: 'Nunito', sans-serif;

}
h1 {
    text-align: center;
}
#playerNames {
    margin: auto;
    align-items: center;
    justify-content: center;
    display: flex;
}
input {
    width:170px;
    height: 40px;
    font-size: 30px;
    margin: 0 30px 0 30px;
}
button {
    width:100px;
    height: 100px;
    font-size: 30px;
    border-radius: 50%;
    background-color: yellow;
}
table {
    margin: auto;
}
td {
    width: 190px;
    height: 190px;
    text-align: center;
    font-size: 100px;
}
tr td:nth-of-type(2) {
    border-left: 2px solid black;
    border-right:2px solid black;
}
tr:nth-of-type(2) td {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}

 <!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="TicTac.css">
    <link href="https://fonts.googleapis.com/css2?family=Nunitoamp;display=swap" rel="stylesheet">
</head>
<body>
    <h1><b>Tic Tac Toe</b></h1>
    <div id="playerNames">
        <input id="pOne" placeholder="Player One" type="text">
        <button id="resetbutton">New Game</button>
        <input id="pTwo" placeholder="Player Two" type="text">
    </div>
    
    <div>
    <table>
        <tr>
            <td id="_0"></td>
            <td id="_1"></td>
            <td id="_2"></td>
        </tr>
        <tr>
            <td id="_3"></td>
            <td id="_4"></td>
            <td id="_5"></td>
        </tr>
        <tr>
            <td id="_6"></td>
            <td id="_7"></td>
            <td id="_8"></td>
        </tr>

    </table>
</div>

<script src="TicTac.js"></script>
</body>
</html>

1. Спасибо! Да, я тоже не понимаю, зачем настраивать игровое поле. Переход к новому массиву пустых строк не сработал, но вместо этого сработало использование цикла.

2. @M.Ali, я скорее разработчик JS «старой школы», поэтому я не использую Let ключевое слово и не знаю, как его использовать, но, возможно, вам нужно использовать его при переназначении массива. Это может быть как-то связано с тем, как JS работает с массивами, поскольку они представляют собой скорее указатели на память, которые могут быть неправильно определены локально в моменты, которые неочевидны. Я знаю, что это происходит в React, и у меня пока нет этих правил, сохраненных в памяти.