javascript - 我的 JQUERY 的重置按钮让我的 TIC TAC TOE 代码变得疯狂

Question

我的代码有问题，我一直在尝试查看它有什么问题，但没有成功，我真的需要帮助。这里的问题是，代码对于两个玩家来说运行良好(还没有完成一个玩家的部分，即人工智能)，但是当我按下重置按钮时，它不起作用，所有变量似乎都重置了，我'我猜测这是一些概念错误。 Here is the code ，问题出在第 108 行，我相信，当我做第一个游戏时，它工作正常，但随后它开始变得疯狂，就像某些东西没有重置好一样，我很抱歉，如果这是我犯的菜鸟错误，但我我对此很陌生。

如果您不想检查codepen链接，则代码是这样的:

$(document).ready(function(){
            //Lets work on the variables and what they do
            var set=0; //I'll use this to control the 3x3 grids
            var tempx=0; //I'll use this to control player X
            var temp0=0; //I'll use this to control player O
            var myturn='X'; //This is what I'll actually put out in the grid and is the human player
            var AI='O'; //But it will change according on who's the first player to move and is the Computer
            var contador=0;
            //I declare the winning conditions for player vs player
            var onex=0;
            var onexx=0;
            var twox=0;
            var twoxx=0;
            var threex=0;
            var threexx=0;
            var one0=0;
            var one00=0;
            var two0=0;
            var two00=0;
            var three0=0;
            var three00=0;
            //This is especifically for AI vs player
            //Going to set the original state of everything
            $('.reset').hide();
            $('.player').hide();
            $('.turns').hide();
            $('.whichplay').hide();
            //First lets work on each button function
            //Reset button!
            function reset(){
                $('.rows').prop("disabled",true);
                $('.reset').hide();
                $('.player').hide();
                $('.turns').hide();
                $('.whichplay').hide();
                $('.two-players').show();
                $('.one-player').show();
                $('.text').show();
                $('#playo').prop('disabled', false);
                $('#playx').prop('disabled', false);
                $('.rows').empty();
                set=0;
                temp0=0;
                tempx=0;
                contador=0;
                onex=0;
                onexx=0;
                twox=0;
                twoxx=0;
                threex=0;
                threexx=0;
                one0=0;
                one00=0;
                two0=0;
                two00=0;
                three0=0;
                three00=0;
                console.log('tempx after reset is '+tempx);
                console.log('temp0 after reset is '+temp0);
            }
            $('.reset').click(function(){
                reset();
            });
            function start(){
                console.log('IM STARTING LOOOOK')
                $('.one-player').hide();
                $('.reset').show();
                $('.player').show();
                $('.two-players').hide();
                $('.text').hide();
                $('.whichplay').show();
                //set=2;
                //console.log('set is '+set);
                $('.rows').removeAttr('disabled');
                //Player X function
                $('#playx').click(function(){
                    $('.whichplay').hide();
                    $('.turns').show();
                    $('#playo').prop('disabled', true); 
                    $('#playx').prop('disabled', true);
                    $('.rows').prop("disabled",false);
                    tempx=1;
                    console.log('tempx after start is '+tempx);
                    console.log('tempO after start is '+temp0);
                });
                //Player O function
                $('#playo').click(function(){
                    $('.whichplay').hide();
                    $('.turns').show();
                    $('#playo').prop('disabled', true);
                    $('#playx').prop('disabled', true);
                    $('.rows').prop("disabled",false);
                    temp0=1;
                    console.log('tempx after start is '+tempx);
                    console.log('tempO after start is '+temp0);
                });
            };
            //When I hit one of these two options I will go into GAME MODE
            //LETS ENTER GAME MODE!
            $('.one-player').click(function(){
                //start();
                console.log('ERROR');
            });   
            $('.two-players').click(function(){
                 start();
                 $('.rows').click(function(){
                    //I will create a variable that will store the ID's from the grid I click
                    var idstore=$(this).attr('id');
                    $(this).prop("disabled",true);
                    contador++;
                    //Now I got to control the turns X and O
                    if(tempx===1){
                        $(this).text('X');
                        console.log('This is the letter '+$(this).text('X'));
                        var s=$(this).get(0).id; //With this I extract the ID value into a string
                        tempx=0; //I close PX turn
                        temp0=1; //I start PY turn
                        var checker0=s.charAt(0); //I check the first letter of the id
                        var checker1=s.charAt(1); //I check the second letter of the id
                        $('#playo').show(); //I show its PO turn
                        $('#playx').hide(); 
                        if(checker0==='1'){
                           onex++; //Everytime this gets up to 3 PX win because it means a full row
                           //console.log('onex is '+onex);
                        }else if(checker0==='2'){
                            twox++; //Same here because it means a full row
                            //console.log('twox is '+twox);
                        }else if(checker0==='3'){
                            threex++; //Aaaaand same
                            //console.log('threex is '+threex);
                        } 
                        if(checker1==='1'){
                            onexx++; //This means a full column
                            //console.log('onexx is '+onexx);
                        }else if(checker1==='2'){
                            twoxx++; //This means another full column
                            //console.log('twoxx is '+twoxx);
                        }else if(checker1==='3'){
                            threexx++; //Same
                            //console.log('threexx is '+threexx);
                        }
                        if(onexx===3||onex===3||twoxx===3||twox===3||threex===3||threexx===3){
                            alert('Player X win!'); //This checks full rows and columns
                            $('.rows').prop("disabled",true);

                        }else if(onexx===1&&onex===1&&twoxx===1&&twox===1&&threex===1&&threexx===1){
                            alert('Player X win!'); //This is for diagonals
                            $('.rows').prop("disabled",true);

                        }else if(contador===9){
                            alert('draw..');
                            $('.rows').prop("disabled",true);

                        }
                    }else if(temp0===1){
                        $(this).text('O');
                        var ss=$(this).get(0).id;
                        tempx=1;
                        temp0=0;
                        var checker00=ss.charAt(0);
                        var checker11=ss.charAt(1);
                        $('#playo').hide();
                        $('#playx').show();
                        //We're going to check the winner
                        if(checker00==='1'){
                           one0++; 
                           //console.log('one0 is '+one0);
                        }else if(checker00==='2'){
                            two0++;
                            //console.log('two0 is '+two0);
                        }else if(checker00==='3'){
                            three0++;
                            //console.log('three0 is '+three0);
                        } 
                        if(checker11==='1'){
                            one00++;
                            //console.log('one00 is '+one00);
                        }else if(checker11==='2'){
                            two00++;
                            //console.log('two00 is '+two00);
                        }else if(checker11==='3'){
                            three00++;
                            //console.log('three00 is '+three00);
                        }
                        if(one00===3||one0===3||two00===3||two0===3||three0===3||three00===3){
                            alert('Player O win!');
                            $('.rows').prop("disabled",true);

                        }else if(one00===1&&one0===1&&two00===1&&two0===1&&three0===1&&three00===1){
                            alert('Player O win!');
                            $('.rows').prop("disabled",true);

                        }else if(contador===9){
                            alert('draw..');
                            $('.rows').prop("disabled",true);

                        }
                    }

                });

            });
        });

Answer 1

发生这种情况是因为当您使用启动函数时，它会在 .rows 中添加绑定(bind)单击函数。然后在重置后，您没有删除绑定(bind)，而是将另一个绑定(bind)重新添加到 .rows 点击函数中。

可以通过使用.on .off点击功能来避免这种情况。当你想附加点击功能时，你使用.on，当你重置或删除它时，你使用off

$( ".rows" ).off( "click");
$('.rows').on("click", function(){
});

演示:https://jsfiddle.net/tvabhzxn/2/