如何使用颤振制作安卓棋盘游戏[关闭]

Question

我想用颤振构建一个棋盘游戏。 我已经开始学习 Flutter 基础知识，并且能够为电路板创建和设计布局。 目前我被卡住了，因为我无法弄清楚如何根据用户输入使一块网格从一个网格移动/动画到另一个网格。 如果有人可以分享他们在这方面的经验，或者将我指向任何已经可用的资源来学习这一点，那就太好了。 提前致谢。

Answer 1

对于游戏来说，使用自定义画家来更好地控制外观是有意义的。

所以你需要：

• 扩展CustomPainter 的类，实现绘图逻辑。

• 一个使用画家的CustomPaint 小部件。

• GestureDetector 负责处理棋子的移动。

• 一个包装类，比如Board，将CustomPaint和GestureDetector联系在一起。

• 存储状态的某个地方。在 Flutter 中准确地放置状态是一门艺术。通常，您希望Board 小部件负责临时状态，例如当前拖动的棋子的 ID 和位置（因为它仅由画家使用，不会影响游戏状态）。对于实际的游戏状态，您可能想要使用更永久的东西。有关 Flutter 中状态管理的更多信息：https://flutter.dev/docs/development/ui/interactive#managing-state、https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple。

把它们放在一起：

class BoardPainter extends CustomPainter {
  // Painting logic.
  ...
}

class Board extends StatefulWidget {
  @override
  createState() => BoardState();
}

class BoardState extends State<Board> {
  static const double _dragStartTolerance = 50.0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
            behavior: HitTestBehavior.opaque,
            onPanStart: (DragStartDetails details) {
              for (final piece in pieces) {
                if ((details.localPosition - piece.pos).distance <
                    _dragStartTolerance) {
                  setState(() {
                    // Drag started. Save piece ID to track it later.
                    ...
                  }
                }
              }
            },
            onPanUpdate: (DragUpdateDetails details) {
              setState(() {
                // Drag in progress. Update piece display position, so that
                // the painter can draw it under the finger. Don't report to
                // the game engine, because the drag hasn't finished yet.
                ...
              }
            },
            onPanEnd: (DragEndDetails details) {
              setState(() {
                // Drag finished. Report to the game engine, which should
                // decide whether the move is valid and update game state
                // accordingly.
                ...
              });
            },
            child: CustomPaint(
              painter: BoardPainter(...),
              size: ...
            ),
          );
  }
}