Question

目前我正在Tic Tac Toe工作，我在胜利条件方面遇到了一些困难。

我正在使用。一个（点击，以确保不会多次点击div。

xoClick 计算发生的次数，并在 X 和 O <之间切换播放器的切换/ p>

获胜条件是*$('.block').one('click',function(){*

中的第二个if语句

我到处都在使用console.log来查看代码可以看到的内容，以便查看它在哪里中断。

目前，我正在尝试在第一个if语句中查看.r1c1，但它不能。这是我的头衔。

条件之前的console.logs可以看到.block的 .html（），但条件本身在控制台中什么都不产生。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TicTacToe</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
        <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div class="container">
            <div class="r1">
                <div class="r1c1 block"></div>
                <div class="r1c2 block"></div>
                <div class="r1c3 block"></div>
            </div>
            <div class="r2">
                <div class="r2c1 block"></div>
                <div class="r2c2 block"></div>
                <div class="r2c3 block"></div>
            </div>
            <div class="r3">
                <div class="r3c1 block"></div>
                <div class="r3c2 block"></div>
                <div class="r3c3 block"></div>
            </div>
        </div>
        <aside>
            <input type="submit" value="Reset" id="resetButton">
            <p>Player 1 Score</p>
            <p class="p1Score"></p>
            <p>Player 2 Score</p>
            <p class="p2Score"></p>
            <p>Cat Game</p>
            <p class="catGame"></p>
        </aside>
        <div>
            <h1>Project Notes:</h1>
            <p>This project was done entirely by me. There was no cheating by coping code. There were lots of Google Queries but none consisting of how to make Tic Tac Toe. Just looked up elements that I need in order to complete this personal project.</p>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
            <script src="script.js"></script>
    </body>

这是我的CSS

body{
    width: 100%;
    height: 1000px;
    margin: 0 auto;
}

.container{
    width: 80%;
    height: 450px;
    display: inline-block;
    float: left;
    font-family: 'Montserrat', sans-serif;
}

/* For Spacing  */

.r1,.r2,.r3{
    width: 100%; 
    height: 33%;
    display: inline-block;
    float: left;
    margin: -1px auto;
}


.r1c1,.r1c2,.r1c3,.r2c1,.r2c2,.r2c3,.r3c1,.r3c2,.r3c3{
    width: 33%; 
    height: 98%; 
    display: inline-block;
    float: left;
    margin: 0 auto;
}

/* For Borders on the blocks */
/* Left Line for the top column */

.r1c1,.r1c2,.r2c1,.r2c2,.r3c1,.r3c2{
    border-right: black 2px solid;
}

/* Bottom Lines for blocks needed. */
.r1c1,.r1c2,.r1c3,.r2c1,.r2c2,.r2c3{
        border-bottom: black 2px solid;
}

/* Styling for aside */

aside{
    padding: 5% 1% 1% 1%;
    text-align: center;
    font-family: 'Ubuntu', sans-serif;
}
/* for styling the X and O*/ 
.block{
    font-size: 900%;
    text-align: center;
}

这是JS

$(document).ready(function(){

    // Variable that will be needed
    var p1Score = 0;
    var p2Score = 0;
    var catGame = 0; 
    var xoClick = 0; 
    var player 
    // For the divs to be clicked one and track the clicks 

    $('.block').one('click',function(){
        //for alternation

        xoClick++
        //console.log(xoClick);
        //the alternating 
        if((xoClick % 2 === 0)===false){
            player = "X";
            $(this).html(player);
        } else if((xoClick % 2 === 0)===true){
            player = "O";
            $(this).html(player);
        } else {
            null
        }

        //For Troubleshooting and monitoring 
              // console.log($('.r1c1').html());
             // console.log($('.r1c2').html());
             // console.log($('.r1c3').html());
             // console.log($('.r2c1').html());
             // console.log($('.r2c2').html());
             // console.log($('.r2c3').html());
             // console.log($('.r3c1').html());
             // console.log($('.r3c2').html());
             // console.log($('.r3c3').html());

        //Win condition
        if ($('.r1c1').html() === $('.r1c2').html() === $('.r1c3').html()){
             console.log(player + ' Wins!');
              console.log($('.r1c1').html());
             // console.log($('.r1c2').html());
             // console.log($('.r1c3').html());
        } else if ($('.r2c1').html() === $('.r2c2').html() === $('.r2c3').html()){
            console.log(player + ' Wins!'); 
        } else if ($('.r3c1').html() === $('.r3c2').html() === $('.r3c3').html()){
            console.log(player + ' Wins!'); 
        } else if ($('.r1c1').html() === $('.r2c1').html() === $('.r3c1').html()){
            console.log(player + ' Wins!'); 
        } else if ($('.r1c2').html() === $('.r3c2').html() === $('.r3c2').html()){
            console.log(player + ' Wins!'); 
        } else if ($('.r3c3').html() === $('.r3c3').html() === $('.r3c3').html()){
            console.log(player + ' Wins!'); 
        } else if ($('.r1c1').html() === $('.r2c2').html() === $('.r3c3').html()){
            console.log(player + ' Wins!'); 
        } else if ($('.r1c3').html() === $('.r3c2').html() === $('.r3c1').html()){
            console.log(player + ' Wins!'); 
         } else { null };
         //proving that no matter where I put it; it can see .r1c1
         //console.log($('.r1c1').html());

    });
    // This is for the reset button 


});

如果您还有其他需要，请告诉我。

其余的和柜台将在稍后出现。

Answer 1

对于获胜条件，您无法使用当前条件语法检查三个项目的相等性。您可以使用部分transitive relation并检查是否所有项都为空。

所以不要使用

$('.r1c1').html() === $('.r1c2').html() === $('.r1c3').html()

使用

$('.r1c1').html() === $('.r1c2').html() && 
$('.r1c2').html() === $('.r1c3').html() && 
$('.r1c1').html() !== "" && 
$('.r1c2').html() !== "" && 
$('.r1c3').html() !== ""

就像说 x = y ， y = z ，而 x ， y ， z 是空白，然后执行语句。

空白测试的原因是，如果等效值为空，则您不希望脚本宣布获胜。

无法查看.html（）

1 个答案: