javascript Tic tac toe 游戏等待用户输入-6ren

javascript Tic tac toe 游戏等待用户输入

转载作者：行者123 更新时间：2023-12-02 14:27:56

我试图在没有人工智能的情况下实现井字棋游戏。不知怎的，我的点击功能会自动触发。您能帮我理解为什么点击功能会自动触发吗？这是 HTML 代码片段。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tic Tac Toe Game</title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
          integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
            integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container text-center bg-grey">

    <div class="container-fluid text-center">

        <h3 id="winner"></h3>

        <div class="row">
            <div class="col-md-4" id="a1"></div>
            <div class="col-md-4" id="a2"></div>
            <div class="col-md-4" id="a3"></div>
        </div>
        <div class="row">
            <div class="col-md-4" id="a4"></div>
            <div class="col-md-4" id="a5"></div>
            <div class="col-md-4" id="a6"></div>
        </div>
        <div class="row">
            <div class="col-md-4" id="a7"></div>
            <div class="col-md-4" id="a8"></div>
            <div class="col-md-4" id="a9"></div>
        </div>

    </div>

    <div class="container-fluid">
        <div class="row foot">
            <div class="col-md-6">
                <img onclick="users(1)" src="computer.png" alt="Computer Image">
            </div>
            <div class="col-md-6">
                <img onclick="users(2)"
                 src="human.png" alt="Human Image">
            </div>
        </div>
    </div>
</div>
<script>
    var player = "human";
    var game = false;
    var used = new Array(10);
    var mat = new Array(10);
    var humansTurn = false;
    var GameAvailable = false;
    var totalMoves = 0;


        $('#a1').click(mark("1", 5));
        $('#a2').click(mark("2", 5));
        $('#a3').click(mark("3", 5));
        $('#a4').click(mark("4", 5));
        $('#a5').click(mark("5", 5));
        $('#a6').click(mark("6", 5));
        $('#a7').click(mark("7", 5));
        $('#a8').click(mark("8", 5));
        $('#a9').click(mark("9", 5));


    function users(who) // initialize everything
    {
        for (var i = 1; i <= 9; i++) {
            used[i] = false;
            mat[i] = 0;
        }
        GameAvailable = true;
        humansTurn=false;
        player = "human";
        if (who == 1) {
            player = "computer";
            // compChoice();
        }
        else {
            humansTurn = true;
        }

            playGame(player);
    }

    function resetAll() {
        var bb = "#a";
        game = false;
        totalMoves = 0;
        humansTurn = false;
        for (var i = 1; i <= 9; i++) {
            used[i] = false;
            mat[i] = 0;
            $(bb + i).empty();
        }
        $("#winner").empty();
    }

    //  MARK USERS CHOICE
    function mark(ind, abc) {
        console.log(" you clicked: " + ind + "  " + abc);
        if (used[ind] === false && humansTurn === true) // users choice
        {
            totalMoves++; // increase moves
            mat[ind] = abc; // mark players choice
            used[ind] = true;
            var id = "#a" + ind;
            var imgtag;

            imgtag = "<img src='ob.png'>";
            $(id).prepend(imgtag);
            humansTurn = false;
        }
        else {
            alert(" It is not your turn !!!");
            console.log(ind + " occuppied or not your turn " + ind);
        }
    }
    function markComputer(ind, abc) {
        console.log(" computer moved: " + ind + "  " + abc);
        if (used[ind] === false && humansTurn === false) // comp choice
        {
            totalMoves++; // increase moves
            mat[ind] = abc; // mark comp choice
            used[ind] = true;
            var id = "#a" + ind;
            var imgtag;

            imgtag = "<img src='xb.png'>";
            $(id).prepend(imgtag);
        }
        else {
            alert(" It is not computers turn !!!");
        }
    }

    function compChoice() {
        if (humansTurn == false) {
            var index;
            while (true) {
                index = Math.floor((Math.random() * 9) + 1);
                if (used[index] === false) // random choice for computer
                {
                    console.log(" computers index: " + index);
                    break;
                }
            }
            markComputer(index, 1);
            humansTurn = true;
        }
        else{
            alert("Computer get crazy , extra move applied");
        }
    }


     function  playGame(player)
    {
        if(player=="computer")
        {
            compChoice(); // comp moves first
        }
    }

    function et() {
        var win = checkWinner();
        // 0 for human
        // 1 for computer
        // 2 for draw
        // 3 no winners yet
        if (win === 0) // checks winner
        {
            $("#winner").html("You Win!");
        }
        else if (win === 1) {
            $("#winner").html("You Lose!");
        }
        else if (win === 1) {
            $("#winner").html("Draw!");

            //  resetAll();
        }
    }


    function checkWinner() {
        var lt = 15;
        if (mat[1] + mat[2] + mat[3] === 15 ||
                mat[1] + mat[5] + mat[9] === 15 ||
                mat[1] + mat[4] + mat[7] === 15 ||
                mat[7] + mat[8] + mat[9] === 15 ||
                mat[3] + mat[5] + mat[7] === 15 ||
                mat[3] + mat[6] + mat[9] === 15 ||
                mat[4] + mat[5] + mat[6] === 15 ||
                mat[2] + mat[5] + mat[8] === 15) {
            return 0; // human
        }
        else if (mat[1] + mat[2] + mat[3] === 3 ||
                mat[1] + mat[5] + mat[9] === 3 ||
                mat[1] + mat[4] + mat[7] === 3 ||
                mat[7] + mat[8] + mat[9] === 3 ||
                mat[3] + mat[5] + mat[7] === 3 ||
                mat[3] + mat[6] + mat[9] === 3 ||
                mat[4] + mat[5] + mat[6] === 3 ||
                mat[2] + mat[5] + mat[8] === 3) {
            return 1; // for computer
        }
        else if (counter !== 9) { // not finished
            return 3;
        }
        else {
            return 2; // it is a draw
        }

    }

</script>

</body>
</html>

以及 css 样式表

    .container{
    margin: 50px;
    border: 3px solid #398439;

}
.row>.col-md-4{
    text-align: center;
   margin: 20px;
    padding: 10px;
    border: 2px solid #761c19;
    height: 80px;
    width: 80px;
}
.foot{

    border: 3px solid #398439;

}
img{
    width: 48px;
    height: 48px;
}

.row{
    width: 400px;
    border: 3px solid #398439;
    margin: 10px 30% 20px 30%;
}

最佳答案

您显式调用此函数:

$('#a1').click(mark("1", 5));

因为你的函数“mark”没有返回任何内容

调用 $('...').click();
执行“mark”方法

您可能想要更改函数标记以返回一个函数，然后该函数将用作点击处理程序:

function mark(ind, abc) {

    return function(clickEvent) {
        console.log(" you clicked: " + ind + "  " + abc);
        if (used[ind] === false && humansTurn === true) // users choice
        {
            totalMoves++; // increase moves
            mat[ind] = abc; // mark players choice
            used[ind] = true;
            var id = "#a" + ind;
            var imgtag;

            imgtag = "<img src='ob.png'>";
            $(id).prepend(imgtag);
            humansTurn = false;
        }
        else {
            alert(" It is not your turn !!!");
            console.log(ind + " occuppied or not your turn " + ind);
        }
    }
}

更准确地说:“click”函数需要一个函数作为参数，但您将函数调用的结果作为参数。

引用: https://api.jquery.com/click/

关于javascript Tic tac toe 游戏等待用户输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38058971/

文章推荐： javascript - 使用递增 ID 定位自动生成的字段 (JavaScript)

文章推荐： traefik - 无法在 AWS 负载均衡器后面从 http 重定向到 https

文章推荐： javascript - 按钮上的 Angular 单击 ctrl 外部，传递按钮 id

c++ - C++ 中的 Tic-Tac-Toe 帮助，如何制作循环以便 Tic Tac Toe 游戏每次都会重复棋盘
我是初学者，所以我的代码很乱。我还没有完整地评论这个游戏，所以如果你需要澄清一些变量，我可以给你。 (顺便说一句，这是一个要求制作井字游戏的c++项目) 我的主要问题是，我将如何重复我的棋盘(每次有人
tic-tac-toe - 使计算机永远不会在井字游戏中迷路
我正在为C的Tic Tac Toe代码编写一个简单的游戏。我已经完成了大部分代码，但是我希望AI永不丢失。我已经阅读了有关minimax算法的信息，但我不理解。如何使用此算法使计算机获胜或平局，但永
被调用函数中的 MATLAB tic/toc
在MATLAB中，我想对一个别人写的函数进行计时，他们的函数内部可能使用了tic/toc。我想要我自己的 tic/toc。但如果内部函数调用 tic，则外部计时器会重置。我怎样才能避免这种情况？我不
被调用函数中的 MATLAB tic/toc
在MATLAB中，我想对一个别人写的函数进行计时，他们的函数内部可能使用了tic/toc。我想要我自己的 tic/toc。但如果内部函数调用 tic，则外部计时器会重置。我怎样才能避免这种情况？我不
c++ - Tic Tac Toe中如何分出胜负以及如何不让双方都进入同一个位置？
我现在想用我的代码做两件事。1) 检查获胜者2) 不让双方玩家在同一个位置进入eg.如果player1已经在board[0][0]='X'处输入了value，player2再次进入board[0][0
MATLAB tic-toc 结果以分钟格式显示
我在我的 Matlab 项目中的很多地方都使用了 tic-toc 函数。输出时间可以是331.5264 或1234.754 秒等。我可以输出这种分钟格式吗？例如。 5 分 30.6 秒？谢谢! 最佳
c# - 日期时间变量 "tics"一小时
我的代码(或者更确切地说，其他人的代码)有一个奇怪的问题。我正在调试并试图弄清楚为什么我们的时间显示错误。无论如何，这是打印时间的代码:
javascript - Tic-Tac_Toe 计算机算法
我一直在开发一个简单的井字棋游戏，但遇到了一堵砖墙。虽然大多数游戏功能都已到位，但我缺少适当放置计算机图 block 所需的关键算法。我需要一种算法，可以搜索 3x3 的瓷砖网格，并在网格中搜索计
charts - Gnuplot x tic 标签重叠
我正在用这种格式从数据文件中绘制一个 gnuplot 图表: 01 value_1_1 value_2_1 02 value_1_1 value_2_1 ... 01 value_1_n value_
每个 tic 上的 Gnuplot 水平条
在 gnuplot 中，如何在 y 轴上的每个 tic 标记处在整个图形上绘制水平条？就像一种特定点在哪里的视觉指示器。 (抱歉，如果这很简单，但谷歌搜索无果而终) 最佳答案见 set grid命令
javascript - Tic Tac Toe 游戏结束后禁用按钮
感谢这里人们的帮助，我成功地禁用了点击 div 并在已经使用 $(".pos").addClass('already-played'); 选择它们时覆盖它们；以及 CSS 中的这个: .已经播放{
gnuplot - 如何获取自动生成的 gnuplot tic 之间的距离？
我正在使用 gnuplot 绘制大量绘图。由于每个图的数据范围(x 轴和 y 轴)都是可变的，因此我需要让 gnuplot 自动设置范围和控制。但是，我需要在绘图下方放置一个定义的网格，水平线各 1/
java - Tic Tac Toe 游戏重置太快
我有一个井字棋游戏，其中用户(x)玩CPU(o)。游戏开始时，CPU 将 (o) 放置在中心，并在用户之后移动到随机位置。游戏设置为循环，但一旦出现获胜者，它就会重置，并且不会显示“你赢/输的横幅”。
Gnuplot : xtics - place strings at tics
我是 gnuplot 新手，正在尝试为项目创建堆叠直方图。我遇到的问题是，我无法将 ticlabels 放在 x 轴上(即使可以，它们也没有以整齐的方式格式化)。我的gp文件如下: 这是我的数据文件的
javascript Tic tac toe 游戏等待用户输入
我试图在没有人工智能的情况下实现井字棋游戏。不知怎的，我的点击功能会自动触发。您能帮我理解为什么点击功能会自动触发吗？这是 HTML 代码片段。 Tic Tac Toe Gam
gnuplot - Gnuplot 中 tic 之间的间距
我一直在疯狂地寻找这个问题的答案。如何设置 gnuplot 上抽动之间的距离？目前我的情节中的抽搐被挤得太紧了。我希望它们更加分散。这是一个例子: 我有一个如下所示的图表: 100 ——
c - Tic-Tac-Toe:如何填充决策树？
我正在制作一个井字游戏程序。我计划将 minimax 与它一起使用。我制作了一棵树，其中包含所有可能的游戏序列的空间，并且我正在寻找一种方法来填充它。我目前有这种类型: typedef struct
java - 如何实现java tic tac toe游戏功能
我在完成这项学校作业时遇到了问题。我想实现一种方法，其中代码显示 //call method to check for Winner，在每轮后检查获胜者。我不确定该怎么做。我尝试过各种不同的方法。然
matlab - TIC TOC 或 Profiler
我正在编写一些计算时间很重要的代码。我使用 tic toc 函数和 profiler 来测量时间。它们之间有什么区别？对于我的一段代码，tic toc 函数说明例如时间是 3 秒，但是我的所有代码行
Java Tic Tac Toe 构造函数
我正在尝试遵循本教程: https://www.youtube.com/watch?v=Db3cC5iPrOM 2:59 我听不懂他在说什么。我不明白为什么他在构造函数(public static

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript Tic tac toe 游戏等待用户输入