如何将 Javascript 添加到我的 HTML 和 CSS 井字游戏？答案

【问题标题】：How do I add Javascript to my HTML and CSS tic tac toe game?如何将 Javascript 添加到我的 HTML 和 CSS 井字游戏？
【发布时间】：2014-01-09 23:21:44
【问题描述】：

这是我的 HTML 和 CSS。我没有嵌入式 Javascript。但是，我确实引用了一个 Javascript 文件。当我点击一个框时，只有X 和“O”出现的最简单的 Javascript 是什么？

<html>
    <head>
        <title>First Tic Tac Toe</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="script.js"></script>
    </head>
    <body>
        <h1>Tic Tac Toe</h1>

        <div class="wrapper">
            <div class="gameboard">

                <div class="Row1">
                    <div id="cell1"></div>
                    <div id="cell2"></div>
                    <div id="cell3"></div>
                </div>

                <div class="Row2">
                    <div id="cell4"></div>
                    <div id="cell5"></div>
                    <div id="cell6"></div>
                </div>

                <div class="Row3">
                    <div id="cell7"></div>
                    <div id="cell8"></div>
                    <div id="cell9"></div>
                </div>

            </div>

            <div class="button">

            <button>New Game</button>
            <button>End Game</button>

            </div>
        </div>

    </body>
</html>

这是我的 CSS

h1 {
    text-align: center;
}


body {
    background-image: url("http://www.staceybess.com/gfx/bg-chalkboard.jpg");
    background-size: cover;
}


#chalk {
    position: absolute;
    z-index: -1;
}


.gameboard {
    width: 328px;
    height:318px;
    z-index: 1;
    margin-top: 75px;
}

.wrapper {
    width: 330px;
    margin:0 auto;

}

.button {

     background-color:white;
     width: 160px;
     margin:0 auto;
}

button {
    float: left;
}

.row1, .row2, .row3 {
    clear:both;

}

#cell1,#cell2,#cell4,#cell5 {
    border-right: 8px solid white;
    border-bottom: 8px solid white;
    border-style: eraser;
}

#cell3,#cell6{
    border-bottom: 8px solid white;
}

#cell7 {
    border-right: 8px solid white;
}

#cell9 {
    border-left: 8px solid white;
}

#cell1 {
    width:100px;
    height:100px;
    float: left;
}

#cell2 {
    width:100px;
    height:100px;
    float: left;
}

#cell3 {
    width:100px;
    height:100px;
    float: left;
}

#cell4 {
    width:100px;
    height:100px;
    float: left;
}

#cell5 {
width:100px;
    height:100px;
    float: left;
}

#cell6 {
    width:100px;
    height:100px;
    float: left;
}

#cell7 {
    width:100px;
    height:100px;
    float: left;
}

#cell8 {
    width:100px;
    height:100px;
    float: left;
}

#cell9 {
    width:100px;
    height:100px;
    float: left;
}

【问题讨论】：

您可能想要添加 Javascript，而不是 Java。尽管名称相似，但它们是完全不同的编程语言。
JAVA != JAAAVAAAASSCCRIPPPTPTPTTPTPTPTPTPEH，阅读标签说明
我们不为您编码；顺便说一句，将所有类更改为同一个类，除非您打算使用 id.

标签： javascript html onclick tic-tac-toe

【解决方案1】：

首先，如果不需要，不要为每一行使用不同的类。到处使用行和单元格。

通过 head 中的链接包含 jquery.js。

然后

$(document).ready(function(){
    $(".gameboard").find(".cell").click(function(){
        console.log("Clicked");
    });
});

好的，现在它说“点击”。

让我们添加“X”或“O”。

$(document).ready(function(){
    var tour = 0;
    $(".gameboard").find(".cell").click(function(){
        if(tour%2==0){
            $(this).text("O");
        } else {
            $(this).text("X");
        }
        i++;
    });
});

现在我们不能覆盖以前的值。

$(document).ready(function(){
    var tour = 0;
    $(".gameboard").find(".cell").click(function(){
        if($this.text() != ""){ return; }
        if(tour%2==0){
            $(this).text("O");
        } else {
            $(this).text("X");
        }
        i++;
    });
});

【讨论】：

我的女朋友等我看电视剧，请有人继续：p