Пытаюсь создать простую игру в крестики-нолики на Javascript для задания. Ошибок нет, но ничего не происходит, когда я нажимаю на флажки

#javascript

Вопрос:

итак, я прохожу курс веб-программирования для начинающих, и мое задание — создать игру в крестики-нолики на Javascript. Мой учитель предоставил шаблон для заполнения, который должен был быть очень простым. Я следовал каждой инструкции в точности, насколько мог, но столкнулся с проблемой, когда ничего не происходит, когда я нажимаю на флажки. Никаких ошибок или сообщений, ничего. Chrome не показывает мне никаких ошибок, поэтому я понятия не имею, где даже искать. Может ли кто-нибудь указать мне правильное направление? Я надеюсь, что это просто глупая ошибка новичка. Вот что у меня есть:

 <html>
    <head>
        <!-- style settings-->
        <style>
            .tictac
            {
                background:purple;
                border:#999 10px groove;
                width:180px;
                height:180px;
                font-size:150px;
            }
        </style>
        <script>
            // create a variable for if the game is over, initialize it to false
            var gameOver = false;

            // create a variable for the current player, initialize it to 'O' or 'X'
            // based on who will go first
            if(confirm("Does X want to go first?") == true)
            { 
                var player = 'X';
            }
            else
            { 
                var player = 'O';
            }


            // create an array for the squares using the regular methodology
            var squares = new Array();
                squares[0] = 0;
                squares[1] = 1;
                squares[2] = 2;
                squares[3] = 3;
                squares[4] = 4;
                squares[5] = 5;
                squares[6] = 6;
                squares[7] = 7;
                squares[8] = 8;

            // create a 2-d array of the win combinations, the data is as follows:
            /*
                0, 1, 2
                3, 4, 5
                6, 7, 8
                0, 3, 6
                1, 4, 7
                2, 5, 8
                0, 4, 8
                2, 4, 6

            */
            var winCombinations = [
                [0, 1, 2],
                [3, 4, 5],
                [6, 7, 8],
                [0, 3, 6],
                [1, 4, 7],
                [2, 5, 8],
                [0, 4, 8],
                [2, 4, 6]
            ];

            // declare function named reset with no parameters
            function reset()
            {
                // write a for loop starting at index 1 instead of the 
                // usual 0, that loops through all 9 positions
                for (var i = 1; i < squares.length   1; i  )
                {
                    // create a variable to relate to each HTML button,
                    // set it equal to explicit text "sqr" concatenated
                    // with the looping variable of the for loop
                    var htmlButton = "sqr"   i;

                    // update the associated HTML element with the id
                    // equal to the variable created above, set it equal
                    // to and explicit empty string

                }                   

                // reset the global variable for the squares to an 
                // empty array using the literal methodology
                squares = [];

                // reset the global variable for the game being over
                // setting it equal to false
                gameOver = false;

            }

            //declare function named squareClick with parameter square
            function squareClick(square)
            {   
                // create a variable that is set equal to the HTML element
                // with the id of square (i.e. the parameter) and retrieve its value
                var idElement = document.getElementById(squares).value;
                // this will be used down below as the id to update the HTML element

                // create a variable that is set equal to the JavaScript method call
                // parseInt() passing as an argument square.substring(3, 4), 
                // subtract one from the result of the parseInt method call
                var parseSquare = ((parseInt(square.substring(3, 4))) - 1);
                // this will represent the index of the array of squares where
                // the user clicked

                // write an if statement that evaluates if the variable
                // value is equal to explicit string ""
                if(idElement = "")
                {
                    // update the HTML element using the parameter square as
                    // the id, setting its value equal to the global variable
                    // player
                    document.getElementById(square).value = player;

                    // in array of the squares update element stored at
                    // the index retrieved above to the global variable
                    // player
                    squares[index] = player;
                }

                // call the function checkForWinner passing as an argument
                // the explicit value 'X'
                checkForWinner('X');

                // call the function checkForWinner passing as an argument
                // the explicit value 'O'
                checkForWinner('O');

                // change the player
                // write an if statement that checks if the player variable
                // is equal to O, if true, set player to X
                if(player == 'O')
                    player = 'X';
                // write the else leg that switches player from X to O
                else
                    player = 'O';
            }

            function playAgain()
            {
                // create a variable that stores the response to a
                // confirm dialog box with text "Play again?"
                var response = confirm("Play again?");
                // write an if statement that evaluates the user's response
                // from above compared to true
                if (response == true) 
                {
                    alert("Let's play!");
                    reset ();
                }
                // write the else leg
                else 
                {
                    alert("Thanks for playing!");
                }
            }

            // declare function checkForWinner with one parameter called value
            function checkForWinner(value)
            {   
                // write for loop, start at index 0, loop while
                // the index less than the length of the array
                // winCombinations
                for(var i = 0; i < winCombinations.length; i  )
                {
                    // write an if statement that evaluates
                    // the squares array [] where the index is
                    // array winCombinations[][], with the first index
                    // being the looping variable and the second index 
                    // being value 0, 1, or 2, checking if it is 
                    // equal to the value parameter;
                    // this if statement should be 
                    // three statements using the logical and amp;amp;
                    // e.g. squares[windCombinations[][]]  == value amp;amp;
                    if(squares[winCombinations[i][0]] == value amp;amp; squares[winCombinations[i][1]] == value amp;amp; squares[winCombinations[i][2]] == value)
                    {
                        // display an alert dialog box stating which
                        // player won
                        alert(value   "won the game!");
                        // set the variable gameOver equal to true
                        gameOver == true;
                    }                   
                }

                // write an if statement checking if gameOver is true
                if(gameOver == true)
                {
                    // call function playAgain
                    playAgain();
                }
                // write the else leg
                else
                {
                    // use the return statement for program control
                    return("It's the next player's move!");
                }
            }
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td><input type="button" id="sqr1" name="sqr1" class="tictac" onClick="squareClick('sqr1')" /></td>
                <td><input type="button" id="sqr2" name="sqr2" class="tictac" onClick="squareClick('sqr2')" /></td>
                <td><input type="button" id="sqr3" name="sqr3" class="tictac" onClick="squareClick('sqr3')" /></td>
            </tr>
            <tr>
                <td><input type="button" id="sqr4" name="sqr4" class="tictac" onClick="squareClick('sqr4')" /></td>
                <td><input type="button" id="sqr5" name="sqr5" class="tictac" onClick="squareClick('sqr5')" /></td>
                <td><input type="button" id="sqr6" name="sqr6" class="tictac" onClick="squareClick('sqr6')" /></td>
            </tr>
            <tr>
                <td><input type="button" id="sqr7" name="sqr7" class="tictac" onClick="squareClick('sqr7')" /></td>
                <td><input type="button" id="sqr8" name="sqr8" class="tictac" onClick="squareClick('sqr8')" /></td>
                <td><input type="button" id="sqr9" name="sqr9" class="tictac" onClick="squareClick('sqr9')" /></td>
            </tr>
        </table>
    </body>
</html>

1. Вы хотите создать SSCCE . т. е. Удалить как можно больше кода и все еще иметь ошибку, а затем исправить ее

2. Бьюсь об заклад, вам нужен только один квадрат, поэтому удалите остальные 8, и я уверен, что вы можете заменить определение squareClick на «alert (‘привет’)» или что-то в этом роде

3. Все остальное работает нормально?

4. Ошибок нет? Это странно, потому что я сразу получаю сообщение об ошибке в консоли, когда я нажимаю на квадрат. Откройте консоль разработчика в Chrome CTRL SHIFT I . Выберите вкладку консоли, когда откроются инструменты разработчика. Обновите страницу, а затем нажмите на один из квадратов. Вы увидите свое первое сообщение об ошибке.

5. Мне удалось устранить проблему. На самом деле это были просто некоторые ошибки новичка, а именно использование только «=» вместо «==» в моем if-операторе и попытка использовать переменную, которая не существовала. Должно быть, я что-то пропустил в консоли разработчика, потому что я действительно не думаю, что видел какие-либо всплывающие ошибки. Теперь все хорошо. Спасибо!

Ответ №1:

Это вопрос для начинающих, поэтому я собираюсь опубликовать ответ, подходящий для новичка.

Никаких ошибок или сообщений, ничего. Chrome не показывает мне никаких ошибок, поэтому я понятия не имею, где даже искать.

Вы правы в том, что ошибки (вы смотрели в Инструменты разработчика> Консоль правильно?), С чего начать.

Следующее, что вы должны сделать, чтобы найти ошибку, это удалить как можно больше кода. У вас есть 9 квадратов? Сделайте это 1. Замените как можно больше функций очень простыми определениями, такими как alert("This code ran"); .

Удаляйте код до тех пор, пока при его запуске не начнет происходить более простое поведение, например, предупреждение «Этот код запущен».

Теперь у вас будет:

Очень небольшой объем кода для работы и / или
Очень небольшое количество кода, которое вы добавили или удалили, изменило поведение.

Затем исследуйте это. На этом этапе вы, вероятно, можете погуглить все, с чем у вас возникли проблемы, и получить ответ. Вы можете опубликовать в StackOverflow, если вы все еще застряли, но я предупреждаю вас, какую бы ошибку вы ни допустили, здесь уже задавали вопрос.

1. Спасибо за совет. Другие люди внесли прямые правки в мой код, но впоследствии я столкнулся с еще несколькими проблемами, и ваше предложение минимизировать объем кода помогло мне справиться с этим. Я постараюсь быть более внимательным в следующий раз, когда мне нужно будет проверять наличие ошибок, и сначала лучше проверять Google. Большое спасибо!

Ответ №2:

В вашем коде было в основном две ошибки:

оператор if — это атрибуция, а не сравнение : if(idElement = "") . Это должно быть if(idElement === "")
squares[index] = player; . index не существует. Должно быть squares[parseSquare] = player;

 // create a variable for if the game is over, initialize it to false
var gameOver = false;

// create a variable for the current player, initialize it to 'O' or 'X'
// based on who will go first
if(confirm("Does X want to go first?") == true)
{ 
  var player = 'X';
}
else
{ 
  var player = 'O';
}


// create an array for the squares using the regular methodology
var squares = new Array();
squares[0] = 0;
squares[1] = 1;
squares[2] = 2;
squares[3] = 3;
squares[4] = 4;
squares[5] = 5;
squares[6] = 6;
squares[7] = 7;
squares[8] = 8;

// create a 2-d array of the win combinations, the data is as follows:
/*
                0, 1, 2
                3, 4, 5
                6, 7, 8
                0, 3, 6
                1, 4, 7
                2, 5, 8
                0, 4, 8
                2, 4, 6

            */
var winCombinations = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6]
];

// declare function named reset with no parameters
function reset()
{
  // write a for loop starting at index 1 instead of the 
  // usual 0, that loops through all 9 positions
  for (var i = 1; i < squares.length   1; i  )
  {
    // create a variable to relate to each HTML button,
    // set it equal to explicit text "sqr" concatenated
    // with the looping variable of the for loop
    var htmlButton = "sqr"   i;

    // update the associated HTML element with the id
    // equal to the variable created above, set it equal
    // to and explicit empty string

  }                   

  // reset the global variable for the squares to an 
  // empty array using the literal methodology
  squares = [];

  // reset the global variable for the game being over
  // setting it equal to false
  gameOver = false;

}

//declare function named squareClick with parameter square
function squareClick(square)
{   
  // create a variable that is set equal to the HTML element
  // with the id of square (i.e. the parameter) and retrieve its value
  var idElement = document.getElementById(square).value;
  // this will be used down below as the id to update the HTML element

  // create a variable that is set equal to the JavaScript method call
  // parseInt() passing as an argument square.substring(3, 4), 
  // subtract one from the result of the parseInt method call
  var parseSquare = ((parseInt(square.substring(3, 4))) - 1);
  // this will represent the index of the array of squares where
  // the user clicked
  // write an if statement that evaluates if the variable
  // value is equal to explicit string ""
  if(idElement == "")
  {
    // update the HTML element using the parameter square as
    // the id, setting its value equal to the global variable
    // player
    document.getElementById(square).value = player;

    // in array of the squares update element stored at
    // the index retrieved above to the global variable
    // player
    squares[parseSquare] = player;
  }

  // call the function checkForWinner passing as an argument
  // the explicit value 'X'
  checkForWinner('X');

  // call the function checkForWinner passing as an argument
  // the explicit value 'O'
  checkForWinner('O');

  // change the player
  // write an if statement that checks if the player variable
  // is equal to O, if true, set player to X
  if(player == 'O')
    player = 'X';
  // write the else leg that switches player from X to O
  else
    player = 'O';
}

function playAgain()
{
  // create a variable that stores the response to a
  // confirm dialog box with text "Play again?"
  var response = confirm("Play again?");
  // write an if statement that evaluates the user's response
  // from above compared to true
  if (response == true) 
  {
    alert("Let's play!");
    reset ();
  }
  // write the else leg
  else 
  {
    alert("Thanks for playing!");
  }
}

// declare function checkForWinner with one parameter called value
function checkForWinner(value)
{   
  // write for loop, start at index 0, loop while
  // the index less than the length of the array
  // winCombinations
  for(var i = 0; i < winCombinations.length; i  )
  {
    // write an if statement that evaluates
    // the squares array [] where the index is
    // array winCombinations[][], with the first index
    // being the looping variable and the second index 
    // being value 0, 1, or 2, checking if it is 
    // equal to the value parameter;
    // this if statement should be 
    // three statements using the logical and amp;amp;
    // e.g. squares[windCombinations[][]]  == value amp;amp;
    if(squares[winCombinations[i][0]] == value amp;amp; squares[winCombinations[i][1]] == value amp;amp; squares[winCombinations[i][2]] == value)
    {
      // display an alert dialog box stating which
      // player won
      alert(value   "won the game!");
      // set the variable gameOver equal to true
      gameOver == true;
    }                   
  }

  // write an if statement checking if gameOver is true
  if(gameOver == true)
  {
    // call function playAgain
    playAgain();
  }
  // write the else leg
  else
  {
    // use the return statement for program control
    return("It's the next player's move!");
  }
}

 .tictac
{
  background:purple;
  border:#999 10px groove;
  width:180px;
  height:180px;
  font-size:150px;
}

 <html>
    <head>
    </head>
    <body>
        <table>
            <tr>
                <td><input type="button" id="sqr1" name="sqr1" class="tictac" onClick="squareClick('sqr1')" /></td>
                <td><input type="button" id="sqr2" name="sqr2" class="tictac" onClick="squareClick('sqr2')" /></td>
                <td><input type="button" id="sqr3" name="sqr3" class="tictac" onClick="squareClick('sqr3')" /></td>
            </tr>
            <tr>
                <td><input type="button" id="sqr4" name="sqr4" class="tictac" onClick="squareClick('sqr4')" /></td>
                <td><input type="button" id="sqr5" name="sqr5" class="tictac" onClick="squareClick('sqr5')" /></td>
                <td><input type="button" id="sqr6" name="sqr6" class="tictac" onClick="squareClick('sqr6')" /></td>
            </tr>
            <tr>
                <td><input type="button" id="sqr7" name="sqr7" class="tictac" onClick="squareClick('sqr7')" /></td>
                <td><input type="button" id="sqr8" name="sqr8" class="tictac" onClick="squareClick('sqr8')" /></td>
                <td><input type="button" id="sqr9" name="sqr9" class="tictac" onClick="squareClick('sqr9')" /></td>
            </tr>
        </table>
    </body>
</html>

Развернуть фрагмент

Ответ №3:

             function squareClick(selectedSq)
        {   
            // create a variable that is set equal to the HTML element
            // with the id of square (i.e. the parameter) and retrieve its value
            var idElement = document.getElementById(selectedSq).value;
            // this will be used down below as the id to update the HTML element

            // create a variable that is set equal to the JavaScript method call
            // parseInt() passing as an argument square.substring(3, 4), 
            // subtract one from the result of the parseInt method call
            var parseSquare = ((parseInt(selectedSq.substring(3, 4))) - 1);
            // this will represent the index of the array of squares where
            // the user clicked

            // write an if statement that evaluates if the variable
            // value is equal to explicit string ""
            if(idElement == "")
            {
                // update the HTML element using the parameter square as
                // the id, setting its value equal to the global variable
                // player
                document.getElementById(selectedSq).value = player;

                // in array of the squares update element stored at
                // the index retrieved above to the global variable
                // player
                squares[parseSquare] = player;
            }

            // call the function checkForWinner passing as an argument
            // the explicit value 'X'
            checkForWinner('X');

            // call the function checkForWinner passing as an argument
            // the explicit value 'O'
            checkForWinner('O');

            // change the player
            // write an if statement that checks if the player variable
            // is equal to O, if true, set player to X
            if(player == 'O')
                player = 'X';
            // write the else leg that switches player from X to O
            else
                player = 'O';
        }

это должно исправить это, вы пропустили знак = в операторе if и ссылочный индекс, когда хотели ссылаться на parsdeSquare

Ответ №4:

 function startGame(){
    for(var i = 1; i <= 9; i  ){
        clearBox(i);
    }
    document.player = "X";
    document.winner = null;
    setMessage("Player '"   document.player   "'s turn")
}

function setMessage(msg){
    document.getElementById("message").innerText = msg;
}

function setMessage1(msgg){
    document.getElementById("clickedBox").innerText = msgg;
}

function nextMove(square){
    if(document.winner != null){
        alert("Player "   document.player   " already won");
    }else if(square.innerText == ''){

        square.innerText = document.player;
        if(document.getElementById("square" 1).innerText == "X"){
            a.push("Player X: Clicked box 1");
        } 
        setMessage1(removeDups(a).join("n"));
        nextPlayer();       

    }else{
        alert("Square is already used, please choose another square");
    }
}

function nextPlayer(){
    if(checkWinner(document.player)){
        alert("Player "   document.player   " you won");
        //Getting the score of each player
        if(document.player == "X"){
        player1Score = 1
        }
        else if(document.player == "O"){
        player2Score = 1
        }
        document.getElementById("score1").innerText = player1Score;
        document.getElementById("score2").innerText = player2Score;
        //End
        setMessage("Click RESTART to play again");
        document.winner = document.player;
    }else if(checkTie()){
        setMessage("Its a TIE, click RESTART to play again");
    }else if(document.player == "X"){
        document.player = "O";
        setMessage("'"   document.player   "'s turn")
    }else{
        document.player = "X";
        setMessage("'"   document.player   "'s turn")
    }
}

function checkWinner(move){
    var result = false;
    if( checkRow(1, 2, 3, move) ||
        checkRow(4, 5, 6, move) ||
        checkRow(7, 8, 9, move) ||
        checkRow(1, 4, 7, move) ||
        checkRow(1, 5, 9, move) ||
        checkRow(3, 5, 7, move) ||
        checkRow(2, 5, 8, move) ||
        checkRow(3, 6, 9, move)){
        result = true;
    }
        return resu<
}

function checkTie(){
    for(var i = 1; i <= 9; i  ){
        if(getBox(i) == '')
            return false;           
    }
            return true;
}

function checkRow(a, b, c, move){
    var result = false;
    if(getBox(a) == move amp;amp; getBox(b) == move amp;amp; getBox(c) == move){
        result = true;
    }
        return resu<
}

function getBox(number){
    return document.getElementById("square"   number).innerText;
}

function clearBox(number){
    document.getElementById("square"   number). innerText = '';
}