类似拼图游戏设计

客户端设计

1、如何绘制？

分上下两层，下层为最终图片，上层尺寸和下层一致，并将上层分割为 m 行 n 列的方格。

2、方格位置如何设定？

m 行 n 列的方格，设定左上角坐标为（0，0），那么最右下角坐标为（ （m-1） , (n-1) ）。

3、如何定义方格对象，及方格拥有什么方法和属性？

方格Pane有4个属性：

locationX，locationY，PaneState，visitor。

（locationX，locationY）组成方格位置信息；

PaneState包含3种状态，VISIBLE(0)方格可见
, INVISIBLE(1) 方格隐藏, PORTRAIT(2)其他用户点击过;

visitor，头像路径或用户信息。

Pane类还有一个setView(View view)方法，将实际对应View赋值给Pane，Pane根据自身属性，修改定制自身View。

部分Android源码如下：

public class Pane {
	private int locationX;
	private int locationY;
	private PaneState state = PaneState.INVISIBLE;
	private String visitor;
	public Pane(){}
	public Pane(int locationX,int locationY,PaneState state,String visitor){
		this.locationX = locationX;
		this.locationY = locationY;
		this.state = state;
		this.visitor = visitor;
	}
	...
	public void setView(View view){
		view.setClickable(true);
		switch (state) {
		case VISIBLE:
			view.setVisibility(View.VISIBLE);
			view.setOnClickListener(new OnClickListener() {

				@Override
				public void onClick(View v) {
					// TODO Auto-generated method stub
					v.setVisibility(View.INVISIBLE);
				}
			});
			break;
		case INVISIBLE:
			view.setVisibility(View.INVISIBLE);
			break;
		case PORTRAIT:

			break;
		default:
			break;
		}
	}
}

public enum PaneState {
	VISIBLE(0) , INVISIBLE(1) , PORTRAIT(2);
        ...
}

自定义View：

	private void init(){
		this.removeAllViews();
		for(int y=0; y<rowNum; ++y){
			TableRow row = new TableRow(context);
			row.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT, 1.0f));
			for(int x=0; x<colNum; ++x){
				items.add(new View(context));
				View button = items.get(y*rowNum + x);
				button.setBackgroundColor(Color.BLUE);
				button.setOnClickListener(new OnClickListener() {

					@Override
					public void onClick(View v) {
						// TODO Auto-generated method stub
						v.setVisibility(View.INVISIBLE);
					}
				});
				row.addView(button, new TableRow.LayoutParams (LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT, 1.0f));
			}
			this.addView(row);
		}
	}

	public void setDataAndDraw(int rowNum,int colNum,List<Pane> paneList){
		this.rowNum = rowNum;
		this.colNum = colNum;
		setDataAndDraw(paneList);
	}

	public void setDataAndDraw(List<Pane> paneList){
		init();
		Iterator<Pane> iterator = paneList.iterator();
		while(iterator.hasNext()){
			Pane pane = iterator.next();
			int index = pane.getLocationY() * rowNum + pane.getLocationX();
			pane.setView(items.get(index));
		}
	}

4、如何使用？

仅需将数据添加给View即可，使用对外公开的setDataAndDraw（）方法。

示例如下：

                List<Pane> list = new ArrayList<Pane>();
		Pane pane1 = new Pane(0,0,PaneState.valueOf(1),null);
		Pane pane2 = new Pane(1,1,PaneState.valueOf(1),null);
		Pane pane3 = new Pane(2,2,PaneState.valueOf(1),null);
		list.add(pane1);
		list.add(pane2);
		list.add(pane3);
		gridView.setDataAndDraw(list);

5、运行截图：

如上指出（0，0），（1，1），（2，2），三处方格不可见。

二、服务器端接口设计

由于功能需求还没确定，仅设计 上传和获取 某关卡 的 方格组信息json，如下：

{

"PaneList":[

{"locationX":0,"locationY":0,"PaneState":1,"visitor":""},

{"locationX":0,"locationY":0,"PaneState":1,"visitor":""},

{"locationX":0,"locationY":0,"PaneState":1,"visitor":""}

]

}

类似拼图游戏设计,布布扣,bubuko.com