Android自定义View之五子棋实现，优雅简洁，一步到位

见解分享

2024-02-15 00:50:56

自定义Android View 构建你的专属五子棋游戏

了解五子棋

五子棋，古称“连五”，是一款风靡全球的两人对弈策略棋类游戏。游戏的目标是将五个同色的棋子连成一条直线（水平、垂直或斜线），从而取得胜利。

使用自定义 View

自定义 View 是 Android 开发中绘制自定义 UI 元素的利器。在五子棋游戏中，我们可以使用自定义 View 来创建交互式的棋盘，并响应玩家的动作。

实现步骤

1. 绘制棋盘

在自定义 View 的 onDraw() 方法中，使用 Canvas 对象绘制棋盘。以下是主要步骤：

设置棋盘背景。
计算棋盘格子的尺寸。
绘制棋盘格子。

2. 监听触摸事件

在 onTouchEvent() 方法中，监听用户的触摸事件，并确定触摸点位置。

获取触摸点位置。
将触摸点位置转换为棋盘上的坐标。
判断该位置是否可以放置棋子。

3. 绘制棋子

在 onDraw() 方法中，根据触摸点位置，绘制棋子。

根据棋子类型绘制不同的棋子。
黑棋使用黑色画笔，白棋使用白色画笔。

代码示例

public class FiveChessView extends View {

    // 棋盘数据
    private int[][] chessBoard = new int[15][15];

    // 当前玩家
    private int currentPlayer = 1;

    // 棋盘格子尺寸
    private int gridWidth, gridHeight;

    public FiveChessView(Context context) {
        super(context);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 绘制棋盘背景
        canvas.drawColor(Color.WHITE);

        // 计算棋盘格子尺寸
        gridWidth = getWidth() / 15;
        gridHeight = getHeight() / 15;

        // 绘制棋盘格子
        for (int i = 0; i < 15; i++) {
            for (int j = 0; j < 15; j++) {
                canvas.drawRect(i * gridWidth, j * gridHeight, (i + 1) * gridWidth, (j + 1) * gridHeight, blackPaint);
            }
        }

        // 绘制棋子
        for (int i = 0; i < 15; i++) {
            for (int j = 0; j < 15; j++) {
                if (chessBoard[i][j] != 0) {
                    // 根据棋子类型绘制不同的棋子
                    if (chessBoard[i][j] == 1) {
                        canvas.drawCircle(i * gridWidth + gridWidth / 2, j * gridHeight + gridHeight / 2, gridWidth / 2, blackPaint);
                    } else {
                        canvas.drawCircle(i * gridWidth + gridWidth / 2, j * gridHeight + gridHeight / 2, gridWidth / 2, whitePaint);
                    }
                }
            }
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_UP) {
            // 获取触摸点位置
            float x = event.getX();
            float y = event.getY();

            // 将触摸点位置转换为棋盘上的坐标
            int i = (int) (x / gridWidth);
            int j = (int) (y / gridHeight);

            // 判断该位置是否可以放置棋子
            if (chessBoard[i][j] == 0) {
                // 放置棋子
                chessBoard[i][j] = currentPlayer;

                // 切换当前玩家
                currentPlayer = currentPlayer == 1 ? 2 : 1;

                // 重新绘制棋盘
                invalidate();
            }
        }
        return true;
    }
}