在原生javascript中移动棋子
我在分配任务时遇到了一些问题，这是为了让棋子在本地JavaScript中不使用id而自由移动。 我设法将它们设置在船上，并尝试通过点击一块来获得坐标，然后通过单击船上某处获得坐标并将所选择的那些分配给新获取的坐标，但似乎没有任何工作正确。
我真的很感谢一些帮助:)
<head>
<meta charset="utf-8">
<style>
body
{
padding: 20px;
}
h1
{
text-align: center
}
table
{
margin-left:auto;
margin-right:auto;
border: 4px solid black;
border-collapse: collapse;
}
td
{
width: 40px;
height: 40px;
text-align: center;
}
.up
{
border-top-style: hidden;
border-left-style: hidden;
border-right-style: hidden;
border-bottom-style: solid;
background-color: white;
font-weight: bold
}
.down
{
border-top-style: solid;
border-left-style: hidden;
border-right-style: hidden;
border-bottom-style: hidden;
background-color: white;
font-weight: bold
}
.left
{
border-top-style: hidden;
border-left-style: hidden;
border-right-style: solid;
border-bottom-style: hidden;
background-color: white;
font-weight: bold
}
.right
{
border-top-style: hidden;
border-left-style: solid;
border-right-style: hidden;
border-bottom-style: hidden;
background-color: white;
font-weight: bold
}
.gray
{
background-color: gray;
}
.white
{
background-color: white;
}
</style>
</head>
<body>
<script> // chessboard
document.write("<h1>Game</h1>");
document.write("<table><tr class=up><td></td>");
for (var k=0; k<=7; k++){ //letters on top, 97 is a, 104 is h
document.write("<td>" + String.fromCharCode(k+97) + "</td>");
}
document.write("</tr>");
for (var j=8; j>0; j--){ //numbers dropping on sides
document.write("<tr onclick='indexRow(this)'><td class=left>" + j + "</td>");
if((j%2)==0){
for (var i=0; i<8; i++){
if((i%2)==0){
document.write('<td onclick="indexCell(this)" class=white></td>'); //grab index
} else{
document.write('<td onclick="indexCell(this)" class=gray></td>'); //grab index
};
}
} else{
for (var i=0; i<8; i++){
if((i%2)==0){
document.write('<td onclick="indexCell(this)" class=gray></td>'); //grab index
} else{
document.write('<td onclick="indexCell(this)" class=white></td>'); //grab index
};
}
};
document.write("<td class=right>" + j + "</td>");
}
document.write("<tr class=down><td></td>");
for (var k=0; k<=7; k++){ //letters on top,97 is a, 104 is h
document.write("<td>" + String.fromCharCode(k+97) + "</td>");
}
document.write("</tr></table>");
//pieces
var pieces=new Array( //pieces
new Array(" "," "," "," "," "," "," "," "," "),
new Array(" ","♖"," "," ","♔","♕","♗","♘","♖"),
new Array(" ","♙","♙","♙"," "," ","♙","♙","♙"),
new Array(" "," "," "," "," ","♙"," "," "," "),
new Array(" "," "," "," ","♙"," "," "," "," "),
new Array(" "," "," "," ","♘"," "," ","♗"," "),
new Array(" "," "," ","♞"," "," "," "," "," "),
new Array(" ","♟","♟","♟","♞","♟","♟","♟","♟"),
new Array(" ","♜"," ","♝","♚","♛","♝"," ","♜")
);
//sets up the board
function setUp(){
for (i = 1; i <=8; i++){
for (j = 1; j <=8; j++){
document.getElementsByTagName('tr')[j].getElementsByTagName('td')[i].innerHTML = pieces[j][i];
}
}
}
setUp();
//attempts with making things move
var clickedon = false;
var save_x = 0;
var save_y = 0;
var piece = 0;
var _x = 0;
var _y = 0;
//gets cell index
function indexCell(x)
{
//alert("Cell index is: " + x.cellIndex);
_x = x.cellIndex;
if(clickedon == false)
{
if(pieces[_x][_y] != " ")
{
figura = pieces[_x][_y];
save_x = _x;
save_y = _y;
clickedon = true;
alert(piece)
}
}
else
{
if(pieces[_x][_y] == " ")
{
pieces[save_x][save_y] = " ";
pieces[_x][_y] = piece;
setUp();
clickedon = false
}
}
}
//grabs row index
function indexRow(y){
//alert("Row index is: " + x.rowIndex);
_y = y.rowIndex;
}
</script>
</body>
编辑：我现在发布了这个版本，试图让我的作品在数字和字母周围移动。
你需要做的是为每个表格单元格设置一个onclick事件，并且有几个全局变量来保存国际象棋棋盘的状态。
所以这里是我会建议尝试的：
var state = false //false if no piece has been selected
var currentPiece;
var currentCell;
var cells = document.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
cells[i].onclick = function(){
getCell(this);
};
}
function getCell(that) {
if(!state) { //this means if the state is false (i.e. no piece selected
state = true; //piece has been selected
currentPiece = that.innerHTML; //get the current piece selected
currentCell = that; //get the current cell selection
}
else { //else, you are moving a piece
that.innerHTML = currentPiece; //Set the selected space to the piece that was grabbed
currentCell.innerHTML = ""; //remove the piece from its old location
state = false; //piece has been placed, so set state back to false
}
}
请记住，这只是我如何处理这个问题的粗略布局。 我没有考虑到棋子类型或某些例外或类似的东西。
链接地址: http://www.djcxy.com/p/84621.html