从技术角度实现实现数字华容道

阅读文本大概需要 4.8 分钟。

目的

上周新一期的最强大脑出来了，虽然上季被称为最强黑幕，不过呢。我决定还是看看= =。它里面第一关是叫做数字华容道。说白了，就是和拼图差不多。一开始我准备下一个玩玩的。结果没搜到。所以决定写了一个。最后效果差不多是这样：

思路以及实现

首先，我们应该考虑如何去实现这个效果。细想一下，其实和之前的2048有点像，但是又不是完全一直。于是，便又折腾了一波。这次布局和内容项参考之前2048的，下面放上代码：

自定义一个frame layout，我们先绘制里面的数字：

privatevoidinitial(){

label =newTextView(getContext());

label.setTextSize(32);

label.setBackgroundColor(0x33ff0033);

label.setTextColor(0x330D0D0D);

label.setGravity(Gravity.CENTER);

LayoutParams lp =newLayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);

lp.setMargins(10,10,,);

addView(label, lp);

setNum();

}

publicintgetNum(){

returnnum;

}

@SuppressLint("SetTextI18n")

publicvoidsetNum(intnum){

this.num = num;

if(num

label.setText("");

}else{

label.setText(num +"");

}

}

我们可以看到上面的数字在3x3中，我们显示1-8。不过通过代码我们可以知道，其实我们是去生成0-8，然后把0的那块内容设为空。

那么我们在想一下，是滑动移动还是点击移动。以现在体验的角度，滑动移动会更方便一点。所以我们需要监听它的滑动事件：

setOnTouchListener(newView.OnTouchListener() {

privatefloatstartX, startY, changeX, changeY;

@SuppressLint("ClickableViewAccessibility")

@Override

publicbooleanonTouch(View v, MotionEventevent){

switch(event.getAction()) {

caseMotionEvent.ACTION_DOWN:

startX =event.getX();

startY =event.getY();

break;

caseMotionEvent.ACTION_UP:

// 改变的X坐标＝现在的－起始的

changeX =event.getX() - startX;

// 改变的Y坐标＝现在的－起始的

changeY =event.getY() - startY;

// 若X的绝对值>Y的绝对值，则是左右移动，否则为上下移动，左上角坐标为(0,0)

if(Math.abs(changeX) > Math.abs(changeY)) {

if(changeX < -PADDING) {

left();

}elseif(changeX > PADDING) {

right();

}

}else{

if(changeY < -PADDING) {

up();

}elseif(changeY > PADDING) {

down();

}

}

break;

default:

}

returntrue;

}

});

但是我们需要在滑动之前先生成所有的随机数。也就是1-N生成N个随机数。

publicint[]randomCommon(intmax,intn){

if(n > (max +1) max

returnnull;

}

int[] result =newint[n];

intcount =;

while(count < n) {

intnum = (int) (Math.random() * max) +1;

boolean flag =true;

for(intj =; j < n; j++) {

if(num == result[j]) {

flag =false;

break;

}

}

if(flag) {

result[count] = num;

count++;

}

}

returnresult;

}

数字生成完成之后，我们需要把数据放入之前写的Card并且add到现在的GridLayout中。

privatevoidaddCard(intcardWidth,intcardHeight){

Card card;

intsum =;

for(intx =; x < addNumber; x++) {

for(inty =; y < addNumber; y++) {

card =newCard(getContext());

card.setNum(number[sum] -1);

addView(card, cardWidth, cardHeight);

point[x][y] = card;

sum++;

}

}

}

数据生成了，内容也显示了，接下来我们需要做的就是对方向的逻辑处理。这边我放一个，其他的同理：

for(int x =; x < addNumber; x++) {

for(int y =; y < addNumber; y++) {

if(x -1>=) {

if(point[x -1][y].getNum() ==) {

point[x - 1][y].setNum(point[x][y].getNum());

point[x][y].setNum();

isFinish();

return;

}

}

}

}

如果有人看过之前的2048会发现这边的判断更简单一些，然后我们每次滑动结束，我们需要判断游戏是否结束。如果游戏结束就给它一个提示，是重新来过还是直接下一关：

intnumber =1;

for(intx =; x < addNumber; x++) {

for(inty =; y < addNumber; y++) {

if(number == addNumber * addNumber) {

MainActivity.getMainActivity().stop();

newAlertDialog.Builder(getContext())

.setTitle("游戏结束!")

.setMessage("您的时间是："+ MainActivity.getMainActivity().getTimer())

.setPositiveButton("重来",

newDialogInterface.OnClickListener() {

publicvoidonClick(DialogInterface dialog,

intwhich){

MainActivity.getMainActivity().clear();

start();

}

})

.setNegativeButton("下一关",

newDialogInterface.OnClickListener() {

publicvoidonClick(DialogInterface dialog,

intwhich){

MainActivity.getMainActivity().clear();

addNumber();

}

}).show();

return;

}

if(point[x][y].getNum() == number) {

number++;

}

}

}

这样基本所有的逻辑就写完了。具体代码我已经上传到github中：

https://github.com/sw950729/NumKlotski

最后

我也试着去玩一玩，里面我也写了计时，我记得我3x3最好成绩是42秒，4x4最好成绩是一分四十。大家可以试一下。你最好能玩到多少。里面我也做了上下限的判断，最低三阶，最高八阶。你们可以试试看能不能通关~

iOS 赞赏通道

代码人生，一飞冲天。

END