1

三目並べゲームのデータ構成は単純です。

多くの HTML を含む配列がありますbutton。プログラムは、配列
を使用してボタンが使用されたかどうかを記憶します。Boolean を使用して、ボタンに表示するイメージをチェックします。このプログラムには、配列 を使用して誰もが利用できる勝利の組み合わせのリストが含まれています。人間が 5 を選ぶと、5 を含むすべての勝利コンボが という配列に移動されます。すると、人間が持つ役職が から入れ替わります。isUsed
isX
freeWinsyourWinsyourWins

コード：

<!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>

問題

1 行目ではなく2 行目または 3 行目をクリックすると、ユーザーと AI の勝ち手の決定が適切に機能します。

行 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:::


また、所有している正方形をクリアした後、配列ブラケットはなくなりました。
なぜ2つの問題が発生するのですか？

4

1 に答える 1

1

配列に関する 2 番目の質問に答えるには、空の配列を初期化し.push()、同時に同じ領域で初期化することはできません。JavaScript を実行するたびに配列が再作成されます。おそらく、関数の外側で配列を初期化し、残りのコードを関数内に配置する必要があります。あなたのゲーム AI に関しては、完全にはわかりません。これが多少役立つことを願っています。

于 2014-04-26T07:54:25.713 に答える