Question

我正在使用Javascript构建基于Web的国际象棋游戏。我正在使用HTML5画布通过绘制矩形来显示电路板。

我正在尝试实现移动逻辑。因此，当点击一个棋子，然后他们点击一个空块时，我想移动它。但是，使用画布非常繁琐。我需要做以下事情：

更新我的2D对象网格以反映更改，我设置了当前 square to undefined并将新方块设置为要移动的对象
clearRect（..），我仍然没有工作
在新位置重绘图像

有更好的方法吗？

另外，我如何处理'双击'。我目前正在使用一个布尔值，如果按下了该片段，如果它是，并且他们点击一个空的方块，我调用移动函数。有没有其他方法可以做到这一点？另外，是否有任何工具可以让它看起来像是被拖拽的棋子？

我感谢任何帮助。多谢你们。

Answer 1

通过编码学习 - 对你有好处！

以下是一些可以帮助您入门的提示：

游戏的可重复使用结构：

为每个棋子创建一个JS对象，并将这些棋子对象保存在一个数组中。

// an example piece object
var blackKing={
    player:'black',
    pieceType:'king',
    image:blackKingImageObject,
    currentSquare:['E','1'],
    isCaptured: false,
    // etc...
}

// a pieces-array
var pieces=[];
pieces.push(blackKing);

创建一个完成所有这些工作的函数：
- clearRect整个画布，
- 重绘国际象棋棋盘，
- 使用棋子数组将所有棋子重绘到棋盘上。

关于点击与双击vs拖动：

是的，这很麻烦，需要特殊处理。

许多程序员都这样处理：

收听mousedown并保存时间戳和初始鼠标位置。
如果快速发生鼠标加上另一个mousedown，则双击。
如果发生超过几个像素的鼠标移动，那么它就是拖动的开始。
否则，只需点击一下即可。

Answer 2

多年来，我为HTML编写了很多棋盘。最后，我认为最简单的方法是：

保持一个数组（1d或2d，两者都有利弊）只有片段名称（例如＆＃34; wp＆＃34; =白色pawn，＆＃34; bn＆＃34; =黑夜，＆＃ 34; - ＆＃34;空）。使用面向对象方法甚至是通用的对象都无法获得任何东西。
使用一个单一的画布作为棋盘，用drawImage
编写一个只绘制所有内容的函数，并在需要时调用它（不要打扰/绘制单个部分）。
对于片段拖动清空方块并创建一个单独拖动的div仅包含拖动的片段（在拖动过程中重绘整个电路板对于低端移动设备来说可能很慢）。
用于将move和up处理程序拖动到document而不是画布，这样当鼠标移动时您就不会错过up个事件在浏览器窗口之外。
开始拖动mousedown并附加mousemove和mouseup的活动。这将适用于计算机和移动电话，而无需处理特定情况。始终致电preventDefault和stopPropagation。
制作没有溢出的整页视图，并自行调整句柄大小（您需要添加一些特定于移动设备的meta以阻止手机搞乱页面）。

HTML只能用2d画布做出令人印象深刻的事情，例如参见this 2d/3d chessboard。一个小于300k的单个文件（200k压缩）。

Answer 3

你说的最简单吗？

使用chessboard.js 是最简单的方式，它是2D。

<强> HTML

<div id="board1" style="width: 400px"></div>

<强>的JavaScript

var board1 = ChessBoard('board1', 'start');

它具有非常好的documentation和大量不同的examples（自定义），可以下载here。

使用Javascript / HTML5制作2D国际象棋棋盘的最佳/最简单方法？

3 个答案:

你说的最简单吗？