Android自定义View实现拼图小游戏

public class PuzzleLayoutView extends RelativeLayout implements View.OnClickListener {
//表示将其切成2*2拼图（默认4块）
private int mColumn = 2;
//容器的内边距
private int mPadding;
//每个块块的边距(横,纵  3:表示间距为3dp)
private int mMargin = 3;
//存储ImageView
private ImageView[] mGamePintuItems;
//Item的宽度(一致)
private int mItemWidth;
//游戏的图片
private Bitmap mBitmap;
//切图后的存储
private List<ImagePieceBean  mItemBitmaps;
//操作次数
private boolean once;
//容器宽度(游戏面板 高宽一致)
private int mWidth;
//设置游戏是否成功
private boolean isGameSuccess;
//设置游戏是否失败
private boolean isGameOver;
public GamePintuListner mListner;
public PuzzleLayoutView(Context context) {
this(context, null);
}
public PuzzleLayoutView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public PuzzleLayoutView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
private void init() {
mMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 3,
getResources().getDisplayMetrics());//将dp转化为px,或xp转化为px
mPadding = min(getPaddingLeft(), getPaddingRight(), getPaddingTop(), getPaddingBottom());
}
//接口方法
public interface GamePintuListner {
void nextLevel(int nextLevel);//下一关
void timechanged(int currentTime);//关卡时间
void gameover();//游戏结束
}
public void setOnGamePintuListner(GamePintuListner mListner) {
this.mListner = mListner;
}
private int level = 1;
private static final int TIME_CHANGED = 0X123;
private static final int NEXT_LEVEL = 0X124;
private Handler handler = new Handler() {
public void handleMessage(android.os.Message msg) {
switch (msg.what) {
case TIME_CHANGED:
if (isGameSuccess || isGameOver)
return;
if (mListner != null) {
mListner.timechanged(mTime);
//时间结束后,游戏结束
if (mTime == 0) {
isGameOver = true;
mListner.gameover();
}
}
mTime--;
//延迟1秒发送
handler.sendEmptyMessageDelayed(TIME_CHANGED, 1000);
break;
case NEXT_LEVEL:
level = level + 1;//切换到下一关
if (mListner != null) {
mListner.nextLevel(level);
} else {
nextLevel();
}
default:
break;
}
}
};
private boolean isTimeEnabled = false;
private int mTime;
/**
* 设置是否启动时间  (默认不启动)
*
* @param isTimeEnabled
*/
public void setTimeEnabled(boolean isTimeEnabled) {
this.isTimeEnabled = isTimeEnabled;
}
/**
* 获取当前布局的大小(正方形)
*/
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//取宽和高中的最小值
mWidth = Math.min(getMeasuredHeight(), getMeasuredWidth());
if (!once) {
//调用进行切图,以及排序(方法)
initBitmap();
//调用设置ImageView(Item)的宽高等属性(方法)
initItem();
//判断是否开启时间(方法调用)
checkTimeEnable();
once = true;
}
setMeasuredDimension(mWidth, mWidth);//强制调用使面板为正方形
}
/**
* 判断是否开启时间
*/
private void checkTimeEnable() {
if (isTimeEnabled) {
//根据当前等级设置时间
countTimeBaseLevel();
//通知线程更新关卡时间
handler.sendEmptyMessage(TIME_CHANGED);
}
}
private void countTimeBaseLevel() {
mTime = (int) Math.pow(2, level) * 60;//第一关120秒 第二关:240 第三关:480
}
/**
* 进行切图,以及排序方法
*/
private void initBitmap() {
//将图片引入
if (mBitmap == null) {
mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.pic_view);//注意此处的导包
}
mItemBitmaps = ImageSplitterUtil.sqlitImage(mBitmap, mColumn);//返回长度为4 (2*2)
//使用sort进行乱排序
Collections.sort(mItemBitmaps, new Comparator<ImagePieceBean () {
public int compare(ImagePieceBean a, ImagePieceBean b) {//注意此处的a,b
//是否大于0.5具有不确定性
return Math.random()   0.5 ? 1 : -1;
}
});
}
/**
* 设置ImageView(Item)的宽高等属性方法
*/
private void initItem() {
//容器的宽度-Item内边距 =所有小块块加起来的/Item个数(宽度)  2:左边和右边边距
mItemWidth = (mWidth - mPadding * 2 - mMargin * (mColumn - 1)) / mColumn;
mGamePintuItems = new ImageView[mColumn * mColumn];//界面块块个数相*
//生成我们的Item,设置Rule(Item间的关系,高矮等)
for (int i = 0; i < mGamePintuItems.length; i++) {
ImageView item = new ImageView(getContext());
/**
* item点击事件
*/
item.setOnClickListener(this);
item.setImageBitmap(mItemBitmaps.get(i).getBitmap());//此前以进行过乱排序
mGamePintuItems[i] = item;//保存Item
item.setId(i + 1);
//在Item的tag中存储了index
item.setTag(i + "_" + mItemBitmaps.get(i).getIndex());
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(mItemWidth, mItemWidth);
//[设置游戏规则]
//设置Item间横向间隙,通过rightMargin
//不是最后一列
if ((i + 1) % mColumn != 0) {
lp.rightMargin = mMargin;
}
//不是第一列
if (i % mColumn != 0) {
lp.addRule(RelativeLayout.RIGHT_OF, mGamePintuItems[i - 1].getId());
}
//如果不是第一行,设置topMargin和rule
if (i + 1   mColumn) {
lp.topMargin = mMargin;
lp.addRule(RelativeLayout.BELOW, mGamePintuItems[i - mColumn].getId());
}
addView(item, lp);//添加到RelativeLayout中
}
}
/**
* 当过关失败,时间停止时调用此方法(重新开始此关卡)
*/
public void restart() {
isGameOver = false;//重置当前关卡
mColumn--;
nextLevel();
}
public void nextLevel() {
this.removeAllViews();//移除当前所有View
mAnimLayout = null;
mColumn++;//由2*2 变为3*3游戏面版
isGameSuccess = false;//游戏未成功(新的开始)
checkTimeEnable();//下一关时间重新计算
initBitmap();
initItem();
}
/**
* 获取多个参数的最小值
*/
private int min(int... params) {//...传多个参数
int min = params[0];//获取最小的
for (int param : params) {//发现最小的则赋值
if (param < min) {
min = param;
}
}
return min;
}
/**
* 点击事件
*/
private ImageView mFirst;//点击的IItem
private ImageView mSecond;
public void onClick(View v) {
if (isAniming)
return;
//两次点击同一个Item
if (mFirst == v) {
mFirst.setColorFilter(null);
mFirst = null;
return;
}
if (mFirst == null) {
mFirst = (ImageView) v;
mFirst.setColorFilter(Color.parseColor("#5551c4d4"));//设置选中Item时的颜色(55为半透明)
} else {
mSecond = (ImageView) v;
//交换我们的Item
exchangeView();
}
}
/**
* 动画层
*/
private RelativeLayout mAnimLayout;
//设置图片进行切换时用户疯狂点击
private boolean isAniming;
/**
* 交换我们的Item
*/
private void exchangeView() {
mFirst.setColorFilter(null);//去除颜色状态(高亮)
//调用构造我们的动画层方法
setUpAnimLayout();
//进行图片的交换
ImageView first = new ImageView(getContext());
final Bitmap firstBitmap = mItemBitmaps.get(getImageIdByTag((String) mFirst.getTag())).getBitmap();
first.setImageBitmap(firstBitmap);
LayoutParams lp = new LayoutParams(mItemWidth, mItemWidth);
lp.leftMargin = mFirst.getLeft() - mPadding;
lp.topMargin = mFirst.getTop() - mPadding;
first.setLayoutParams(lp);
mAnimLayout.addView(first);//添加至动画层
ImageView second = new ImageView(getContext());
final Bitmap secondBitmap = mItemBitmaps.get(getImageIdByTag((String) mSecond.getTag())).getBitmap();
second.setImageBitmap(secondBitmap);
LayoutParams lp2 = new LayoutParams(mItemWidth, mItemWidth);
lp2.leftMargin = mSecond.getLeft() - mPadding;
lp2.topMargin = mSecond.getTop() - mPadding;
second.setLayoutParams(lp2);
mAnimLayout.addView(second);//添加至动画层
//设置动画
TranslateAnimation animFirst = new TranslateAnimation(0, mSecond.getLeft() - mFirst.getLeft(),
0, mSecond.getTop() - mFirst.getTop());
animFirst.setDuration(500);//设置动画时间
animFirst.setFillAfter(true);//设置动画结束的位置
first.startAnimation(animFirst);//启动动画
TranslateAnimation animSecond = new TranslateAnimation(0, -mSecond.getLeft() + mFirst.getLeft(),
0, -mSecond.getTop() + mFirst.getTop());
animSecond.setDuration(500);//设置动画时间
animSecond.setFillAfter(true);//设置动画结束的位置
second.startAnimation(animSecond);//启动动画
/**
* 监听动画事件
*/
animFirst.setAnimationListener(new Animation.AnimationListener() {
public void onAnimationStart(Animation animation) {
mFirst.setVisibility(View.INVISIBLE);//隐藏动画
mSecond.setVisibility(View.INVISIBLE);
isAniming = true;
}
public void onAnimationRepeat(Animation animation) {
}
public void onAnimationEnd(Animation animation) {
String firstTag = (String) mFirst.getTag();
String secondTag = (String) mSecond.getTag();
mFirst.setImageBitmap(secondBitmap);
mSecond.setImageBitmap(firstBitmap);
mFirst.setTag(secondTag);
mSecond.setTag(firstTag);
mFirst.setVisibility(View.VISIBLE);//显示隐藏的图片
mSecond.setVisibility(View.VISIBLE);
//此处为空,并不是将对象设置为null 而是将mFirst与Bitmap对象链接的线断开
mFirst = mSecond = null;//回到初始状态
mAnimLayout.removeAllViews();//移除动画层的两个View
//调用判断游戏成功时的方法
checkSuccess();
isAniming = false;
}
});
}
/**
* 判断游戏是否成功
*/
private void checkSuccess() {
boolean isSuccess = true;
for (int i = 0; i < mGamePintuItems.length; i++) {
ImageView imageView = mGamePintuItems[i];
//getImageIndex:上面的方法名(注意此处方法名)
if (getImageIndex((String) imageView.getTag()) != i) {
isSuccess = false;
}
}
if (isSuccess) {
isGameSuccess = true;
handler.removeMessages(TIME_CHANGED);//进入下一关时的时间
Log.e("TAG", "SUCCESS");
Toast.makeText(getContext(), "Success,level up 游戏升级!!!", Toast.LENGTH_LONG).show();
handler.sendEmptyMessage(NEXT_LEVEL);
}
}
/**
* 根据tag获取Id
*/
public int getImageIdByTag(String tag) {
String[] split = tag.split("_");
return Integer.parseInt(split[0]);//拿ID
}
public int getImageIndex(String tag) {
String[] split = tag.split("_");
return Integer.parseInt(split[1]);//拿ID
}
/**
* 构造我们的动画层
*/
private void setUpAnimLayout() {
if (mAnimLayout == null) {
mAnimLayout = new RelativeLayout(getContext());
addView(mAnimLayout);//添加到游戏面板中
}
}
}

public class ImageSplitterUtil {
/**
* 传入bitmap,切成piece*piece块
*/
public static List<ImagePieceBean  sqlitImage(Bitmap bitmap, int piece) {
List<ImagePieceBean  ImagePieceBeans = new ArrayList< ();
int width = bitmap.getWidth();//拿到图片宽高
int height = bitmap.getHeight();
int pieceWidth = Math.min(width, height) / piece;//得到每一块的宽度
for (int i = 0; i < piece; i++) {//切第一行
for (int j = 0; j < piece; j++) {//循环切第二,三行
ImagePieceBean ImagePieceBean = new ImagePieceBean();
ImagePieceBean.setIndex(j + i * piece);//第一次i为0,第0行 j++递增 0-6
int x = j * pieceWidth;//第一次循环X,Y为0
int y = i * pieceWidth;
ImagePieceBean.setBitmap(Bitmap.createBitmap(bitmap, x, y, pieceWidth, pieceWidth));
ImagePieceBeans.add(ImagePieceBean);
}
}
return ImagePieceBeans;
}
}

public class ImagePieceBean {
private int index;  //表示当前第几块
private Bitmap bitmap;  //当前图片
public ImagePieceBean() {
}
//快捷键构造方法 Source 倒3
public ImagePieceBean(int index, Bitmap bitmap) {
this.index = index;
this.bitmap = bitmap;
}
public int getIndex() {
return index;
}
public void setIndex(int index) {
this.index = index;
}
public Bitmap getBitmap() {
return bitmap;
}
public void setBitmap(Bitmap bitmap) {
this.bitmap = bitmap;
}
public String toString() {
return "ImagePiece [index=" + index + ", bitmap=" + bitmap + "]";
}
}

/**
* 总结:
* 1.自定义控件选择,九宫格,RelativeLayout, id+Rule
* 2.切图
* 3.动画图层
* 4.pause resume restart
* 5.游戏时间 Handler sendMessageDelayed() 延迟一秒发送线程
*/
public class GameActivity extends AppCompatActivity {
private PuzzleLayoutView puzzleLayoutView;
private TextView mLevel, mTime;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_game);
mLevel = this.findViewById(R.id.id_level);
mTime = this.findViewById(R.id.id_time);
puzzleLayoutView = this.findViewById(R.id.puzzle_layout_view);
puzzleLayoutView.setTimeEnabled(true);
//监听事件
puzzleLayoutView.setOnGamePintuListner(new PuzzleLayoutView.GamePintuListner() {
public void timechanged(int currentTime) {
//此处为int 注意加""
mTime.setText(currentTime + "秒");
}
public void nextLevel(final int nextLevel) {
//弹出提示框
new AlertDialog.Builder(GameActivity.this).setTitle("游戏信息")
.setMessage("游戏升级").setPositiveButton("进入下一关",
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
//游戏结束后,调用下一关
puzzleLayoutView.nextLevel();
mLevel.setText("第" + +nextLevel + "关");
}
}).show();
}
public void gameover() {
//弹出提示框
new AlertDialog.Builder(GameActivity.this).setTitle("游戏信息")
.setMessage("游戏结束!").setPositiveButton("是否继续该关卡?",
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
puzzleLayoutView.restart();//重新启动
}
}).setNegativeButton("是否放弃该游戏!", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
finish();
}
}).show();
}
});
}
}

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:gravity="center_horizontal"
android:orientation="vertical" 
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" 
<TextView
android:id="@+id/id_level"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="1"
android:textSize="25sp"
android:textStyle="bold" / 
<TextView
android:id="@+id/id_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:gravity="center"
android:text="120"
android:textColor="#ea7821"
android:textSize="25sp"
android:textStyle="bold" / 
</RelativeLayout 
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:src="@drawable/pic_view" / 
<com.helloworld.game.utils.PuzzleLayoutView
android:id="@+id/puzzle_layout_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="3dp" / 
</LinearLayout