use*_*570 1 html javascript css
我想做的就是创造像"游戏"这样的国际象棋.你应该可以自由地拖动符号,有点像你可以在网上找到的国际象棋助手.真的很简单.
但我的问题是移动符号,是否有人能够提供帮助?
`<!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">♜</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"></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>
</table>
</body>
Run Code Online (Sandbox Code Playgroud)
`
检查jQueryUI的
可拖动:http://jqueryui.com/draggable/
Droppable:http://jqueryui.com/droppable/
有了这两个,你可以只使用javascript创建象棋游戏