个人中心
gpt4 book ai didi

javascript - 为什么我的 AI 在井字游戏中表现得很奇怪？

转载 作者：行者123 更新时间：2023-11-28 02:16:34 26 4
gpt4 key购买 nike

井字游戏的数据组织很简单。

有一个数组，其中包含许多 HTML 按钮。
程序通过使用 isUsed 数组来记住按钮是否被使用。
它使用 isX bool 值检查按钮上显示的图像。
该程序包含一个获胜组合列表，每个人都可以使用 freeWins 数组使用这些组合。当人类选择 5 时，所有包含 5 的获胜组合都会移动到名为 yourWins 的数组中。然后，人类拥有的头寸将从 yourWins 中替换。

代码:

<!DOCTYPE html>
<html>
    <title> 1Player </title>
    <style>
        #stage{
            width: 400px;
            height: 400px;
            padding: 0px;
            position: relative;
        }
        .square{
            user-select : none;
            -webkit-user-select: none;
            -moz-user-select: none;

            width: 64px;
            height: 64px;
            background-color: gray;
            position: absolute;
        }

    </style>
    <body>
        <div id="stage">
        </div>
    </body>
    <script>
        const ROWS = 3;
        const COLS = 3;
        const GAP = 10;
        const SIZE = 64;
        var stage = document.querySelector("#stage");

        var lotOfButtons = [];
        var isUsed = [false,false,false,false,
                     false,false,false,false,false];


        var myPositions = "";
        var yourPositions = "";
        var youPicked = "";
        var iPicked = "";
        var isX = true;
        var isFirstMove = true;


        var myWins = [];
        var yourWins = [];
        var freeWins = ["123","159","147",
                        "258",
                        "369","357",
                        "456",
                        "789"];

        prepareBoard();
        stage.addEventListener("click",clickHandler,false);


        function prepareBoard(){ //Prepare the board on which the users will play.
            for(var row = 0;row<ROWS;row++){ // Prepare the rows.
            for(var col = 0;col < COLS;col++){ //Prepare the columns.
                var square = document.createElement("button"); //Prepare the button which represents a square.
                square.setAttribute("class","square"); //Make it a square 'officially'.
                stage.appendChild(square); //Add the square to the play area..
                lotOfButtons.push(square); //Keep a record of squares.
                square.style.left = col * (SIZE+GAP) + "px"; //Properly set the horizontal spacing.
                square.style.top = row * (SIZE+GAP) + "px"; //Properly set the vertical spacing.
            }
            }
        }

        function clickHandler(event){
            var index = lotOfButtons.indexOf(event.target);
            if(index=== -1 || isX === false){
                return;
            }
            isX = false;
            isUsed[index] = true;
            event.target.style.backgroundImage = "url(../img/X.png)";
            yourMove(index+1);
        }

        function yourMove(someIndex){
            console.log("Finding Human Winning Moves::: ");
            yourWins = findWinnindMoves(yourWins,someIndex);
            console.log(yourWins);
            console.log("Clearing Human Owned Positions::: ");
            yourWins = clearOwnedPositions(yourWins,someIndex);
            console.log(yourWins + "\n");

            myMove();
        }

        function myMove(){
            var isFifthSquareUsed = isFiveUsed();
            if(isFifthSquareUsed === false){ //Is fifth square used ?? --- NO!
                var selectedSquare = lotOfButtons[4];
                selectedSquare.style.backgroundImage = "url(../img/O.PNG)";
                isUsed[4] = true;
                isFirstMove = false;
                isX = true;

                console.log("Finding AI Winning Moves::: ");
                myWins = findWinnindMoves(myWins,4);
                console.log(myWins);
                console.log("Clearing AI Owned Positions::: ");
                myWins = clearOwnedPositions(myWins,4);
                console.log(myWins + "\n");


            }else if(isFifthSquareUsed && isFirstMove){ //Is fifth square used ?? --- YES, but it is first move.
                //TODO add logic
            }else{ //Some random square has already been chosen. Now it is time to use strategy.
                //TODO add logic
            }
        }

        function findWinnindMoves(winsArray,someIndex){//using which combination can a user or AI win ?
            for(var i = 0;i<freeWins.length;i++){
                if(freeWins[i].indexOf(someIndex) != -1){
                    winsArray.push(freeWins[i]);
                    i--;
                    freeWins.splice(i,1);
                }
            }
            return winsArray;
        }

        function clearOwnedPositions(winsArray,someIndex){ //Reduce the number of squares needed to get triplets.
            for(var i=0;i<winsArray.length;i++){
                if(winsArray[i].indexOf(someIndex) != -1){
                    winsArray[i] = winsArray[i].replace(someIndex,"");
                }
            }
            return winsArray;
        }

        function isFiveUsed(){ //Is AI able to get the center square ?
            return isUsed[4];
        }

    </script>
</html>

问题

如果我点击第二行或第三行并且不在第一行，则用户和 AI 的获胜 Action 确定将正常工作。

第 2 行输出

Finding Human Winning Moves:::
["147", "456"]
Clearing Human Owned Positions:::
17,56
Finding AI Winning Moves:::
["147", "456"]
Clearing AI Owned Positions:::
17,56

第 1 行输出 

Finding Human Winning Moves:::
["123", "123", "123", "123", "123", "123", "123", "123"]
Clearing Human Owned Positions:::
23,23,23,23,23,23,23,23
Finding AI Winning Moves:::
[]
Clearing AI Owned Positions:::


另外，清除拥有的方 block 后，数组括号就消失了。
为什么会出现这两个问题？

最佳答案

要回答有关数组的第二个问题，您不能在同一区域初始化空白数组并同时.push()。每次运行 JavaScript 时，它都会重新创建数组，这意味着你要告别放入其中的内容。也许您应该在函数外部初始化数组，并将其余代码放在函数内部。至于你的游戏AI，我不太确定。希望这会有所帮助。

关于javascript - 为什么我的 AI 在井字游戏中表现得很奇怪？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16304710/

26 4 0
文章推荐： c++ - Qt:使用uic生成ui_类，通过类名动态加载
文章推荐： image - 如何在 div 包含一个或多个 HTML5 canvas 元素的客户端将 div 保存为图像？
文章推荐： c++ - 如何测试数组元素是否定义(其中元素可以定义为 0)？
文章推荐： PHP:htmlentities 不使用变量
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com