Question

我试图在没有AI的情况下实施tic tac toe游戏。不知怎的，我的点击功能自动触发。你能帮我理解点击功能自动触发的原因吗？这是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%;
}

Answer 1

你明确地调用这个函数：

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

因为你的功能＆＃34;标记＆＃34;没有回报你

拨打$（＆＃39; ...＆＃39;）。click（）;
执行方法＆＃34;标记＆＃34;

您可能希望更改功能标记以返回一个功能，然后将其用作点击处理程序：

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);
        }
    }
}

更确切地说：＆＃34;点击＆＃34;函数需要函数作为参数，但是您将函数调用的结果作为参数移交。

参考： https://api.jquery.com/click/

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

1 个答案: