五子棋-人人对战（一）

    我通过学习慕课网《五子连珠》的课程，跟随老师写了一个五子棋的代码，下面则是界面和我自己的理解：

1、本游戏是用view类来进行代码的编写的，所以首先创建一个新类来继承view。

public class WuziqiPanel extends View

layout的布局：

2、定义行列，通过onMeasure和onSizeChanged两个函数来进行创建

        private int mPanelWidth;// 行宽
	private float mLineHeigh;// 记录每行高度
	private int MAX_LINE = 10;// 行数

        @Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// TODO Auto-generated method stub
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);

		int widthSize = MeasureSpec.getSize(widthMeasureSpec);
		int widthMode = MeasureSpec.getMode(widthMeasureSpec);

		int heighSize = MeasureSpec.getSize(heightMeasureSpec);
		int heighMode = MeasureSpec.getMode(heightMeasureSpec);

		int width = Math.min(widthSize, heighSize);
		if (widthMode == MeasureSpec.UNSPECIFIED) {
			width = heighSize;// 宽度有高度决定
		} else if (heighMode == MeasureSpec.UNSPECIFIED) {
			width = widthSize;
		}
		setMeasuredDimension(width, width);// 设置宽度，正方体
	}

	// 尺寸相关
	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		// TODO Auto-generated method stub
		super.onSizeChanged(w, h, oldw, oldh);
		mPanelWidth = w;
		mLineHeigh = mPanelWidth * 1.0f / MAX_LINE;
		
	}

3、设置棋盘和棋子

在设置之前我们应该要把坐标给初始化

private Paint mPaint = new Paint();

棋盘样式：

mPaint.setColor(0x88000000);// 颜色
mPaint.setAntiAlias(true);// 防锯齿，抗锯齿是依赖于算法的，算法决定抗锯齿的效率，在我们绘制棱角分明的图像时，比如一个矩形、一张位图，我们不需要打开抗锯齿
mPaint.setDither(true);// 防抖动，设定是否使用图像抖动处理，会使绘制出来的图片颜色更加平滑和饱满，图像更加清晰
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);// 描边

mWhitePiece = BitmapFactory.decodeResource(getResources(),R.drawable.stone_w2);
mBlackPiece = BitmapFactory.decodeResource(getResources(),R.drawable.stone_b1);

绘制棋盘：

      private void drawBoard(Canvas canvas) {
		// TODO Auto-generated method stub
		int w = mPanelWidth;
		float lineHeigh = mLineHeigh;
		// 绘制棋盘的横线和竖线
		for (int i = 0; i < MAX_LINE; i++) {
			int startX = (int) (lineHeigh / 2);
			int endX = (int) (w - lineHeigh / 2);
			int y = (int) ((0.5 + i) * lineHeigh);// 倍数增长，如果是加，长度就会是完全错误的
			canvas.drawLine(startX, y, endX, y, mPaint);// 绘制横线
			canvas.drawLine(y, startX, y, endX, mPaint);// 绘制竖线
		}
	}

绘制棋子：

private float radioPieceOfLineHeigh = 3 * 1.0f / 4;// 棋子行高

private void drawPiece(Canvas canvas) {
		// TODO Auto-generated method stub
		for (int i = 0, n = mWhiteArray.size(); i < n; i++) {
			Point whitePoint = mWhiteArray.get(i);
			canvas.drawBitmap(mWhitePiece,(whitePoint.x + (1 - radioPieceOfLineHeigh) / 2)* mLineHeigh,
					(whitePoint.y + (1 - radioPieceOfLineHeigh) / 2)* mLineHeigh, null);
		}
		for (int i = 0, n = mBlackArray.size(); i < n; i++) {
			Point blackPoint = mBlackArray.get(i);
			canvas.drawBitmap(mBlackPiece,(blackPoint.x + (1 - radioPieceOfLineHeigh) / 2)* mLineHeigh,
					(blackPoint.y + (1 - radioPieceOfLineHeigh) / 2)* mLineHeigh, null);
		}
	}

其中(1 - radioPieceOfLineHeigh) / 2)* mLineHeigh代表棋子占据的大小。

自后还要在onSizeChanged中设置棋子的宽高

		int pieceWidth = (int) (mLineHeigh * radioPieceOfLineHeigh);
		mWhitePiece = Bitmap.createScaledBitmap(mWhitePiece, pieceWidth,
				pieceWidth, false);
		mBlackPiece = Bitmap.createScaledBitmap(mBlackPiece, pieceWidth,
				pieceWidth, false);

当我们做到这里时，已经可以看到棋盘的样式了，之后则是关于点击事件的算法问题了。

4、落子

我们用onTouchEvent这个方法里面写点击事件，并且创建ArrayList来保存黑棋和白棋。

	private boolean mIsWhile = true;// 白子先手，或者当前轮到白子
	private ArrayList mWhiteArray = new ArrayList();// 储存白子的xy
	private ArrayList mBlackArray = new ArrayList();

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		// TODO Auto-generated method stub
		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 (mIsWhile) {// 如果是白子，则放到
				mWhiteArray.add(p);
			} else {
				mBlackArray.add(p);
			}
			invalidate();// 请求重绘
			mIsWhile = !mIsWhile;// 改变miswhile的值

		}
		return true;
	}

其中ACTION_UP指的是当滚动停止

	// 点击的坐标
	private Point getValidPoint(int x, int y) {
		// TODO Auto-generated method stub
		return new Point((int) (x / mLineHeigh), (int) (y / mLineHeigh));
	}

好了，现在我们已经可以在棋盘上进行对局了，当还是缺少判断输赢的代码。我将在（二）里面讲述。