五子棋-人人对战（一）

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



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

public class WuziqiPanel extends View

layout的布局：

<com.example.wuziqi.WuziqiPanel
android:id="@+id/wuziqi"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
/>
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<Point> mWhiteArray = new ArrayList<Point>();// 储存白子的xy
private ArrayList<Point> mBlackArray = new ArrayList<Point>();

@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));
}

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