拼图小游戏"ST--拼图“开发篇之主要功能实现(一)

距离上次发博客好久了,主要是最近太忙,一直再忙着学习各种高级的控件知识以及找工作之类的,所以十分抱歉,刚好抽今天周末,把后面的补上。废话不多说,咱们开始进入正题。


前面两个帖子吧登陆界面和开始界面介绍完了,现在开始写咱们的主要功能实现代码,因为我所用的思路在“简单”,“一般”,“困难”三个不同关卡都差不多,只是其中的参数发生了一些改变,所以这里直接拿”简单“关卡来做介绍


首先呢,我想获取一个效果,就是界面上面的ActionBar是透明的,注意,这里并不是说用的是NoActionBar,而是将ActionBar的背景换成透明的

/**
	 * Actionbar设置
	 */
	private void initActionBar() {
		// TODO Auto-generated method stub
		// 获取ActionBar
		actionBar = getActionBar();
		Resources r = getResources();
		// 将ActionBar的背景更换
		Drawable myDrawable = r.getDrawable(R.drawable.actionbar);
		actionBar.setBackgroundDrawable(myDrawable);
		// 设置主键按钮能否被点击
		actionBar.setHomeButtonEnabled(true);
		// 返回的图标是否显示
		actionBar.setDisplayHomeAsUpEnabled(true);
	}

其中的actionbar是一张透明的图片,所以说,会使用简单的PS来作图对于变成学习还是很有用到的

当然,仅仅这样还是不行的,还需要在添加布局文件之前添上这样一行代码,即:

// 将ActionBar悬浮在布局之上
<span style="white-space:pre">		</span>getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);
<span style="white-space:pre">		</span>setContentView(R.layout.activity_easy);
<span style="white-space:pre">		</span>initActionBar();
文中也注释到了,
getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);

这句话的作用是将ActionBar悬浮在布局之上

接下来就是添加整体布局了,对于游戏的界面,我使用的线性布局,将布局先简单的画出来,然后再去搭UI,虽然可能步骤觉得繁琐但是在搭UI的时候,会发现有了一个简单的草图,UI搭起来很方便


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background13"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:gravity="bottom" >

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/partition" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/easy_tv1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center_vertical|right"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/easy_tv2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="10dp"
                android:text="@string/hello" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginLeft="15sp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="0dp"
        android:layout_weight="8"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="horizontal" >

                <ImageView
                    android:id="@+id/easy_1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:scaleType="fitXY"
                    android:src="@drawable/img1" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="horizontal" >

                <ImageView
                    android:id="@+id/easy_4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:scaleType="fitXY"
                    android:src="@drawable/img4" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="horizontal" >

                <ImageView
                    android:id="@+id/easy_7"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:scaleType="fitXY"
                    android:src="@drawable/img7" />
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="horizontal" >

                <ImageView
                    android:id="@+id/easy_2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:scaleType="fitXY"
                    android:src="@drawable/img2" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="horizontal" >

                <ImageView
                    android:id="@+id/easy_5"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:scaleType="fitXY"
                    android:src="@drawable/img5" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="horizontal" >

                <ImageView
                    android:id="@+id/easy_8"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:scaleType="fitXY"
                    android:src="@drawable/img8" />
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="horizontal" >

                <ImageView
                    android:id="@+id/easy_3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:scaleType="fitXY"
                    android:src="@drawable/img3" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="horizontal" >

                <ImageView
                    android:id="@+id/easy_6"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:scaleType="fitXY"
                    android:src="@drawable/img6" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="horizontal" >

                <ImageView
                    android:id="@+id/easy_9"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:scaleType="fitXY"
                    android:src="@drawable/img9" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:gravity="center" >

        <Button
            android:id="@+id/easy_bt1"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
             android:background="@drawable/select"
            android:gravity="center"
            android:onClick="onclick"
            android:text="重新开始" />
    </LinearLayout>

</LinearLayout>






搭出来的效果就是这样

其中的每一个ImageView都是一张小图,我是把一张完整的大图切出来的,当然,这是一个大工程,不过如果你会使用Ps,使用里面的批量切图,会节省很多精力


布局搭好之后,就可以获取控件了


	/**
	 * 通过findViewById找到控件位置
	 * 
	 */

	public void findId() {
		action_showimage = (ImageView) findViewById(R.id.action_showimage);
		ll = (LinearLayout) findViewById(R.id.ll);
		tv1 = (TextView) findViewById(R.id.easy_tv1);
		tv2 = (TextView) findViewById(R.id.easy_tv2);
		iv_group = new ImageView[3][3];
		iv_group[0][0] = (ImageView) findViewById(R.id.easy_1);
		iv_group[0][1] = (ImageView) findViewById(R.id.easy_2);
		iv_group[0][2] = (ImageView) findViewById(R.id.easy_3);
		iv_group[1][0] = (ImageView) findViewById(R.id.easy_4);
		iv_group[1][1] = (ImageView) findViewById(R.id.easy_5);
		iv_group[1][2] = (ImageView) findViewById(R.id.easy_6);
		iv_group[2][0] = (ImageView) findViewById(R.id.easy_7);
		iv_group[2][1] = (ImageView) findViewById(R.id.easy_8);
		iv_group[2][2] = (ImageView) findViewById(R.id.easy_9);
	}

然后就可以把图片添加到布局上了


<span style="font-size:18px;">/**
	 * 
	 * 将图片添到布局
	 */
	public void initGame() {
		for (int i = 0; i < 3; i++) {
			for (int j = 0; j < 3; j++) {
				if (j + i == 4) {
					iv_group[i][j].setImageResource(number[8]);
				} else {
					iv_group[i][j].setImageResource(number[i * 3 + j]);
				}
			}

		}
	}</span>
接下来就可以初始化界面了,这里尤其有一点要特别注意,就是做拼图的时候,会涉及一个很经典的数学逻辑问题,需要在初始化的时候做判断,不然的话,你的程序完成之后,总会有百分之五十的概率是最后两张图片无法完成,这就是经典的15puzzle算法问题。

这里会涉及几个概念:

1,行数

2,空白控件位于从底部往上数第几个控件

3,倒置数之和


首先,第一个行数就不用解释了吧,像我们的这个简单关卡是3*3的模式,所以行数就是3

第二个空白控件,值得就是像我们3*3的模式中,游戏中,只会显示出来8张图片,有一个空白的是用来移动的,这就是那个空白控件

第三个是倒置数,我们举个例子说明一下,我们是3*3的游戏模式,会出现8张图片,正确排列的时候是

012

345

67

这时它们的顺序就是0,1,2,3,4,5,6,7

但是我们初始化的时候肯定会把顺序打乱,这个可以是随机的那么它的顺序可能是这样的

461

270

35

那么这是它们的顺序就是4,6,1,2,7,0,3,5

那么他们的倒置数就是:4,5,1,1,3,

这里的倒置数就是指一个数组,先拿第一个数跟它后面的数比较,有A个比这个数小的数,那么这组数的第一个倒置数就是A,接着拿第二个数跟第二个数后面的数比较下去,依次下去,如果一个数后面的数都比这个数大,则记为0


相信这样解释大家都明白倒置数是什么了吧,至于倒置数之和,指的就是这些倒置数相加的和


接着咱们就需要来了解这个判断规则了:

1,当行数是偶数时,无论怎样,拼图最后都完成,不会出现最后两张图片异位的现象(这个是我之前找到博友的一篇帖子上提到的,之前并没有怎么验证,但是,当我仔细验证的时候,发现就算行数是偶数的时候,依旧会出现图片异位现象,所以,这句应该是不正确的,也希望广大博友们都试试,大家一起讨论出结果)

2,当行数是奇数时:

a,当空白控件距离底部的距离有奇数个控件时,倒置数之和为奇数,不会出现最后两张图片异位的现象

b,当空白控件距离底部的距离有偶数个控件时,倒置数之和为偶数,不会出现最后两张图片异位的现象

这点可能和我之前的一篇专门讲图片异位问题的博客描述有所不同,是因为之前并没有仔细的去验证,所以并没有发现问题所在,这里跟大家说声抱歉

咱们还是拿例子来说明一下,3*3和5*5肯定有百分之五十的概率出现图片异位的现象,而且4*4也可能出现这种情况,所以我们就需要判断了,因为我们指定的空白控件在出现的时候是出现在最右下角位置,那么空白控件距离底部的距离为0,则空白控件距离底部的距离有偶数个控件,我们只需判定导致数之和是否为偶数即可


代码如下

/**
	 * 初始化图片
	 */
	public void initView() {
		// 获取图片
		for (int i = 0; i < number.length; i++) {
			number[i] = gameover[i];
		}
		// 将图片随机化
		for (int i = 0; i < number.length - 4; i++) {
			int temp = number[i];
			int index = (int) (Math.random() * (number.length - 5));
			number[i] = number[index];
			number[index] = temp;
		}
		// 将图片添加到布局
		initGame();
		// 设置步数
		socer = 0;
		tv2.setText("当前移动了 " + String.valueOf(socer) + " 步");
		// 获取随机化图片之后图片的顺序
		getlist();
		// 判断生成是否有解
		if (canSolve(data)) {
			return;
		} else {
			initView();
		}

	}

	/**
	 * 
	 * 将图片添到布局
	 */
	public void initGame() {
		for (int i = 0; i < 3; i++) {
			for (int j = 0; j < 3; j++) {
				if (j + i == 4) {
					iv_group[i][j].setImageResource(number[8]);
				} else {
					iv_group[i][j].setImageResource(number[i * 3 + j]);
				}
			}

		}
	}

	/**
	 * 获取data
	 * 
	 */
	public void getlist() {
		data = new ArrayList<Integer>();
		for (int i = 0; i < number.length - 4; i++) {
			for (int j = 0; j < number.length - 4; j++) {
				if (number[i] == gameover[j]) {
					data.add(j);
				}
			}

		}

		System.out.println("============" + data.toString());
	}

	/**
	 * 该数据是否有解 因为是奇数,而且设置的空白格的初始位置是最下面一行, 所以只需要判断倒置数 getInversions(data)是否为偶数
	 * 
	 * @param data
	 * @return 该数据是否有解
	 */
	public boolean canSolve(List<Integer> data) {
		// 可行性原则
		return getInversions(data) % 2 == 0;
	}

	/**
	 * 计算倒置和算法
	 * 
	 * @param data
	 * @return 该序列的倒置和 倒置数:每个数与后面的数比较,看有几个比该数小的数,有一个便加一,以此类推
	 * 
	 */
	public static int getInversions(List<Integer> data) {
		int inversions = 0;
		int inversionCount;
		for (int i = 0; i < data.size(); i++) {
			inversionCount = 0;
			for (int j = i + 1; j < data.size(); j++) {
				int index = data.get(i);
				if (data.get(j) < index) {
					inversionCount++;
				}

			}
			inversions += inversionCount;
			inversionCount = 0;
		}
		System.out.println("******" + data.toString() + inversions);
		return inversions;

	}


这样在初始化的时候,会进行判断,如果倒置数是偶数,怎会赋值成功,如果倒置数不是偶数,那么会重新调用initView(),重新生成初始化的排列,然后继续判断,直到倒置数之和为偶数




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值