Android 自定义 View --- 实现五子棋游戏

直接上效果图

五子棋效果图

原理

从棋盘到棋子,到开始下棋的各类点击事件,均在 ChessView 中实现,这个 View 没有提供自定义属性(因为我觉得没有必要~~~)。

项目GitHub地址:https://github.com/hunlianyun/Wuziqi

实现步骤

  1. 新建一个棋子类,这个类非常简单,代码如下:
public class Chess {

    public enum Color {BLACK, WHITE, NONE}
    private Color color;

    public Chess(){
        this.color = Color.NONE;
    }
    public Color getColor() {
        return color;
    }
    public void setColor(Color color) {
        this.color = color;
    }
}

每个棋子类有三种状态,即 WHITE,BLACK,NONE。这里我们使用枚举来表示这三种状态。

2. 自定义 ChessView 类,这个类就是核心类了,我们这个五子棋的所有逻辑都是在这个类里面实现。构造方法初始化各个字段,代码如下:

 public ChessView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // 初始化字段 mEveryPlay,悔棋会用到
        initEveryPlay();
        // 初始化每个棋子,设置属性为 NONE
        initChess();
        // 初始化棋盘画笔
        initBoardPaint();
        // 初始化棋子画笔
        initChessPaint();
        // 初始化背景画笔
        initBgPaint();
    }

各个方法的具体实现如下:

private void initEveryPlay() {
        // 初始化 List 大小,此方法不影响 list.size() 返回值
        mEveryPlay = new ArrayList<>(225);
    }

    private void initChess() {
        mChessArray = new Chess[15][15];
        for (int i = 0; i < mChessArray.length; i++) {
            for (int j = 0; j < mChessArray[i].length; j++) {
                mChessArray[i][j] = new Chess();
            }
        }
    }

    private void initChessPaint() {
        mChessPaint = new Paint();
        mChessPaint.setColor(android.graphics.Color.WHITE);
        mChessPaint.setAntiAlias(true);
    }

    private void initBoardPaint() {
        mBoardPaint = new Paint();
        mBoardPaint.setColor(android.graphics.Color.BLACK);
        mBoardPaint.setStrokeWidth(2);
    }

    private void initBgPaint() {
        mBgPaint = new Paint();
        mBgPaint.setColor(android.graphics.Color.GRAY);
        mBgPaint.setAntiAlias(true);
    }


3. 重写 onMeasure() 方法,强制将 View 大小变为正方形,代码如下:

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        int min = widthSize < heightSize ? widthSize : heightSize;
        // 五子棋标准棋盘线条数目为 15 x 15,为了后面计算坐标方便,我们将 View 的宽高处理为 16 的整数倍
        min = min / 16 * 16;

        setMeasuredDimension(min, min);
    }

之所以设置为 16 的整数倍而不是 15,是因为如果设置成 15,那么棋盘的背景就会跟棋盘最边界的线条重合,此时如果有棋子落在边界,棋子将不能显示完全。

4. 重点来了,重写 onDraw() 方法,绘制出棋盘,代码如下:

    @Override
    protected void onDraw(Canvas canvas) {
        int height = getMeasuredHeight();
        int width = getMeasuredWidth();
        int avg = height / 16;

        canvas.drawRect(0, 0, width, height, mBgPaint);
        for (int i = 1; i < 16; i++) {
            // 画竖线
            canvas.drawLine(avg * i, avg, avg * i, height - avg, mBoardPaint);
            // 画横线
            canvas.drawLine(avg, avg * i, width - avg, avg * i, mBoardPaint);
        }
        for (int i = 1; i < 16; i++) {
            for (int j = 1; j < 16; j++) {
                switch (mChessArray[i - 1][j - 1].getColor()) {
                    case BLACK:
                        mChessPaint.setColor(android.graphics.Color.BLACK);
                        break;
                    case WHITE:
                        mChessPaint.setColor(android.graphics.Color.WHITE);
                        break;
                    case NONE:
                        continue;
                }
                canvas.drawCircle(avg * i, avg * j, avg / 2 - 0.5f, mChessPaint);
            }
        }
    }

这样我们就将整个棋盘画出来了,之后我们只需要改变数组 mChessArray[][] 里面对象的 Color 属性,再调用 invalidate() 方法便可以刷新棋盘了。

5. 接下来,我们便要处理点击事件,实现对弈的逻辑了,重写 onTouchEvent() 方法,代码如下:

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // 如果棋盘被锁定(即胜负已分,返回查看棋局的时候)
                // 此时只允许查看,不允许落子了
                if (isLocked) {
                    return true;
                }
                float x = event.getX();
                float y = event.getY();
                // 以点击的位置为中心,新建一个小矩形
                Rect rect = getLittleRect(x, y);
                // 获得上述矩形包含的棋盘上的点
                Point point = getContainPoint(rect);
                if (point != null) {
                    // 若点不为空,则刷新对应位置棋子的属性
                    setChessState(point);
                    // 记录下每步操作,方便悔棋操作
                    mEveryPlay.add(point);
                    if (gameIsOver(point.x, point.y)) {
                        // 游戏结束弹窗提示
                        showDialog();
                    }
                    // 更改游戏玩家
                    isBlackPlay = !isBlackPlay;
                }
                break;
            case MotionEvent.ACTION_MOVE:
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        return super.onTouchEvent(event);
    }

下面分别来说说调用到的各个方法的实现思路:

  • getLittleRect()
 /**
     * 以传入点为中心,获得一个矩形
     *
     * @param x 传入点 x 坐标
     * @param y 传入点 y 坐标
     * @return 所得矩形
     */
    private Rect getLittleRect(float x, float y) {
        int side = getMeasuredHeight() / 16;
        int left = (int) (x - side / 2);
        int top = (int) (y - side / 2);
        int right = (int) (x + side / 2);
        int bottom = (int) (y + side / 2);
        return new Rect(left, top, right, bottom);
    }
  • getContainPoint()
 /**
     * 获取包含在 rect 中并且是能够下棋的位置的点
     *
     * @param rect 矩形
     * @return 返回包含的点,若没有包含任何点或者包含点已有棋子返回 null
     */
    private Point getContainPoint(Rect rect) {
        int avg = getMeasuredHeight() / 16;
        for (int i = 1; i < 16; i++) {
            for (int j = 1; j < 16; j++) {
                if (rect.contains(avg * i, avg * j)) {
                    Point point = new Point(i - 1, j - 1);
                    // 包含点没有棋子才返回 point
                    if (mChessArray[point.x][point.y].getColor() == Chess.Color.NONE) {
                        return point;
                    }
                    break;
                }
            }
        }
        return null;
    }
  • showDialog()
    顺便一提,这个方法用的是 v7 包里面的对话框,因为这样可以在版本较低的安卓平台下也可以得到不错的显示效果,效果如下:
    v7 包对话框样式
/**
     * 游戏结束,显示对话框
     */
    private void showDialog() {
        AlertDialog.Builder builder = new AlertDialog.Builder(getContext());
        builder.setTitle("游戏结束");
        if (isBlackPlay) {
            builder.setMessage("黑方获胜!!!");
        } else {
            builder.setMessage("白方获胜!!!");
        }
        builder.setCancelable(false);
        builder.setPositiveButton("重新开始", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                resetChessBoard();
                dialog.dismiss();
            }
        });
        builder.setNegativeButton("返回查看", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                isLocked = true;
                dialog.dismiss();
            }
        });
        builder.show();
    }
  • setChessState()
/**
     * 重新设定用户所点位置的棋子状态
     *
     * @param point 棋子的位置
     */
    private void setChessState(Point point) {
        if (isBlackPlay) {
            mChessArray[point.x][point.y].setColor(Chess.Color.BLACK);
        } else {
            mChessArray[point.x][point.y].setColor(Chess.Color.WHITE);
        }
        invalidate();
    }

以上几个方法都较为简单不多说了,接下来重点讲一下判断游戏结束的逻辑。

- gameIsOver ()

 /**
     * 判断游戏是否结束,游戏结束标志:当前落子位置与其他同色棋子连成 5 个
     *
     * @param x 落子位置 x 坐标
     * @param y 落子位置 y 坐标
     * @return 若连成 5 个,游戏结束,返回 true,负责返回 false
     */
    private boolean gameIsOver(int x, int y) {
        Chess.Color color = mChessArray[x][y].getColor();
        return isOverA(x, y, color) || isOverB(x, y, color) || isOverC(x, y, color) || isOverD(x, y, color);
    }

这个方法用来判断游戏是否结束,思路便是以当前落子位置为基准,去寻找竖直、水平、左上至右下、左下至右上四个方向是否连成 5 子,分别对应 isOverA(), isOverB(), isOverC(), isOverD() 四个方法,这四个方法的实现如下:

    private boolean isOverA(int x, int y, Chess.Color color) {
        int amount = 0;
        for (int i = y; i >= 0; i--) {
            if (mChessArray[x][i].getColor() == color) {
                amount++;
            } else {
                break;
            }
        }
        for (int i = y; i < mChessArray[x].length; i++) {
            if (mChessArray[x][i].getColor() == color) {
                amount++;
            } else {
                break;
            }
        }
        // 循环执行完成后,当前落子位置算了两次,故条件应是大于 5
        return amount > 5;
    }

    private boolean isOverB(int x, int y, Chess.Color color) {
        int amount = 0;
        for (int i = x; i >= 0; i--) {
            if (mChessArray[i][y].getColor() == color) {
                amount++;
            } else {
                break;
            }
        }
        for (int i = x; i < mChessArray.length; i++) {
            if (mChessArray[i][y].getColor() == color) {
                amount++;
            } else {
                break;
            }
        }
        // 循环执行完成后,当前落子位置算了两次,故条件应是大于 5
        return amount > 5;
    }

    private boolean isOverC(int x, int y, Chess.Color color) {
        int amount = 0;
        for (int i = x, j = y; i >= 0 && j >= 0; i--, j--) {
            if (mChessArray[i][j].getColor() == color) {
                amount++;
            } else {
                break;
            }
        }
        for (int i = x, j = y; i < mChessArray.length && j < mChessArray[i].length; i++, j++) {
            if (mChessArray[i][j].getColor() == color) {
                amount++;
            } else {
                break;
            }
        }
        // 循环执行完成后,当前落子位置算了两次,故条件应是大于 5
        return amount > 5;
    }
    private boolean isOverD(int x, int y, Chess.Color color) {
        int amount = 0;
        for (int i = x, j = y; i < mChessArray.length && j >= 0; i++, j--) {
            if (mChessArray[i][j].getColor() == color) {
                amount++;
            } else {
                break;
            }
        }
        for (int i = x, j = y; i >= 0 && j < mChessArray[i].length; i--, j++) {
            if (mChessArray[i][j].getColor() == color) {
                amount++;
            } else {
                break;
            }
        }
        // 循环执行完成后,当前落子位置算了两次,故条件应是大于 5
        return amount > 5;
    }



6. 最后定义两个公有方法,方便 Activity 调用,用来执行悔棋和重置棋盘操作。两个方法代码如下:

/**
     * 悔棋,实现思路为:记录每一步走棋的坐标,若点击了悔棋,
     * 则拿出最后记录的坐标,对 mChessArray 里面对应坐标的
     * 棋子进行处理(设置颜色为 NONE),并移除集合里面最后
     * 一个元素
     */
    public void retract() {
        if (mEveryPlay.isEmpty()) {
            return;
        }
        Point point = mEveryPlay.get(mEveryPlay.size() - 1);
        mChessArray[point.x][point.y].setColor(Chess.Color.NONE);
        mEveryPlay.remove(mEveryPlay.size() - 1);
        isLocked = false;
        isBlackPlay = !isBlackPlay;
        invalidate();
    }

    /**
     * 重置棋盘
     */
    public void resetChessBoard() {
        for (Chess[] chessRow : mChessArray) {
            for (Chess chess : chessRow) {
                chess.setColor(Chess.Color.NONE);
            }
        }
        mEveryPlay.clear();
        isBlackPlay = true;
        isLocked = false;
        invalidate();
    }

到此, ChessView 已经写完了,接下来只要在布局文件里面声明即可。

7. 在 activity_main 布局文件如下,非常简单,我相信不用多说都能看懂:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <com.yangqi.wuziqi.ChessView
        android:id="@+id/chessView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/chessView"
        android:layout_margin="20dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal">

        <Button
            android:id="@+id/bt_retract"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="悔棋" />

        <Button
            android:id="@+id/bt_reset"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="重新开始"/>
    </LinearLayout>
</RelativeLayout>



8. 最后一步了,只需要在 MainActivity 里面拿到 ChessView 对象和两个 Button 按钮,即可实现悔棋与重新开始:

package com.yangqi.wuziqi;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;


public class MainActivity extends AppCompatActivity {

    private Button bt_reset;
    private Button bt_retract;
    private ChessView chessView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initUI();
        initListener();
    }

    private void initListener() {
        bt_reset.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                chessView.resetChessBoard();
            }
        });
        bt_retract.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                chessView.retract();
            }
        });
    }

    private void initUI() {

        bt_reset = (Button) findViewById(R.id.bt_reset);
        bt_retract = (Button) findViewById(R.id.bt_retract);
        chessView = (ChessView) findViewById(R.id.chessView);
    }
}
发布了3 篇原创文章 · 获赞 3 · 访问量 1868
展开阅读全文

添加悔棋功能,整体代码

06-22

package wuziqi1; import java.awt.Checkbox; import java.awt.CheckboxGroup; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.ItemEvent; import java.awt.event.ItemListener; import java.awt.event.MouseEvent; import java.awt.event.MouseListener; import javax.swing.JButton; import javax.swing.JCheckBox; import javax.swing.JFrame; import javax.swing.JPanel; public class wuziqi1 extends JFrame{ CheseGame CG; wuziqi1 () { this.CG= new CheseGame(); addMouseListener(CG); add(CG); } public static void main(String[] args) { wuziqi1 fivechese= new wuziqi1 (); fivechese.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); fivechese.setSize(900, 700); fivechese.setTitle("五子棋"); fivechese.setVisible(true); fivechese.setResizable(true); } } class CheseGame extends JPanel implements MouseListener,ItemListener { int [][]map = new int[20][20]; Color []color = {Color.BLACK,Color.WHITE,Color.GREEN}; int x = -1; int y = -1; int flag = 1; int winner = 3; JButton btn1 = new JButton("开始"); JButton btn2 = new JButton("再来一局"); CheckboxGroup cbg = new CheckboxGroup(); Checkbox chb1 = new Checkbox("黑棋先开始",cbg,true); Checkbox chb2 = new Checkbox("白棋先开始",cbg,false); public void itemStateChanged(ItemEvent ie) { if(chb1.getState()) { flag = 1; } else { flag = 2; } } class GameStart implements ActionListener { public void actionPerformed(ActionEvent ae) { if(ae.getSource() == btn1) { start(); repaint(); btn1.setEnabled(false); btn2.setEnabled(true); chb1.setEnabled(false); chb2.setEnabled(false); } if(ae.getSource() == btn2) { start(); repaint(); chb1.setEnabled(true); chb2.setEnabled(true); } } } CheseGame() { this.setLayout(null); chb1.setBounds(650, 50, 100, 30); chb2.setBounds(650, 100, 100, 30); chb1.addItemListener(this); chb2.addItemListener(this); btn1.setBounds(650,150,100,30); btn1.addActionListener(new GameStart()); btn2.setBounds(650, 200, 100, 30); btn2.addActionListener(new GameStart()); btn2.setEnabled(false); this.add(btn1); this.add(btn2); this.add(chb1); this.add(chb2); } void start() { for(int i = 0;i < 20;i++) for(int j = 0;j < 20;j++) map[i][j] = 0; winner = 0; } Boolean win(int x,int y) { int score = 1; for(int i = x;i < x+4;) { if(i == 19) break; if(map[i][y] != map[++i][y]) break; score++; } for(int i = x;i > x-4;) { if(i == 0) break; if(map[i][y] != map[--i][y]) break; score++; } if(score >= 5) return true; else score = 1; for(int j = y; j < y+4;) { if(j == 19) break; if(map[x][j] != map[x][++j]) break; score++; } for(int j = y; j > y-4;) { if(j == 0) break; if(map[x][j] != map[x][--j]) break; score++; } if(score >= 5) return true; else score = 1; for(int i = x;i < x+4;) for(int j = y;j < y+4;) { if(i == 19 || y == 19) {i = x+4; break;} if(map[i][j] != map[++i][++j]) { i = x+4; break; } score++; } for(int i = x;i > x-4;) for(int j = y;j > y-4;) { if(i == 0||j==0) {i = x-4; break;} if(map[i][j] != map[--i][--j]) { i = x-4; break; } score++; } if(score >= 5) return true; else score = 1; for(int i = x;i > x-4;) for(int j = y;j < y+4;) { if(i==0 || j==19) { i = x-4;break;} if(map[i][j] != map[--i][++j]) { i = x-4; break; } score++; } for(int i = x;i < x+4;) for(int j = y;j > y-4;) { if(i==19||j==0) { i = x+4;break;} if(map[i][j] != map[++i][--j]) { i = x + 4; break; } score++; } if(score >= 5) return true; else return false; } public void paintComponent(Graphics g) { super.paintComponent(g); setBackground(color[2]); for(int i = 1;i <= 20;i++) { g.setColor(color[0]); g.drawLine(30, i*30 ,600 , i*30); g.drawLine(i*30,30, i*30, 600); } for(int i = 0;i < 20;i++) for(int j = 0;j < 20;j++) { if(map[i][j] == 1) { g.setColor(color[0]); g.fillOval((i+1)*30-15, (j+1)*30-15, 30, 30); } if(map[i][j] == 2) { g.setColor(color[1]); g.fillOval((i+1)*30-15, (j+1)*30-15, 30, 30); } } Font font = new Font("",30,50); g.setFont(font); if(winner == 1) { g.setColor(color[0]); g.drawString("黑棋胜", 650, 300); } if(winner == 2) { g.setColor(color[1]); g.drawString("白棋胜", 650, 300); } } public void mouseClicked(MouseEvent me) { } public void mousePressed(MouseEvent me) { if(winner == 0) { x = me.getX(); y = me.getY(); chb1.setEnabled(false); chb2.setEnabled(false); } x = (int)(x/30)-1; y = (int)((y-15)/30)-1; if(x>=0&&x<=19&&y>=0&&y<=19) { if(flag == 1&&map[x][y] == 0) { map[x][y] = 1; if(win(x,y)) winner = 1; flag = 2; } else if(flag == 2&&map[x][y] == 0) { map[x][y] = 2; if(win(x,y)) winner = 2; flag = 1; } } repaint(); } @Override public void mouseReleased(MouseEvent me) { // throw new UnsupportedOperationException("Not supported yet."); } @Override public void mouseEntered(MouseEvent me) { // throw new UnsupportedOperationException("Not supported yet."); } @Override public void mouseExited(MouseEvent me) { // throw new UnsupportedOperationException("Not supported yet."); } } 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览