自定义View之一五子棋

最新推荐文章于 2024-02-19 21:35:23 发布
原创 最新推荐文章于 2024-02-19 21:35:23 发布 · 800 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#android #五子棋 #布局 #工程师 #框架

项目下载地址：https://github.com/lantier743865/WuZiQi

周末有空写了个五子棋的东西，因为项目也有类似的如同批改作业一样的东西，所以打算出一个系列的自定义View，一来给大家一个思路，另来锻炼自己的能力，毕竟代码越写越熟练。

废话不多说，开干吧！


开始时布局胜利后

整体思路：

1、重写onMeasure,使得整个棋盘为正方形，另外为了防止在某些特定布局变形或高度、宽度为零，做判断。

2、在onSizeChanged中获取宽度，并计算出每一行的高度，以及旗子大小等

3、重写onTouchEvent,当与用户交互时绘制棋子

4、重写onDraw,绘制棋盘和棋子，检测是否结束

5、自定义view的保存机制，防止系统内存回收或屏幕旋转，接听电话等销毁当前棋局


ps：

//数据保存恢复机制，防止屏幕旋转等销毁当前数据，所以每次保存当前数据
//重新创建时再绘制上次销毁时的局面

简单说就两句话，绘制棋盘，绘制棋子。。

下面贴一下代码，注释写的很全，有不懂可以留言，或者联系我qq635912159，同微信


package com.lantier.xxb_student.wuziqi;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Point;
import android.os.Bundle;
import android.os.Parcelable;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by xxb_student on 2017/3/25.
 */

public class WuZiQiPanel extends View {
    private static final String TAG = "WuZiQiPanel";
    //棋盘的宽度和高度，为了正方形
    private int mPanelWidth;
    //每一行的高度
    private float mLineHeight;
    //设置棋盘为10*10的网格
    private int MAX_LINE = 10;
    //五子棋，所以当达到5时说明有一方已经胜利
    private int MAX_COUNT_IN_LINE = 5;

    //画笔
    private Paint mPaint = new Paint();

    //白棋子和黑棋子的图片
    private Bitmap mWhitePiece;
    private Bitmap mBlackPiece;

    //棋子只占网格宽度的3/4
    private float ratioPieceOfLineHeight = 3 * 1.0f /4;

    //白旗先手，当前轮到白旗
    private boolean mIsWhite = true;
    //黑棋子集合和白棋子的集合
    private ArrayList<Point> mWhiteArray = new ArrayList<>();
    private ArrayList<Point> mBlackArray = new ArrayList<>();

    //是否结束
    private boolean mIsGameOver = false;
    //是否白旗为赢家
    private boolean mIsWhiteWinner = false;



    public WuZiQiPanel(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        //初始化画笔，获取棋子的图片等
        init();
    }

    private void init() {
        mPaint.setColor(0x88000000);
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setStyle(Paint.Style.STROKE);
        mWhitePiece = BitmapFactory.
                decodeResource(getResources(),R.drawable.stone_w2);
        mBlackPiece = BitmapFactory.
                decodeResource(getResources(),R.drawable.stone_b1);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        //因为要绘制正方形，所以取宽和高的最小值
        int width = Math.min(widthSize,heightSize);
        //heightMode
        if (widthMode == MeasureSpec.UNSPECIFIED){
            width = heightSize;
        }else if (heightMode == MeasureSpec.UNSPECIFIED){
            width = widthSize;
        }
      setMeasuredDimension(width,width);
    }


    //当宽高确定后赋值
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mPanelWidth = w;
        //总高度除以行数为每一行的高度
        mLineHeight = mPanelWidth * 1.0f /MAX_LINE;
        //对旗子进行一个缩放，为每一个网格宽度的3/4
        int pieceWidth = (int) (mLineHeight * ratioPieceOfLineHeight);
       //对旗子的大小做限制
        mWhitePiece = Bitmap.createScaledBitmap(mWhitePiece,pieceWidth,pieceWidth,false);
        mBlackPiece = Bitmap.createScaledBitmap(mBlackPiece,pieceWidth,pieceWidth,false);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //如果五子棋结束则不能再落字
        if (mIsGameOver){
            return false;
        }
        int action = event.getAction();
        if (action == MotionEvent.ACTION_UP){
            int x = (int) event.getX();
            int y = (int) event.getY();
            Point p = getValidPoint(x,y);
            //判断是否这个地方已经落过子
            if (mWhiteArray.contains(p) || mBlackArray.contains(p)){
                return false;
            }
            //每次都把所下的棋子加进集合，绘制时检查是否结束
            if (mIsWhite){
                mWhiteArray.add(p);
            } else {
                mBlackArray.add(p);
            }
            //每次都重新绘制
            invalidate();
            //白棋子和黑棋子轮流绘制
            mIsWhite = !mIsWhite;
        }
        //表明处理了touch事件
        return true;
    }

    private Point getValidPoint(int x, int y) {
        //用计算后的int值更容易判断一个点的位置是否已经下过了，防止重复
        return new Point((int)(x / mLineHeight), (int)(y / mLineHeight));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制棋盘
        drawBoard(canvas);
        //绘制棋子
        drawPieces(canvas);
        //检查是否结束
        checkGameOver();
    }

    private void checkGameOver() {
        //每次绘制都检测白棋子和黑棋子是否结束
        boolean whiteWin = checkFiveInLine(mWhiteArray);
        boolean blackWin = checkFiveInLine(mBlackArray);
        if (whiteWin || blackWin){
            mIsGameOver = true;
            mIsWhiteWinner = whiteWin;
            String text = mIsWhiteWinner ? "白旗胜利":"黑旗胜利";
            Toast.makeText(getContext(),text,Toast.LENGTH_LONG).show();
        }
    }

    private boolean checkFiveInLine(List<Point> points) {
        //横向检测、纵向检测、左上方、左下方、右上方、右下方分别检测
        for (Point p : points){
            int x = p.x;
            int y = p.y;
            boolean win = checkHorizontal(x,y, points);
            if (win){
                return true;
            }
            win = checkVertical(x,y, points);
            if (win){
                return true;
            }
            win = checkLeftDiagonal(x,y, points);
            if (win){
                return true;
            }
            win = checkRightDiagonal(x,y, points);
            if (win){
                return true;
            }
        }
        return false;
    }

    /**
     * 判断x，y位置的旗子，是否横向有相邻的五个一致。
     * @param x
     * @param y
     * @param points
     * @return
     */
    private boolean checkHorizontal(int x, int y, List<Point> points) {
     int count = 1;
        for (int i = 1; i <MAX_COUNT_IN_LINE ; i++) {
            if (points.contains(new Point(x-i,y))){
                count++;
            }else {
                break;
            }
        }
        if (count == MAX_COUNT_IN_LINE){
            return true;
        }
        for (int i = 1; i <MAX_COUNT_IN_LINE ; i++) {
            if (points.contains(new Point(x+i,y))){
                count++;
            }else {
                break;
            }
        }
        if (count == MAX_COUNT_IN_LINE){
            return true;
        }
        return  false;
    }
    private boolean checkVertical(int x, int y, List<Point> points) {
        int count = 1;
        for (int i = 1; i <MAX_COUNT_IN_LINE ; i++) {
            if (points.contains(new Point(x,y-i))){
                count++;
            }else {
                break;
            }
        }
        if (count == MAX_COUNT_IN_LINE){
            return true;
        }
        for (int i = 1; i <MAX_COUNT_IN_LINE ; i++) {
            if (points.contains(new Point(x,y+i))){
                count++;
            }else {
                break;
            }
        }

        if (count == MAX_COUNT_IN_LINE){
            return true;
        }
        return  false;
    }
    private boolean checkLeftDiagonal(int x, int y, List<Point> points) {
        int count = 1;
        for (int i = 1; i <MAX_COUNT_IN_LINE ; i++) {
            if (points.contains(new Point(x-i,y+i))){
                count++;
            }else {
                break;
            }
        }
        if (count == MAX_COUNT_IN_LINE){
            return true;
        }
        for (int i = 1; i <MAX_COUNT_IN_LINE ; i++) {
            if (points.contains(new Point(x+i,y-i))){
                count++;
            }else {
                break;
            }
        }
        if (count == MAX_COUNT_IN_LINE){
            return true;
        }
        return  false;
    }
    private boolean checkRightDiagonal(int x, int y, List<Point> points) {
        int count = 1;
        for (int i = 1; i <MAX_COUNT_IN_LINE ; i++) {
            if (points.contains(new Point(x-i,y-i))){
                count++;
            }else {
                break;
            }
        }
        if (count == MAX_COUNT_IN_LINE){
            return true;
        }
        for (int i = 1; i <MAX_COUNT_IN_LINE ; i++) {
            if (points.contains(new Point(x+i,y+i))){
                count++;
            }else {
                break;
            }
        }
        if (count == MAX_COUNT_IN_LINE){
            return true;
        }
        return  false;
    }

    //以下两个完全是按照数学方法绘制，重点是每个线的x,y坐标，每个棋子的x，y坐标，大家看图绝对能看懂
    //不懂可以加我qq635912159
    private void drawPieces(Canvas canvas) {
        for (int i = 0 ,n = mWhiteArray.size(); i < n; i++) {
            Point whitePoint = mWhiteArray.get(i);
            canvas.drawBitmap(mWhitePiece,
                    (whitePoint.x +(1-ratioPieceOfLineHeight)/2 )*mLineHeight,
                    (whitePoint.y +(1-ratioPieceOfLineHeight)/2 )*mLineHeight,null);
        }
        for (int i = 0 ,n = mBlackArray.size(); i < n; i++) {
            Point whitePoint = mBlackArray.get(i);
            canvas.drawBitmap(mBlackPiece,
                    (whitePoint.x +(1-ratioPieceOfLineHeight)/2 )*mLineHeight,
                    (whitePoint.y +(1-ratioPieceOfLineHeight)/2 )*mLineHeight,null);
        }
    }

    private void drawBoard(Canvas canvas) {
        int w = mPanelWidth;
        float lineHeight = mLineHeight;
        for (int i = 0; i < MAX_LINE ; i++) {
            int startX = (int) (lineHeight /2);
            int endX = (int) (w - lineHeight /2);
            int y = (int) ((0.5 +i) * lineHeight);
            canvas.drawLine(startX,y,endX,y,mPaint);
            canvas.drawLine(y,startX,y,endX,mPaint);
        }
    }
    //重来一局，清除数据
    public void  start(){
        mWhiteArray.clear();
        mBlackArray.clear();
        mIsGameOver = false;
        mIsWhiteWinner =false;
        invalidate();
    }

    //数据保存恢复机制，防止屏幕旋转等销毁当前数据，所以每次保存当前数据
    //重新创建时再绘制上次销毁时的局面
    private static final String INSTANCE = "instance";
    private static final String INSTANCE_GAME_OVER = "instance_game_over";
    private static final String INSTANCE_WHITE_ARRAY = "instance_white_array";
    private static final String INSTANCE_BLACK_ARRAY = "instance_black_array";
    @Override
    protected Parcelable onSaveInstanceState() {
        Bundle bundle = new Bundle();
        bundle.putParcelable(INSTANCE,super.onSaveInstanceState());
        bundle.putBoolean(INSTANCE_GAME_OVER,mIsGameOver);
        bundle.putParcelableArrayList(INSTANCE_BLACK_ARRAY,mBlackArray);
        bundle.putParcelableArrayList(INSTANCE_WHITE_ARRAY,mWhiteArray);
        return bundle;
    }

    @Override
    protected void onRestoreInstanceState(Parcelable state) {
        if (state instanceof  Bundle){
            Bundle bundle = (Bundle) state;
            mIsGameOver = bundle.getBoolean(INSTANCE_GAME_OVER);
            mWhiteArray =bundle.getParcelableArrayList(INSTANCE_WHITE_ARRAY);
            mBlackArray =bundle.getParcelableArrayList(INSTANCE_BLACK_ARRAY);
            super.onRestoreInstanceState(bundle.getParcelable(INSTANCE));
        }
    }
}


蓝啼儿
关注
android 自定义五子棋
Jarry的博客
03-02 2142
中午休息的时候，坐我旁边的同事喜欢玩五子棋，玩的很入迷。作为吃瓜群众的我，偶尔看他玩一两局。于是乎这两天想着实现一个简易的五子棋小游戏。本文重点是图形绘制。 首先看效果图： 下面讲解下思路： 1.绘制棋盘区域 针对手机这种宽度比长度小的，默认取宽度的1/11为棋盘的单位长度，然后根据在onSizeChanged()中获取到测量宽高尺寸getMeasuredWidth()和getMeas
自定义View实现五子棋游戏
asd1031的专栏
09-27 2766
成功的路上一点也不拥挤，因为坚持的人太少了。 ---简书上看到的一句话 未来请假三天顺带加上十一回家结婚，不得不说真是太坑了，去年婚假还有10天，今年一下子缩水到了3天，只能赶着十一办事了。最近还在看数据结构，打算用java实现一遍，所以没着急写读书笔记，不过前段时间看了一个简单的五子棋游
安卓自定义View游戏篇-（五子棋）
HelloWord的博客
02-13 866
1、效果图： 2、GobangPanel棋盘面板： public class GobangPanel extends View { private int mPanelWidth;//棋盘的宽度 private float mLineHeight;//行,高要为float private int MAX_LINE = 15;//棋盘行数 private int M...
Android 开发 -------- 自定义View 画 五子棋
love_Javc_you的专栏
10-15 2390
自定义View  实现 五子棋  配图： 代码： package com.example.fiveson; import java.util.LinkedList; import java.util.List; import android.content.Context; import android.graphics.Canvas; import an
【c语言五子棋】自定义类型五子棋/井字棋实现:概念及综述
dancehole的博客
12-11 1220
【零基础附完整代码】简单的五子棋-初步()控制台实现 声明：此五子棋偏新手向，不涉及复杂知识，仅供欣赏 系列目录： （0）在控制台实现自己的小想法[本文] （1）利用easyx制作自己的gui界面 （2）胜负判定 （3）ai算法 （4）其他及细节 最初要求 ...
Android自定义View实现五子棋游戏
01-21
本文实例为大家分享了Android五子棋游戏的具体代码，供大家参考，具体内容如下 1、效果图： 2、GobangPanel棋盘面板： public class GobangPanel ...//设置赢棋子个数(6子棋设置为6) private Paint mPaint = new Pa
Android自定义View实现五子棋小游戏
08-25
在Android开发中，自定义View是一种常见的需求，它允许开发者创建具有特定功能和视觉效果的视图组件。本文将深入探讨如何使用自定义View来实现一个五子棋小游戏。五子棋游戏通常需要两个玩家轮流在棋盘上下棋，目标...
Wuziqi:自定义View，实现五子棋
05-18
在Android开发中，自定义View是一项重要的技能，它允许开发者根据特定需求创建具有独特功能和交互的视图组件。本项目“Wuziqi”即是一个很好的实例，它通过自定义View来实现了一款五子棋游戏。接下来，我们将深入...
Android自定义View实现五子棋实战代码
"本文主要介绍了如何在Android平台上通过自定义View来实现一个五子棋小游戏。首先，我们回顾一下自定义View的基本概念。在Android中，自定义View是一个继承自View类的组件，它允许开发者创建自定义的用户界面。本文...
自定义view之 五子棋
qq_42795723的博客
10-29 255
自定义view public class GobangPanel extends View { private int mPanelWidth; //五子棋宽度 private float mLineHeight; //边框线高度 private int MAX_LINE = 10; //最大行数 private int MAX_COUNT_IN_LINE=5; //数量为5的时候就胜利了...
android简单自定义View实现五子棋
08-25
主要为大家详细介绍了android简单自定义View实现五子棋，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
自定义控件--五子棋
doc__wei的博客
09-11 650
自定义控件练习，这里涉及到View的测量，事件分发机制，View状态保存和恢复。
【c语言五子棋】自定义类型五子棋/井字棋：胜负判断
dancehole的博客
12-31 5017
五子棋胜负判断篇 代码实现如下： 横向判断： //横向判断 int ifwina(int positionx, int positiony, int length, int winrule) { int whitewin = 0, blackwin...
自定义view（二）五子棋
Big_Sweet
03-07 720
前段时间在慕课网上看了hyman大神的五子棋视频，发现下面没有提供源代码，然后自己跟着编写了一份，梳理了一下思路，用作总结画棋盘首先自定义view的四部曲 1，在attrs中申明自定义的属性 2，在View的构造方法中获得我们自定义的属性 3，重写onMeasure方法 4，重写ondraw方法 五子棋的自定义属性我都写死了，也可以不写死，写在attrs中动态的改变，这样都可以生成构造方法
Flutter自定义Widget实践之简易五子棋
qq_33367082的博客
03-11 2799
Flutter自定义Widget实践之简易五子棋
C语言课设 可自定义棋盘和玩家的五子棋游戏
最新发布
2201_75467981的博客
02-19 640
这是一个实现了双人对战和人机对战的五子棋游戏项目，其中棋盘大小可选，游戏模式可选，还有登录和音乐功能。
自定义View+五子棋的简单实现
luck_136的博客
08-04 692
先看一张效果图： 首先我们要想实现以上的效果，就要先绘制棋盘和棋子。用系统中的组件是很难实现的，那么就需要我们自定义组件。 绘制棋盘： 在绘制棋盘之前，我们先应该测量棋盘的大小，然后再进行绘制。所以一定要重写onMeasure()和onDraw()方法。 第一步： 重写view的onMeasure(int widthMeasureSpec, int height
Android自定义View五子棋游戏实现详解
"这篇教程详细介绍了如何在Android平台上利用自定义View来实现一个五子棋游戏。通过创建自定义的GobangPanel类，开发者可以构建一个具备基本功能的五子棋界面，包括棋盘布局、棋子图像、游戏规则等。文章提供了具体...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值