个人中心
gpt4 book ai didi

javascript - 在 Javascript 中拖放 unicode 的问题

转载 作者：行者123 更新时间：2023-11-28 01:47:54 25 4
gpt4 key购买 nike

我正在尝试使用 java 脚本在 html 中设计国际象棋游戏。我正在使用拖放操作在棋盘上移动棋子。我还在起步阶段。我只是设计了电路板并使用“uni code”字符放置了棋子。我还没有写出每一部分的功能。我只是区分了棋子的颜色，即白色棋子不应该杀死黑色棋子。 这里的主要问题当我将一 block 从一个单元格拖到另一个单元格时，它会移动，但是当我尝试将它放回原来的位置时，它不允许移动。调试时我知道有一个先前拖动的元素的实例，根据我的程序显示错误“非法移动，无法杀死相同颜色的棋子”。我也尝试使用 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
 }

我为长代码道歉。任何帮助将不胜感激

最佳答案

实际上，我最近刚刚在 JavaScript 中使用 jQuery draggable 结合点击和放置事件处理程序(因此它也适用于移动设备)完成了这项工作。在阅读了许多开源代码后，我做出了以下安排，以使所有内容完美地协同工作。

使用国际象棋 unicode 和 FEN 字符串分配 2 个字典(JavaScript 中的数组？)，unicode 可以用作“键”和“值”，如下所示:

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: ""
};

对于棋盘本身，循环遍历 with 下的行和列 

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

使用棋盘位置和 FEN 字符串之间的转换(我使用 FEN 作为主要游戏库，并转换为棋盘位置以动态绘制“棋子”)。

并使用 PIECE[FEN string] & 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;
}

因为你已经完成了这个所以我不会再经历一遍，为了让点击和放下工作，你只需要在元素点击上分配一个类:

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

检查棋盘上是否已经有任何“点击”的类而不是它自己，那么这意味着“放下”移动。

要将棋盘 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 拖动并单击即可。我不确定这是否对您有帮助，但我希望您能理解这个想法，或者可以用另一种方法思考。有太多的库可供您研究，看看哪个最适合您的情况，祝您好运!

关于javascript - 在 Javascript 中拖放 unicode 的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21552379/

25 4 0
文章推荐： html - 如何更改 RWD 的 grocery crud 模板？
文章推荐： javascript - rails 3 : How to get javascript to run after link_to
文章推荐： javascript - 为 Chrome 扩展程序指定 native 消息传递主机
文章推荐： javascript - reCAPTCHA - 隐藏提交按钮
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com