Question

刚做了一个简单的棋子游戏，完成了跳跃或移动棋子的逻辑。

现在在检查件移动或跳过另一个检查件时的实际逻辑上存在问题。如何自动删除或删除跳过的检查件？

非常感谢：）

    <html>
    <head>
    <style>

        body { background-color: #D1CDDF; }

        p { font-family: Verdana, Geneva, sans-serif;
            font-size:  30; }

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

        label { font-family: "Lucida Console", Monaco, monospace;
                font-size: 15; }

        .focused{ border: 2px solid yellow; }

    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>

        var moves = [];

        function saveScore() {
            // syntax: $.post(URL,data,callback);
            $.post("scores.php",
            {
                TheFile: $("#filename").val(),
                TheMessage: $("#winner").val() + "\r\n"
            }
            ,function(dataFromtheServer) {
                $("#result").html(dataFromtheServer);
            });
        }


        function openBoard()
        {   
            $(document).ready(function()
            {
                var p1Name = document.getElementById("p1name").value;
                var p2Name = document.getElementById("p2name").value;

                var heading = "<center><p><font color=\"red\"><b>" + p1Name + "</b></font> vs <font color=\"blue\"><b>" + p2Name + "</b></font></p></center>";

                var table = $('<table width=500px cellspacing=0px cellpadding=0px border=1px ></table>');
                var rc;

                var picName;
                var picName2;

                for( y = 1; y <= 8; y++ )
                {
                    var row = $('<tr></tr>');

                    for ( var x = 1; x <= 8; x++)
                    {
                        rc = y + x;

                        // creating the images
                        picName = "p" + 1 + ".png" ;
                        var pic1 = $('<img>').attr('src',picName);

                        picName2 = "p" + 2 + ".png";
                        var pic2 = $('<img>').attr('src',picName2);

                        if(rc % 2 === 0)
                        {
                            if(y === 1 || y === 2 || y === 3)
                            {
                                var col1 = $('<td align=center height=50px width=50px bgcolor=#4E9660 ></td>').attr('id',y + '-' + x);

                                col1.html(pic1);

                                row.append(col1);  
                            }
                            else if(y === 6 || y === 7 || y === 8)
                            {
                                var col2 = $('<td align=center height=50px width=50px bgcolor=#4E9660 ></td>').attr('id',y + '-' + x);

                                col2.html(pic2);

                                row.append(col2);
                            }
                            else
                            {
                                var col3 = $('<td align=center height=50px width=50px bgcolor=#4E9660 ></td>').attr('id',y + '-' + x);

                                row.append(col3);
                            }
                        }
                        else
                        {
                            var col4 = $('<td align=center height=50px width=50px bgcolor=#C4C160 ></td>');

                            row.append(col4);
                        }
                    }

                table.append(row);

                }

                document.getElementById("bBoard").style.visibility = "hidden";
                $('#board').append(heading);
                $('#board').append(table);

                // setting the listener
                $('td').click(function()
                {
                    iAmtheClickListener(this.id);
                });

            });
        }


        function iAmtheClickListener(theID)
        {
            var r = $.inArray(theID,moves); // determine if the id is in the array
            var content = $("#"+theID).html();

            if( ((r < 0) && (content !== ""))  || ((r<0) && (moves.length == 1)) )
            {
                moves.push(theID);
                //change background color
                changeBackground("#"+theID,"yellow");
            }
            else
            {
                moves.splice(r,1); // to remove
                changeBackground("#"+theID,"#4E9660") ;
            }

            if (moves.length == 2)
            {
                var destId = moves[1] ;
                var srcId = moves[0] ;
                var srcImg = $("#" + srcId).html();

                $("#" + destId).html(srcImg);
                $("#" + srcId).html("");

                moves = [] ; // remove all
                changeBackground("#"+destId,"#4E9660") ;
                changeBackground("#"+srcId,"#4E9660") ;
            }

            $('#result').html(theID);
        }

        function changeBackground(theIdUwant, theColor)
        {
            $(theIdUwant).css("background-color",theColor);
        }

    </script>
</head>
<body>

    <center>
    <p>~Checkers~</p>
    <table border=1 cellpadding=25px>
        <tr><td><label>Player 1: <input type=text id=p1name /></label><br/><br/>
                <label>Player 2: <input type=text id=p2name /></label><br/><br/>
                <button id="bBoard" onclick="openBoard();">Start Game</button><br/><br/></td>
        <td><div class="b" id="board"></div></td>
        <td>
            <input type=hidden id=filename value="players.txt" />
            <label>Register Winner: <input type=text id=winner /></label><br/><br/>
            <button id="bReg" onclick="saveScore();">Submit</button><br/><br/>
            <div id="result"></div>    
        </td>
        </td></tr>
    </table>
    </center>

</body>

Answer 1

假设被跳跃的棋子在board[row][col]，你可以在被跳跃后在那个特定的单元格处赋值为零或空：

board[row][col] = EMPTY

跳棋游戏 - 跳过后如何删除img或checker片

1 个答案: