Question

我想做的就是像＃34;游戏＆＃34;一样创造象棋。你应该可以自由地拖动符号，有点像你可以在网上找到的国际象棋助手。很简单。

但我的问题是移动符号，是否有人能够提供帮助？

    `<!DOCTYPE html>
<html>
<head>
    <style>
        html, body {
            width:100%;
            height:100%;
        }

        .black {
            background-color:silver;

        }

        table {
            margin:auto;
            text-align:center;
        }
    </style>
</head>
    <body>
        <table border="1" style="border:1px black solid;">
            <tr>
                <td width="40px" height="40px">&#9820;</td>
                <td class="black" width="40px" height="40px">&#9822;</td>
                <td width="40px" height="40px">&#9821;</td>
                <td class="black" width="40px" height="40px">&#9819;</td>
                <td width="40px" height="40px">&#9818;</td>
                <td class="black" width="40px" height="40px">&#9821;</td>
                <td width="40px" height="40px">&#9822;</td>
                <td class="black" width="40px" height="40px">&#9820;</td>
            </tr>
            <tr>
                <td class="black" width="40px" height="40px">&#9823;</td>
                <td width="40px" height="40px">&#9823;</td>
                <td class="black" width="40px" height="40px">&#9823;</td>
                <td width="40px" height="40px">&#9823;</td>
                <td class="black" width="40px" height="40px">&#9823;</td>
                <td width="40px" height="40px">&#9823;</td>
                <td class="black" width="40px" height="40px">&#9823;</td>
                <td width="40px" height="40px">&#9823;</td>
            </tr>
            <tr>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
            </tr>
            <tr>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
            </tr>
            <tr>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
            </tr>
            <tr>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
                <td class="black" width="40px" height="40px"></td>
                <td width="40px" height="40px"></td>
            </tr>
            <tr>
                <td width="40px" height="40px">&#9817;</td>
                <td class="black" width="40px" height="40px">&#9817;</td>
                <td width="40px" height="40px">&#9817;</td>
                <td class="black" width="40px" height="40px">&#9817;</td>
                <td width="40px" height="40px">&#9817;</td>
                <td class="black" width="40px" height="40px">&#9817;</td>
                <td width="40px" height="40px">&#9817;</td>
                <td class="black" width="40px" height="40px">&#9817;</td>
            </tr>
            <tr>
                <td class="black" width="40px" height="40px">&#9814;</td>
                <td width="40px" height="40px">&#9816;</td>
                <td class="black" width="40px" height="40px">&#9815;</td>
                <td width="40px" height="40px">&#9813;</td>
                <td class="black" width="40px" height="40px">&#9812;</td>
                <td width="40px" height="40px">&#9815;</td>
                <td class="black" width="40px" height="40px">&#9816;</td>
                <td width="40px" height="40px">&#9814;</td>
            </tr>
        </table>
    </body>

`

Answer 1

检查jQueryUI的

可拖动：http://jqueryui.com/draggable/

Droppable：http://jqueryui.com/droppable/

使用这两个，您可以仅使用javascript创建象棋游戏

我能用JS制作符号吗？

1 个答案: