成功的路上一点也不拥挤,因为坚持的人太少了。
---简书上看到的一句话
未来请假三天顺带加上十一回家结婚,不得不说真是太坑了,去年婚假还有10天,今年一下子缩水到了3天,只能赶着十一办事了。
最近还在看数据结构,打算用java实现一遍,所以没着急写读书笔记,不过前段时间看了一个简单的五子棋游戏,记录一下。
整体效果如下,整个功能在一个自定义View里面实现:
由于主activity比较简单直接列出来:
public class MainActivity extends Activity {
private static String TAG ="MainActivity111";
private FiveView fiveView;
private Context mContext;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mContext=this;
fiveView = (FiveView) findViewById(R.id.five);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// TODO Auto-generated method stub
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if(item.getItemId()==R.id.action_settings){
fiveView.setrestart();
}
return true;
}
}
<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" >
<com.lly.simple_five.FiveView
android:id="@+id/five"
android:layout_centerInParent="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.lly.simple_five.FiveView>
</RelativeLayout>
上面只有一点 android:layout_centerInParent=”true” 设置自定义view居中,这样看起来比较美观。
主要代码在FiveView中实现,
考虑五子棋游戏一共有几个步骤:
1、画棋盘
2、根据用户选择在指定位置画棋子
3、判定输赢
4、需要有个重新开始的菜单,当确定输赢后重新开始游戏。
1、画棋盘
棋盘需要手动画出来,所以这里自定义了一个view
public class FiveView extends View {
public FiveView(Context context, AttributeSet attrs) {
super(context, attrs);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(0x88000000);
setBackgroundColor(0x44440000);
mBlackList = new ArrayList<Point>();
mWhileList = new ArrayList<Point>();
}
...
}
然后重新他的两个参数的构造方法,为什么要写两个构造参数的方法呢,这是因为这里只需要用自定义view的布局,不需要自定义属性。
在构造方法里面我们初始化了画笔,棋盘的背景,并实例化保存棋子的list。
这里设置了这个view的背景颜色,以方便看出这个view的位置
小知识:
一般情况下view有三个构造方法,其中带一个参数的构造方法是在activity中new一个控件时调用的。如TextView tv = new TextView(mContext);
在xml中使用不带自定义属性的自定义控件时会调用两个参数的构造方法,如本例。
在xml中使用带自定义属性的自定义控件时,会调用带三个参数的构造方法。
这里想想,我们前面定义的view宽和高都是占满了整个屏幕,所以在手机上看到的就是一个长方行的布局,但是一般我们在现实中看到的棋盘都是正方形的,这也很好实现,
自定义view里面的测量方法能很好的解决这个问题:
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
Width = MeasureSpec.getSize(widthMeasureSpec);
Hight = MeasureSpec.getSize(heightMeasureSpec);
int WidthMode = MeasureSpec.getMode(widthMeasureSpec);
Width = Math.min(Width, Hight);
int measuredWidth = MeasureSpec.makeMeasureSpec(Width, WidthMode);
setMeasuredDimension(measuredWidth, measuredWidth);
}
如上代码 我们只需要取出测量的宽高,然后以宽高中较小的值作为棋盘的宽高,这样不管是横屏或竖屏都能得到一个正方形的棋盘了,
小知识
view中的测试模式有三种也就是上面getMode取出来的值,分别对应
match_parent
wrap_content
xxxxxdp
规范的操作在自定义测量方法里面要对这三种模式分别去出来,这里比较简单就不做出来了。
如上我们得到了棋盘的宽高。
在画棋盘之前还需要考虑下,我们棋盘应该怎么画 ,画多少条线,
这里我们在棋盘的大小发生改变时初始化一些初始化棋盘的操作
...
private static final int MAX_LINE = 10;
...
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mBroad = Width;
mLineWidth = mBroad * 1.0f / MAX_LINE;
mBlackPiece = BitmapFactory.decodeResource(getResources(),
R.drawable.stone_b1);
mWhilePiece = BitmapFactory.decodeResource(getResources(),
R.drawable.stone_w2);
int dstpoint = (int)(mLineWidth*roation);
mBlackPiece = Bitmap.createScaledBitmap(mBlackPiece, dstpoint, dstpoint, false);
mWhilePiece = Bitmap.createScaledBitmap(mWhilePiece, dstpoint, dstpoint, false);
}
上面代码 ,我们定义了棋盘的宽高为测量时的宽高,
定义了两条线之间的宽度,即10平分整个区域
另外初始化了黑白棋子这个在画棋子的时候具体说明。
接着就需要去画棋盘了
protected void onDraw(Canvas canvas) {
DrawBroad(canvas);
DrawPiece(canvas);
checkGameOver();
}
private void DrawBroad(Canvas canvas) {
for (int i = 0; i < MAX_LINE; i++) {
float startX = mLineWidth / 2;
float stopX = mBroad - (mLineWidth / 2);
float startY = (float) ((0.5 + i) * mLineWidth);
float stopY = (float) ((0.5 + i) * mLineWidth);
canvas.drawLine(startX, startY, stopX, stopY, mPaint);
canvas.drawLine(startY, startX, stopY, stopX, mPaint);
}
}
可以发现在上面代码中,调用DrawBroad 去画棋盘,分别横竖画了十条线,组成了棋盘,这里发现在横竖开始的时候都是从0.5*mLineWidth开始的,这是为了留出上面一点空隙,可以使棋子可以显示完整,这里用来一个for循环就完成了横竖线,归功于这是一个正方形,x,y坐标互换一下就可以实现画横竖线了。
到这里棋盘就已经画好了
2、画棋子
这个比较复杂 我们在分几步实现;
1)、首先要实例化两种颜色的棋子
2)、想想在现实中下五子棋的时候每人手边有一个盒子装着自己的棋子,这里我们要有我们的盒子来保存我们的棋子,
3)、画棋子是根据客户手指按下的位置进行画的,所以要实现onTouchEvent方法
4)、画棋子
1)、实例和两种颜色的棋子
这个其实上在上面初始化变量的时候就已经做过了。
private static final float roation = 3*1.0f/4;
mBlackPiece = BitmapFactory.decodeResource(getResources(),
R.drawable.stone_b1);
mWhilePiece = BitmapFactory.decodeResource(getResources(),
int dstpoint = (int)(mLineWidth*roation);
mBlackPiece = Bitmap.createScaledBitmap(mBlackPiece, dstpoint, dstpoint, false);
mWhilePiece = Bitmap.createScaledBitmap(mWhilePiece, dstpoint, dstpoint, false);
这里的一个小技巧就是让棋子占每格的3/4,这样不管我们传多大棋子图片都能正确的显示出来,并且只占3/4的格子。
2)、实现黑白棋的棋盒
其实我们在构造函数里面已经实例化了两个盒子
mBlackList = new ArrayList<Point>();
mWhileList = new ArrayList<Point>();
只不过这里还没有棋子,这里我们的棋盒里面的棋子其实都是下在棋盘上的棋子。
3)、用户下棋也就是触发onTouchEvent方法
@Override
public boolean onTouchEvent(MotionEvent event) {
if(IsGameOver) return false;
int x = (int) event.getX();
int y = (int) event.getY();
Point p = getPoint(x,y);
if(event.getAction()==MotionEvent.ACTION_UP){
if(mWhileList.contains(p)||mBlackList.contains(p)){
return false;
}
if(isWhile){
mWhileList.add(p);
}else{
mBlackList.add(p);
}
invalidate();
isWhile=!isWhile;
}
return true;
}
private Point getPoint(int x, int y) {
return new Point((int)(x/mLineWidth),(int)(y/mLineWidth));
}
这里当用户下棋时,获取所下的位置的坐标,这里有一个小技巧
在保存所下棋子的x,y坐标时我们让x,y分别除每个格子的大小,这样所获得的位置一定在棋盘横竖的交界点上,这个可以去体会一下,
然后当用户抬起手指时我们去判断下这个位置是不是已经有棋子了,有的话直接return false;什么都不做,没有的话,看下当前该谁下了,把这个棋子添加到对应的棋盒里,并通知刷新棋盘
4)、画棋子
最后就是把现在棋盒里面的棋子画到棋盘中
private void DrawPiece(Canvas canvas) {
for(int i=0,n=mWhileList.size();i<n;i++){
Point WhilePiece = mWhileList.get(i);
canvas.drawBitmap(mWhilePiece, (WhilePiece.x+(1-roation)/2)*mLineWidth,
(WhilePiece.y+(1-roation)/2)*mLineWidth, mPaint);
}
for(int i=0,n=mBlackList.size();i<n;i++){
Point BlackPiece = mBlackList.get(i);
canvas.drawBitmap(mBlackPiece, (BlackPiece.x+(1-roation)/2)*mLineWidth,
(BlackPiece.y+(1-roation)/2)*mLineWidth, null);
}
}
这步就很简单了 循环遍历棋盒里面的棋子并把它画出来,唯一要注意的就是棋子的位置,
(WhilePiece.x+(1-roation)/2)*mLineWidth,
(WhilePiece.y+(1-roation)/2)*mLineWidth
看下图:
以第一个点的x坐标为例:
因为开始的时候设定的棋盘开始的x坐标离我们View的左边距是0.5*mLineWidth,然后在初始化棋子的时候棋子的大小是3/4*mLineWidth,现在我们要计算棋子的左边距到view左边距的距离
所以棋子的x位置就应该是(0.5-3/4/2)*mLineWidth,第二个点就是(1.5-3/4/2)*mLineWidht,其中0.5,1.5是我们下子的位置系数即WhilePiece.x,所以最后提取出来就是(WhilePiece.x+(1-roation)/2)*mLineWidth,,竖坐标也是同意道理,这个要好好理解一下
3、判定输赢
首先要确定在哪里判断是否游戏一方胜利,可以看出在画棋子的时候是最好的时机了 当游戏结束后就不再画棋子。
private void checkGameOver() {
boolean Whilewin = checkWhileFive(mWhileList);
boolean Blackwin = checkWhileFive(mBlackList);
if(Whilewin){
IsGameOver=true;
Toast.makeText(getContext(), "白旗胜利", Toast.LENGTH_SHORT).show();
}
if(Blackwin){
IsGameOver=true;
Toast.makeText(getContext(), "黑棋胜利", Toast.LENGTH_SHORT).show();
}
}
private boolean checkWhileFive(List<Point> points) {
for(Point p:points){
int x = p.x;
int y = p.y;
boolean Horizewin =checkHorizefive(x,y,points);
boolean verwin =checkverfive(x,y,points);
boolean leftwin =checkleftfive(x,y,points);
boolean reghitwin =checkreghitfive(x,y,points);
if(Horizewin||verwin||leftwin||reghitwin){
return true;
}
}
return false;
}
private boolean checkHorizefive(int x, int y, List<Point> points) {
int count=1;
for(int i=1;i<FIVE_WIN;i++){
if(points.contains(new Point(x+i,y))){
count++;
}else{
break;
}
}
if(count ==FIVE_WIN) return true;
for(int i=1;i<FIVE_WIN;i++){
if(points.contains(new Point(x-i,y))){
count++;
}else{
break;
}
}
if(count ==FIVE_WIN) return true;
return false;
}
上面代码首先在ondraw中调用checkGameover方法检查游戏是否结束
检查的方法就是分别去判断白棋和黑球是否达到五子连珠的效果。
上面贴出来了横向五子连珠的判断,取出当前棋子循环检查他的左边是否有五个相同颜色的棋子,有就返回游戏结束,没有的话在去检查右边是否有五个相同颜色的棋子,有的话返回游戏结束,这样横竖,左斜,右斜都判断后就可以确定游戏是否结束,
结束的话在onTouchEvent方法中直接返回false表示我们不需要这个事件了。
到此这个简单的五子棋差不多就完成了。
4、添加重新开始菜单
为了使它更完善一点我们加入了 重新开始的菜单键,
这个应该没什么难度,主要就是按下重新开始的时候
修改一些变量的初始值
public void setrestart() {
IsGameOver=false;
mWhileList.clear();
mBlackList.clear();
invalidate();
}
最后的最后当app异常退出的时候,发现下了半天的棋子没有保存,因此这里加入
private String INSTANCE = "instaNce";
private String INSTANCE_GEMEOVER = "instance_gameover";
private String INSTANCE_WHILEARRAY = "instance_whilearray";
private String INSTANCE_BLACKARRAY = "instance_blackarray";
@Override
protected Parcelable onSaveInstanceState() {
Bundle bundle = new Bundle();
bundle.putParcelable(INSTANCE, super.onSaveInstanceState());
bundle.putBoolean(INSTANCE_GEMEOVER, IsGameOver);
bundle.putParcelableArrayList(INSTANCE_WHILEARRAY, mWhileList);
bundle.putParcelableArrayList(INSTANCE_BLACKARRAY, mBlackList);
return bundle;
}
@Override
protected void onRestoreInstanceState(Parcelable state) {
if(state instanceof Bundle){
Bundle bundle = (Bundle) state;
IsGameOver = bundle.getBoolean(INSTANCE_GEMEOVER);
mWhileList = bundle.getParcelableArrayList(INSTANCE_WHILEARRAY);
mBlackList = bundle.getParcelableArrayList(INSTANCE_BLACKARRAY);
super.onRestoreInstanceState(bundle.getBundle(INSTANCE));
return;
}
super.onRestoreInstanceState(state);
}
处理异常退出的情况。
GAME OVER。。。。