基于Android平台实现拼图小游戏

一、需求描述

拼图是一款益智类经典游戏了，本游戏学习了一些前辈们的经验，整体来说讲，将图片用切图工具进行切割，监听用户手指滑动事件，当用户对凌乱的图片，在一定的时间内拼凑恢复成原来的样子，则成功闯关。 根据游戏不同的关卡对图片进行动态的切割。玩家可以在随意交换任意两张图片，通过遍历切割好的每块图片，将用户选中的图片，进行替换；
其中主要的功能为：

• 动态对图片进行切割成所需要的份数。
• 玩家任意点击的两张图片能够进行正确交换。
• 实现交换图片的动画切换效果。
• 实现过关逻辑。
• 实现游戏时间逻辑控制。
• 游戏结束和暂停。
  

二、主要功能分析

在拼图游戏开发过程中，实现的主要的功能;提供给用户所使用，具体功能分析如下所示：

1、编写切片工具：由于拼图游戏需要准备一个完整的图片，从直观上来看，我们不能每次都将一个完整的图片进行分割，如果是3*3，分成9块，4*4分成16份，这样带来的图片资源极大的混乱，不利于后期的维护，然后andorid就提供了具体的方法来实现对特定图片的切图工具，通过传入的参数的不同，对图片分割成所需要的矩阵，并设置每块的宽高。利用两个for循环进行切图。并设置每块图片的大小位置和每块图片的块号下标index。

2、自定义容器：自定义相对布局文件，用来存放切割好的图片，并设置图片之间的间隙，以及确定图片上下左右的关系。以及设置图片与容器的内边距设置。

3、实现图片交换：实现手指的监听事件，将对选中的两张图片进行位置的变换。

4、实现交换图片的动画效果：构造动画层，设置动画，监听动画

5、实现游戏过关逻辑：成功的判断，关卡的回调。

6、实现游戏时间逻辑：游戏时间的更新，以及handler不断的回调，时间超时后游戏状态的处理，以及成功闯关后，游戏时间的变更。

7、游戏的结束与暂停：当用户返回主页面的时候，游戏能够暂停，当用户返回游戏的时候，游戏可以重新开始。

三、概要设计

1、**切图工具类**imagepiece和imagesplitterutil。其中imagepiece对bitmap图片的块号与每一块图片的位置进行属性的基本设置；在切图工具类imagesplitterutil中，提供一个切图方法splitimage,将传入的bitmap图片分割成piece*piece块，并设置每块宽度，将分割好的图片放入到list中。

2、自定义view:gamepintulayout.java中运用的主要工具有：
单位转换：将传入的数值进行单位转换成3px,使得屏幕可识别。

//单位的转换
mmargin = (int) typedvalue.applydimension(typedvalue.complex_unit_dip,
 3, getresources().getdisplaymetrics());

/*获取多个参数的最小值*/
 private int min(int... params) {
 int min = params[0];
 for (int param : params) {
  if (param < min)
  min = param;
 }
 return min;
 }

3、图片乱序的实现：

// 使用sort完成我们的乱序 
collections.sort(mitembitmaps, new comparator<imagepiece>() {
  public int compare(imagepiece a, imagepiece b) {
  return math.random() > 0.5 ? 1 : -1;
  }
 });

4、图片的交换：在监听事件中，当用户选中了两张图片，则对图片进行交换，并对第一次选中的图片，进行样式的设置。如果用户重复点击一张图片，则消除图片的选中状态。通过给图片设置的tag，找到id, 然后找到bitmap图片的index，然后进行交换同时交换tag。

string firsttag = (string) mfirst.gettag();
string secondtag = (string) msecond.gettag();
mfirst.setimagebitmap(secondbitmap);
msecond.setimagebitmap(firstbitmap);
mfirst.settag(secondtag);
msecond.settag(firsttag);

5、图片动画切换：构造动画层，manimlayout并addview,然后在exchangeview中，先构造动画层，复制两个imageview,为两个imageview设置动画，监听动画的开始，让原本的view隐藏，结束以后，将图片交换，将图片显示，移除动画层。

6、通过接口对关卡进行回调：实现关卡进阶、时间控制、游戏结束接口。并利用handler更新ui，在nextlevel方法中实现移除之前的view布局，以及将动画层设置为空，增加mcolumn++,然后初始化initbitmap()进行重新切图乱序并inititem()设置图片的图片宽高。

public interface gamepintulistener {
 void nextlevel(int nextlevel);
 void timechanged(int currenttime);
 void gameover();
 }

public gamepintulistener mlistener;
 /*
 * 设置接口回调
 */
public void setongamepintulistener(gamepintulistener mlistener) {
 this.mlistener = mlistener;
 }

7、根据当前等级设置游戏的时间：mtime = (int)math.pow(2, level)*60;进而更行我们的handler。mhandler.sendemptymessagedelayed(time_changed, 1000)使得时间动态的减一。

8、游戏暂停开始：

mhandler.removemessages(time_changed);
而重新开始游戏则是：mhandler.sendemptymessage(time_changed);

四、系统实现

工具类：

• imagepiece.java
• imagesplitterutil.java
  

自定义容器：

• gamepintulayout.java
  

imagepiece.java

package com.example.utils;
import android.graphics.bitmap;
public class imagepiece {

 private int index;// 当前第几块
 private bitmap bitmap;// 指向当前图片

 public imagepiece()
 {
 }

 public imagepiece(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 + "]";
 }
}

imagesplitterutil.java

//imagesplitterutil.java
package com.example.utils;

import java.util.arraylist;
import java.util.list;

import android.graphics.bitmap;

public class imagesplitterutil {
 /*
 * 传入bitmap切成piece*piece块，返回list<imagepiece>
 */
 public static list<imagepiece> splitimage(bitmap bitmap, int piece) {
 list<imagepiece> imagepieces = new arraylist<imagepiece>();

 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++)// 列
  {
  imagepiece imagepiece = new imagepiece();
  imagepiece.setindex(j + i * piece);

  int x = j * piecewidth;
  int y = i * piecewidth;
  imagepiece.setbitmap(bitmap.createbitmap(bitmap, x, y,
   piecewidth, piecewidth));
  imagepieces.add(imagepiece);
  }
 }

 return imagepieces;
 }
}

gamepintulayout.java

package com.example.game_pintu.view;

import java.util.collections;
import java.util.comparator;
import java.util.list;

import android.content.context;
import android.graphics.bitmap;
import android.graphics.bitmapfactory;
import android.graphics.color;
import android.os.handler;
import android.util.attributeset;
import android.util.log;
import android.util.typedvalue;
import android.view.view;
import android.view.view.onclicklistener;
import android.view.animation.animation;
import android.view.animation.animation.animationlistener;
import android.view.animation.translateanimation;
import android.widget.imageview;
import android.widget.relativelayout;
import android.widget.toast;

import com.example.game_pintu.r;
import com.example.utils.imagepiece;
import com.example.utils.imagesplitterutil;

public class gamepintulayout extends relativelayout implements onclicklistener {

 private int mcolumn = 3;
 /*
 * 容器内边距
 */
 private int mpadding;
 /*
 * 每张小图之间的距离（横纵）dp
 */
 private int mmargin = 3;

 private imageview[] mgamepintuitems;
 private int mitemwidth;

 /*
 * 游戏的图片
 */
 private bitmap mbitmap;

 private list<imagepiece> mitembitmaps;
 private boolean once;
 /*
 * 游戏面板的宽度
 */
 private int mwidth;
 private boolean isgamesuccess;
 private boolean isgameover;

 public interface gamepintulistener {
 void nextlevel(int nextlevel);

 void timechanged(int currenttime);

 void gameover();
 }

 public gamepintulistener mlistener;

 /*
 * 设置接口回调
 */
 public void setongamepintulistener(gamepintulistener mlistener) {
 this.mlistener = mlistener;
 }

 private int level = 1;
 private static final int time_changed = 0x110;
 private static final int next_level = 0x111;

 private handler mhandler = new handler() {
 public void handlemessage(android.os.message msg) {
  switch (msg.what) {
  case time_changed:
  if(isgamesuccess||isgameover||ispause)
   return;

  if(mlistener !=null)
  {
   mlistener.timechanged(mtime);
   if(mtime ==0)
   {
   isgameover = true;
   mlistener.gameover();
   return;
   }
  }
  mtime--;
  mhandler.sendemptymessagedelayed(time_changed, 1000);

  break;
  case next_level:
  level = level + 1;
  if (mlistener != null) {
   mlistener.nextlevel(level);
  } else {
   nextlevel();
  }
  break;

  default:
  break;
  }
 };
 };

 private boolean istimeenabled = false;
 private int mtime;
 /*
 * 设置是否开启时间
 */
 public void settimeenabled(boolean istimeenabled) {
 this.istimeenabled = istimeenabled;
 }

 public gamepintulayout(context context) {
 this(context, null);
 }

 public gamepintulayout(context context, attributeset attrs) {
 this(context, attrs, 0);

 }

 public gamepintulayout(context context, attributeset attrs, int defstyle) {
 super(context, attrs, defstyle);
 init();
 }

 private void init() {
 /*
  * 单位的转换3--px
  */
 mmargin = (int) typedvalue.applydimension(typedvalue.complex_unit_dip,
  3, getresources().getdisplaymetrics());
 mpadding = min(getpaddingleft(), getpaddingright(), getpaddingtop(),
  getpaddingbottom());

 }

 @override
 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){
  //根据当前等级设置时间
  conttimebaselevel();
  mhandler.sendemptymessage(time_changed);
 }
 }

 private void conttimebaselevel() {
 mtime = (int)math.pow(2, level)*60;
 }

 // 进行切图，以及排序
 private void initbitmap() {
 // todo auto-generated method stub
 if (mbitmap == null) {
  mbitmap = bitmapfactory.decoderesource(getresources(),
   r.drawable.image1);

 }
 mitembitmaps = imagesplitterutil.splitimage(mbitmap, mcolumn);
 // 使用sort完成我们的乱序 
 collections.sort(mitembitmaps, new comparator<imagepiece>() {
  public int compare(imagepiece a, imagepiece b) {
  return math.random() > 0.5 ? 1 : -1;
  }
 });
 }

 // 设置imageview(item)宽高等属性
 private void inititem() {
 mitemwidth = (mwidth - mpadding * 2 - mmargin * (mcolumn - 1))
  / mcolumn;
 mgamepintuitems = new imageview[mcolumn * mcolumn];

 // 生成item, 设置rule;
 for (int i = 0; i < mgamepintuitems.length; i++) {
  imageview item = new imageview(getcontext());
  item.setonclicklistener(this);

  item.setimagebitmap(mitembitmaps.get(i).getbitmap());

  mgamepintuitems[i] = 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 and rule
  if ((i + 1) > mcolumn) {
  lp.topmargin = mmargin;
  lp.addrule(relativelayout.below,
   mgamepintuitems[i - mcolumn].getid());
  }
  addview(item, lp);

 }
 }
 public void restart()
 {
 isgameover = false;
 mcolumn--;
 nextlevel();
 }
 private boolean ispause;
 public void pause()
 {
 ispause = true;
 mhandler.removemessages(time_changed);
 }
 public void resume()
 {
 if(ispause)
 {
  ispause = false;
  mhandler.sendemptymessage(time_changed);
 }
 }
 public void nextlevel() {
 this.removeallviews();
 manimlayout = null;
 mcolumn++;
 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;
 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("#55ff0000"));
 } 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 anim = new translateanimation(0, msecond.getleft()
  - mfirst.getleft(), 0, msecond.gettop() - mfirst.gettop());
 anim.setduration(300);
 anim.setfillafter(true);
 first.startanimation(anim);

 translateanimation animsecond = new translateanimation(0,
  -msecond.getleft() + mfirst.getleft(), 0, -msecond.gettop()
   + mfirst.gettop());
 animsecond.setduration(300);
 animsecond.setfillafter(true);
 second.startanimation(animsecond);

 // 监听动画
 anim.setanimationlistener(new animationlistener() {

  @override
  public void onanimationstart(animation animation) {
  mfirst.setvisibility(view.invisible);
  msecond.setvisibility(view.invisible);

  isaniming = true;
  }

  @override
  public void onanimationrepeat(animation animation) {

  }

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

  mfirst = msecond = null;
  // 判断游戏用户是否成功
  checksuccess();
  isaniming = false;
  }

 });

 }

 private void checksuccess() {
 boolean issuccess = true;
 for (int i = 0; i < mgamepintuitems.length; i++) {
  imageview imageview = mgamepintuitems[i];
  if (getimageindexbytag((string) imageview.gettag()) != i) {
  issuccess = false;
  }
 }
 if (issuccess) {
  isgamesuccess = true;
  mhandler.removemessages(time_changed);

  toast.maketext(getcontext(), "success, level up!",
   toast.length_long).show();
  mhandler.sendemptymessage(next_level);
 }
 }

 public int getimageidbytag(string tag) {
 string[] split = tag.split("_");
 return integer.parseint(split[0]);
 }

 public int getimageindexbytag(string tag) {
 string[] split = tag.split("_");
 return integer.parseint(split[1]);
 }

 /**
 * 构造我们的动画层
 */
 private void setupanimlayout() {
 if (manimlayout == null) {
  manimlayout = new relativelayout(getcontext());
  addview(manimlayout);
 } else {
  manimlayout.removeallviews();
 }
 }

}

mainactivity.java

package com.example.game_pintu;

import android.app.activity;
import android.app.alertdialog;
import android.content.dialoginterface;
import android.content.dialoginterface.onclicklistener;
import android.os.bundle;
import android.widget.textview;

import com.example.game_pintu.view.gamepintulayout;
import com.example.game_pintu.view.gamepintulayout.gamepintulistener;

public class mainactivity extends activity {

 private gamepintulayout mgamepintulayout;
 private textview mlevel;
 private textview mtime;

 @override
 protected void oncreate(bundle savedinstancestate) {
 super.oncreate(savedinstancestate);
 setcontentview(r.layout.activity_main);
 mtime = (textview) findviewbyid(r.id.id_time);
 mlevel = (textview) findviewbyid(r.id.id_level);
 mgamepintulayout = (gamepintulayout) findviewbyid(r.id.id_gamepintu);
 mgamepintulayout.settimeenabled(true);
 mgamepintulayout.setongamepintulistener(new gamepintulistener() {

  @override
  public void timechanged(int currenttime) {
  mtime.settext("" + currenttime);
  }

  @override
  public void nextlevel(final int nextlevel) {
  new alertdialog.builder(mainactivity.this)
   .settitle("game info").setmessage("level up!!!")
   .setpositivebutton("next level", new onclicklistener() {

    @override
    public void onclick(dialoginterface dialog,
     int which) {
    mgamepintulayout.nextlevel();
    mlevel.settext("" + nextlevel);
    }

   }).show();
  }

  @override
  public void gameover() {
  new alertdialog.builder(mainactivity.this)
   .settitle("game info").setmessage("game over!!!")
   .setpositivebutton("restart", new onclicklistener() {
    @override
    public void onclick(dialoginterface dialog,
     int which) {
    // mgamepintulayout.nextlevel();
    mgamepintulayout.restart();
    }

   }).setnegativebutton("quit", new onclicklistener() {

    @override
    public void onclick(dialoginterface dialog,
     int which) {
    finish();
    }
   }).show();
  }
 });
 }
 @override
 protected void onpause() {
 super.onpause();
 mgamepintulayout.pause();
 }
 @override
 protected void onresume() {
 super.onresume();
 mgamepintulayout.resume();
 }
}

activity_main.xml

<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"
 tools:context="${relativepackage}.${activityclass}" >

 <com.example.game_pintu.view.gamepintulayout
 android:id="@+id/id_gamepintu"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:layout_centerinparent="true"
 android:padding="3dp" />

 <relativelayout
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_above="@id/id_gamepintu" >

 <textview
  android:id="@+id/id_level"
  android:layout_width="40dp"
  android:layout_height="40dp"
  android:background="@drawable/textbg"
  android:gravity="center"
  android:padding="4dp"
  android:text="1"
  android:textcolor="#ea7821"
  android:textsize="10sp"
  android:textstyle="bold" />

 <textview
  android:id="@+id/id_time"
  android:layout_width="40dp"
  android:layout_height="40dp"
  android:layout_alignparentright="true"
  android:background="@drawable/textbg"
  android:gravity="center"
  android:padding="4dp"
  android:text="50"
  android:textcolor="#ea7821"
  android:textsize="10sp"
  android:textstyle="bold" />
 </relativelayout>
</relativelayout>

in drawable new textbg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval" >
 <stroke
 android:width="2px"
 android:color="#1579db"
 />
 <solid android:color="#b4cde6"/>
</shape>

五、测试

开始游戏

成功

成功进阶

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。