Question

我正在尝试使用java脚本在html中设计国际象棋游戏。我正在使用拖放在棋盘上移动棋子。我还处于起步阶段。我只是设计了电路板并使用“uni code”字符放置了部分。我还没有写出每一件作品的功能。我只是区分了这些颜色，即白色碎片不应该杀死黑色碎片。这里的主要问题当我将一块从一个单元格拖到另一个单元格时它会移动但是当我试图将它放回原来的位置时它不允许移动。调试时，我发现有一个先前拖动元素的实例，根据我的程序显示错误“非法移动，无法杀死相同的颜色块”。我也试过使用MozClearData，但它没有用。请让我知道如何解决此问题。我的Html代码是这样的：

       <html> 
       <head> 
        <title>Chess Board</title> 
        <style type="text/css"> 
                table.chessboard { 
                border: 2px solid #000000; 
                 table-layout:fixed;
        } 
        table.chessboard td { 
             width:60px; 
             height:60px; 
         } 
        table.chessboard td.white { 
              background-color:#ffffff; 
        } 
       table.chessboard td.black { 
          background-color:#d3d3d3; 
       } 
     </style> 
   </head> 
   <body> 
       <table width="540" height="580" class="chessboard" align="center" 
       ondrop="drop(event)" ondragover="allowDrop(event)" style="font-size:2em"> 
       <tr id="0"> 
       <td id="A0" width="90" height="90" class="white" align="center"><a href="#" id="rook">              
        <span id="SA0" class="white" draggable="true" ondragstart="drag(event)">&#9814;</span>
       </a></td> 
        <td id="B0" width="90" height="90" class="black" align="center"><a href="#" id="knight">  
         <span id="SB0" class="white" draggable="true" ondragstart="drag(event)">&#9816;</span></a></td> 
        <td id="C0" width="90" height="90" class="white" align="center"><a href="#" id="bishop">              
         <span id="SC0" class="white" draggable="true" ondragstart="drag(event)">&#9815;</span></a></td> 
         <td id="D0" width="90" height="90" class="black" align="center"><a href="#" id="queen">                <span  id="SD0" class="white" draggable="true" ondragstart="drag(event)">&#9813;</span></a></td>
        <td id="E0" width="90" height="90" class="white" align="center"><a href="#" id="king">    <span id="SE0" class="white" draggable="true" ondragstart="drag(event)">&#9812;</span></a></td> 
        <td id="F0" width="90" height="90" class="black" align="center"><a href="#" id="bishop">  <span id="SF0" class="white" draggable="true" ondragstart="drag(event)">&#9815;</span></a></td> 
       <td id="G0" width="90" height="90" class="white" align="center"><a href="#" id="knight"> <span id="SG0" class="white" draggable="true" ondragstart="drag(event)">&#9816;</span></a></td> 
       <td id="H0" width="90" height="90" class="black" align="center"><a href="#" id="rook"><span id="SH0" class="white" draggable="true" ondragstart="drag(event)">&#9814;</span></a></td> 
    </tr> 
    <tr id="1"> 
         <td id="A1" width="90" height="90" class="black" align="center"><a href="#" id="pawn"> <span id="SA1" class="white" draggable="true" ondragstart="drag(event)">&#9817;</span></a></td> 
        <td id="B1" width="90" height="90" class="white" align="center"><a href="#" id="pawn"> <span id="SB1"  class="white" draggable="true" ondragstart="drag(event)">&#9817;</span></a></td> 
       <td id="C1" width="90" height="90" class="black" align="center"><a href="#" id="pawn"> <span class="white" id="SC1"  draggable="true" ondragstart="drag(event)">&#9817;</span></a></td> 
      <td id="D1" width="90" height="90" class="white" align="center"><a href="#" id="pawn"><span  class="white" id="SD1"  draggable="true" ondragstart="drag(event)">&#9817;</span></a></td> 
      <td id="E1" width="90" height="90" class="black" align="center"><a href="#" id="pawn"><span  id="SE1" class="white"  draggable="true" ondragstart="drag(event)">&#9817;</span></a></td> 
     <td id="F1" width="90" height="90" class="white" align="center"><a href="#" id="pawn"><span id="SF1" class="white"  draggable="true" ondragstart="drag(event)">&#9817;</span></a></td> 
     <td id="G1" width="90" height="90" class="black" align="center"><a href="#" id="pawn"><span id="SG1" class="white"  draggable="true" ondragstart="drag(event)">&#9817;</span></a></td> 
     <td id="H1" width="90" height="90" class="white" align="center"><a href="#" id="pawn"><span id="SH1" class="white"  draggable="true" ondragstart="drag(event)">&#9817;</span></a></td> 
   </tr> 
    <tr id="2"> 
      <td id="A2" width="90" height="90" class="white" align="center"><a href="#"><span id="SA2"  draggable="true" ondragstart="drag(event)"></span></a></td> 
       <td id="B2" width="90" height="90" class="black" align="center"><a href="#"><span id="SB2"   draggable="true" ondragstart="drag(event)"></span></a></td> 
      <td id="C2" width="90" height="90" class="white" align="center"><a href="#"><span id="SC2"   draggable="true" ondragstart="drag(event)"></span></a></td> 
      <td id="D2" width="90" height="90" class="black" align="center"><a href="#"><span id="SD2"   draggable="true" ondragstart="drag(event)"></span></a></td>
      <td id="E2" width="90" height="90" class="white" align="center"><a href="#"><span id="SE2"   draggable="true" ondragstart="drag(event)"></span></a></td> 
      <td id="F2" width="90" height="90" class="black" align="center"><a href="#"><span id="SF2"   draggable="true" ondragstart="drag(event)"></span></a></td> 
      <td id="G2" width="90" height="90" class="white" align="center"><a href="#"><span id="SG2"   draggable="true" ondragstart="drag(event)"></span></a></td> 
      <td id="H2" width="90" height="90" class="black" align="center"><a href="#"><span id="SH2"   draggable="true" ondragstart="drag(event)"></span></a></td>

                                                                                                                                                                                                                                                                                        ♟            ♟            ♟          ♟          ♟          ♟          ♟            ♟
                ♜                      ♞               ♝          ♚             ♛             ♝              ♞            ♜

我的JavaScript代码如下：

function getRowIndex(cell) {
     var index = cell.rowIndex;
     document.write("" + index);
 }

 function getCellIndex(cell) {
     var index = cell.cellIndex;
     document.write("" + index);
 }

 function allowDrop(ev) {
     ev.preventDefault();
 }
 var inisrc;

 function drag(ev) {
     inisrc = 0;
     ev.dataTransfer.effectAllowed = 'move';
     ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
     inisrc = ev.target.id;
     ev.dataTransfer.setDragImage(ev.target, 0, 0);
     var spanid = ev.target.getAttribute('id'); //span id
     // ev.target.getAttribute('id').remove();
     var tdid = spanid.substring(1, spanid.length); //td id
     var tind = document.getElementById(tdid).cellIndex; //td index ****** this is what we neeed
     var trid = tdid.substring(1, tdid.length); //table row id
     var rind = document.getElementById(trid).rowIndex; //row index ******* this is what we neeed
 }

 function getColor(code) {
     if (code >= 9812 && code <= 9817)
         return "white";
     else if (code >= 9818 && code <= 9823)
         return "black";
     else
         return null;
 }

 function drop(ev) {
     var srcColor = null,
         srcUnic = null,
         spanid = null,
         tgtPiece = null,
         tgtColor = null,
         tgtUnic = null,
         tdid = null;
     var src = ev.dataTransfer.getData("Text"); //src is span id of target
     // alert(src);
     var srcPiece = document.getElementById(src).innerHTML; //friend should not be eaten. here we are identifying the class (color) of the source piece
     // alert("srcp" +srcPiece);
     if (srcPiece != null) {
         srcUnic = srcPiece.charCodeAt(0); //extracts unicode of the particular chess piece
         srcColor = getColor(srcUnic); //gets color of the piece
     }
     tdid = ev.target.id; //td id of the target
     if (tdid.length < 3) {
         spanid = 'S' + tdid; //id of span by concatenating "S" to tdid
     }
     else {
         spanid = tdid;
     }
     if (document.getElementById(spanid) != null) {
         tgtPiece = document.getElementById(spanid).innerHTML; //gives code of target piece
         if ((tgtPiece != null) && (tgtPiece != "")) {
             tgtUnic = tgtPiece.charCodeAt(0); //extracts unicode of the particular chess piece
             alert(tgtUnic);
             tgtColor = getColor(tgtUnic); //gets color of the piece
             if (tgtColor != null) {
                 if (srcColor != tgtColor) {
                     ev.target.innerHTML = "";
                     ev.target.appendChild(document.getElementById(src)); //append src piece into target piece
                     alert(src);
                 }
                 else {
                     alert("illegal color move");
                 }
             }
             else {
                 alert("illegal move");
             }
         }
         else if (tgtPiece == "") {
             ev.target.innerHTML = "";
             ev.target.appendChild(document.getElementById(src)); //append src piece into target piece
             alert(src);
         }
     } //to avoid innerHTML nulll exception
 }

我为长代码道歉。任何帮助将受到高度赞赏

Answer 1

我最近在JavaScript中使用jQuery draggable结合click＆amp; amp; drop events handler（因此它也适用于移动设备）。阅读了许多开源代码，这里是我为使所有内容完美地协同工作而做出的安排。

使用国际象棋unicode＆amp;分配2个字典（JavaScript中的数组？） FEN字符串，unicode可以用作＆＃34; Key＆＃34;和＆＃34;价值＆＃34;，像这样：

PIECE = {
    P:'♙', R:'♖', N:'♘', B:'♗', Q:'♕', K:'♔',
    p:'♟', r:'♜', n:'♞', b:'♝', q:'♛', k:'♚',
};

// Reversed engineering to convert positional objects => fen string
// FEN_PIECE is used as a mirror array as in PIECE
FEN_PIECE = {
    '♙': 'P', '♖': 'R', '♘': 'N', '♗': 'B', '♕': 'Q', '♔': 'K',
    '♟': 'p', '♜': 'r', '♞': 'n', '♝': 'b', '♛': 'q', '♚': 'k',
};


// Empty position dictionary for board creation
// after chess movement, we capture on board pieces and insert into this
// so the dictionary keys: values pattern will be always the same
EMPTY_POSITION = {
    A8: "", B8: "", C8: "", D8: "", E8: "", F8: "", G8: "", H8: "",
    A7: "", B7: "", C7: "", D7: "", E7: "", F7: "", G7: "", H7: "",
    A6: "", B6: "", C6: "", D6: "", E6: "", F6: "", G6: "", H6: "",
    A5: "", B5: "", C5: "", D5: "", E5: "", F5: "", G5: "", H5: "",
    A4: "", B4: "", C4: "", D4: "", E4: "", F4: "", G4: "", H4: "",
    A3: "", B3: "", C3: "", D3: "", E3: "", F3: "", G3: "", H3: "",
    A2: "", B2: "", C2: "", D2: "", E2: "", F2: "", G2: "", H2: "",
    A1: "", B1: "", C1: "", D1: "", E1: "", F1: "", G1: "", H1: ""
};

并且对于国际象棋棋盘本身，循环通过行＆amp;

下的列

<div class="piece" draggable="true"> will put chess piece here later </div>

使用电路板位置和电路板之间的转换FEN字符串（我使用FEN作为主游戏库，并转换为电路板位置以动态绘制＆＃34;片段＃34;

并使用PIECE [FEN string]＆amp; FEN_PIECE [piece]检索棋盘位置和棋子信息。

然后是UI位：

在初始化电路板时设置一些全局变量：

var targetId
var sourceId
var clicked_id;
var clicked_piece;

和

on 'dragstart [draggable=true]': function(ev) {
  sourceId = ev.target.parentNode.id;
  piece = e.target.innerHTML;
}

因为你已经这样做了所以我不会再这样做了，并且点击＆amp;放弃工作，你只需要在元素点击上分配一个类：

on 'click .clicked': function(ev) {
  $(ev.target).toggleClass("clicked");
  try { your Chess move here... using sourceId, piece} 
  catch(err) { what not here... }
}

检查是否有任何＆＃34;点击＆＃34;已经在董事会上的其他人，然后它本身就意味着＆＃34; drop＆＃34;移动。

将board div id指定为A1到H8，只需做一个简单的循环：

var ROW = '12345678'.split("");
var COL = 'ABCDEFGH'.split("");
for (var r=1; r<=ROW.length; r++) {
  for (var c=1; c<=COL.length; c++) {
    //just assign your table tr td div to with id attribute here...
  }
}

因此，您不需要使用颜色来检查元素，只需返回基本div拖动和单击即可。我不确定这是否对你有所帮助，但我希望你能得到这个想法，或者也许可以用另一种方法思考。有太多的图书馆，你可以学习，看看最适合你的情况，祝你好运！

Answer 2

请参阅 this fiddle ，了解主要问题以及其他一些问题。

好的，直接的问题 - 当你放在一个片段的起始位置时收到一个错误是你正在用前缀为S的td id名称查找元素，这个名称恰好与你在拖着：

if (tdid.length < 3) {
     spanid = 'S' + tdid; //id of span by concatenating "S" to tdid
}

例如，

<td id="A0"...

包含范围

<span id="SA0"

请注意，S + A0将始终等于SA0，这是您要拖动的范围（件）的ID。

我修复了一些其他问题：

所有表格单元格，即使没有表格单元格也具有可拖动的跨度。拖动后，当拖动时，这会导致一些冲突和错误，这会导致当一个片段被拖回到访问过的位置时导致代码中的逻辑出现问题。
该项目可以放在td或其他span上，您需要同时处理这两项。
移动后丢失指针图标，因为它不再是链接（a）。所以，我添加了cursor:pointer css。

逻辑的主要变化是function drop(ev) {，特别是处理掉到不同位置并获得内部跨度的代码：

     tdid = ev.target.id; //td id of the target
     //if (tdid.length < 3) {
       //  spanid = 'S' + tdid; //id of span by concatenating "S" to tdid
     //}
     //else {
      //   spanid = tdid;
     //}
     var ttd = document.getElementById(tdid);
     var tgtPieceElem;
     if( ttd.nodeName.toLowerCase()=='span')//dropped onto another piece
     {
        tgtPieceElem = ttd;
     }
     else //dropped onto table-cell
     {
        var tgtPieces = ttd.getElementsByTagName('span');
        tgtPieceElem = (tgtPieces.length==1)?tgtPieces[0]:null;
     }
     if (tgtPieceElem) {
         tgtPiece = tgtPieceElem.innerHTML; //gives code of target

和最后一个处理掉的空单元格。

     else
     {
        ev.target.innerHTML = "";
        ev.target.appendChild(document.getElementById(src)); //append src piece into target piece
        alert(src);
     }

除此之外，我还有以下建议： -

链接具有重复的ID，例如，所有pawn链接都具有标识pawn。 Ids在页面上应该是唯一的，而不是使用类。
我不确定链接a是否已完成，因为您需要链接或仅显示可以点击元素。如果是后者，那么我建议删除链接并使用css cursor:pointer instead和css进行颜色样式。如果你想要链接，那么目前在没有链接的情况下拖动片段，因此在删除时会丢失它们。您还需要将链接插入新单元格。
你可能想要一些关于碎片的类，这样你就可以在drop中识别出一个有效的片段被丢弃并且如果没有则退出该函数。目前，您可以删除导致代码错误的图像或任何其他可拖动元素。
正如其他人所提到的，最好将游戏逻辑与演示分开。但是，大多数错误都与表示有关，因此您需要同时执行这两项操作（修复演示错误和单独的逻辑）。

在Javascript中拖放unicode的问题

2 个答案: