javascript井字游戏等待用户输入答案

【问题标题】：javascript Tic tac toe Game waiting user inputjavascript井字游戏等待用户输入
【发布时间】：2016-06-27 16:31:40
【问题描述】：

我试图在没有 AI 的情况下实现井字游戏。不知何故，我的点击功能会自动触发。你能帮我理解为什么点击功能会自动触发吗？这是 HTML 代码 sn-p。

<!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%;
}

【问题讨论】：

您能描述一下您的问题吗？点击什么时候触发？是点击框后触发吗？

标签： javascript jquery tic-tac-toe

【解决方案1】：

你显式调用了这个函数：

$('#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/

【讨论】：