html5 俄罗斯方块 ----kinetic 应用开发介绍实现算法 2

zha_zi

浏览: 594082 次
性别:
来自: 西安

最近访客更多访客>>

akingde

layhaokeai

sainery

一直走到黑

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

我在开发俄罗斯方块的时候大致把整个游戏分拆成了三个大的组件

1：图形构建与变换

2：按键控制

3：摆位与等分

第一部分先介绍图形构建部分

我玩过好多版本的俄罗斯方块，有些图形种类比较多，但是最基本版的俄罗斯方块大致有其中图形

第一个和第七个各有一个反方向的

只要把图形的算法抽象好，如果移动和变换图形都会是很简单的事情，不然就会出现拖影和闪动的问题

我在构建图形的时候把图形拆分成了主要三部分

1：方块

2：点

3：方向

每一个图形都是由一个个方块堆积而成，一个个方块由一个坐标点绘制而成，在加上有方向的绘制就构成了一个完整的图形

一下代码中最为重要的是shape1 中各种变换图形的算法，

在shape1 中有arrayMoveU，arrayMoveD,arrayMoveL,arrayMoveR,

这四个数组就是控制图形变换的核心，

例如竖条的变换只有两种，一种横，一种竖，

方块只有一种原始形态，没有变换形态

而T型则有4中变换形态，但是没有是一种图形可以超过四种变换形态

还是例如竖条行arrayMoveU arrayMoveD 两种其实是一种，arrayMoveL arrayMoveR 也是一种

this.arrayMoveU=[new AspectUnit(Aspect.SOUTH,true),new AspectUnit(Aspect.SOUTH,false),new AspectUnit(Aspect.SOUTH,false)];

代表一个画笔，但是是除去头得画笔，应为每个画笔的头需要单独计算

arrayMoveU 的含义就代表画笔连续往南画三个atom 所以就形成了一个竖条

this.arrayMoveL=[new AspectUnit(Aspect.EAST,true),new AspectUnit(Aspect.EAST,false),new AspectUnit(Aspect.EAST,false)];

arrayMoveL 的含义就代表画笔连续往西画三个atom 所以就形成了一个横条

所有类型的图形变换其实就是靠定义不同的画笔走向绘制图形，

这样说仅仅是一个思想，因为涉及到图形坐标，方向，转轴，头点的计算，会涉及到大量的变量定义。

function Pos(x,y){

	this.x=x;
	this.y=y;
	this.equals=function(p){
		if(this.x==p.x&&this.y==p.y){
			return true;
		}
		return false;
	}
}

function Atom(p){ 
	 
		var rect=new Kinetic.Rect({
			  x: p.x,
	          y: p.y,
	          width: atomWidth,
	          height: atomWidth,
	          fill: "#00D2FF",
	          stroke: "black",
	          strokeWidth: 2
		});
		return rect;
	 
	
}

/**

	绘制图形1 竖条
*/
function Shape1(startAtomUnit,c,array){
	//绘图轨迹数组当旋转方向为up 的时候绘图 new AspectUnit(Aspect.SOUTH,false);
	this.arrayMoveU=[new AspectUnit(Aspect.SOUTH,true),new AspectUnit(Aspect.SOUTH,false),new AspectUnit(Aspect.SOUTH,false)];
	//绘图轨迹数组当旋转方向为down 的时候绘图
	this.arrayMoveD=[new AspectUnit(Aspect.SOUTH,true),new AspectUnit(Aspect.SOUTH,false),new AspectUnit(Aspect.SOUTH,false)];
	//绘图轨迹数组当旋转方向为left 的时候绘图
	this.arrayMoveL=[new AspectUnit(Aspect.EAST,true),new AspectUnit(Aspect.EAST,false),new AspectUnit(Aspect.EAST,false)];
	//绘图轨迹数组当旋转方向为right 的时候绘图
	this.arrayMoveR=[new AspectUnit(Aspect.EAST,true),new AspectUnit(Aspect.EAST,false),new AspectUnit(Aspect.EAST,false)];
	
	this.startAtomUnit=startAtomUnit;
	this.keepPoint=null;
	this.c=c;
	this.draw=function(){
		
		switch(c){
			case Circ.UP:
				this.drawU(startAtomUnit,array);
				break;
			case Circ.DOWN:
				this.drawD(startAtomUnit,array);
				break;
			case Circ.LEFT:
				this.drawL(startAtomUnit,array);
				break;
			case Circ.RIGHT:
				this.drawR(startAtomUnit,array);
				break;
		}	
	};
	
	this.drawU=function(){ 
		for(var i=0;i<this.arrayMoveU.length;i++){ 
			if(this.arrayMoveU[i].aspect==Aspect.EAST){
				var au=null;
				if(!this.arrayMoveU[i].isPoint)
					 au=new AtomUnit(false,Atom(calE(this.startAtomUnit)),false,Type.SHAPE1);
				else 
					 au=new AtomUnit(true,Atom(calE(this.startAtomUnit)),false,Type.SHAPE1);
				array.push(au);
				this.startAtomUnit=au;
			}else if(this.arrayMoveU[i].aspect==Aspect.WEST){  
				var au=null;
				if(!this.arrayMoveU[i].isPoint)
					au=new AtomUnit(false,Atom(calW(this.startAtomUnit)),false,Type.SHAPE1);
				else
					au=new AtomUnit(true,Atom(calW(this.startAtomUnit)),false,Type.SHAPE1);
				array.push(au);
				this.startAtomUnit=au;
			}else if(this.arrayMoveU[i].aspect==Aspect.NORTH){  
				var au=null;
				if(!this.arrayMoveU[i].isPoint)
					au=new AtomUnit(false,Atom(calN(this.startAtomUnit)),false,Type.SHAPE1);
				else
					au=new AtomUnit(true,Atom(calN(this.startAtomUnit)),false,Type.SHAPE1);
				array.push(au);
				this.startAtomUnit=au;
			}else if(this.arrayMoveU[i].aspect==Aspect.SOUTH){  
				var au=null;
				if(!this.arrayMoveU[i].isPoint)
					au=new AtomUnit(false,Atom(calS(this.startAtomUnit)),false,Type.SHAPE1);
				else
					au=new AtomUnit(true,Atom(calS(this.startAtomUnit)),false,Type.SHAPE1);
				array.push(au);
				this.startAtomUnit=au;
			} 
		}
	};
	
	this.drawD=function(){
		for(var i=0;i<this.arrayMoveD.length;i++){
			if(this.arrayMoveD[i].aspect==Aspect.EAST){
				var au=null;
				if(!this.arrayMoveD[i].isPoint)
					au=new AtomUnit(false,Atom(calE(this.startAtomUnit)),false,Type.SHAPE1);
				else
					au=new AtomUnit(true,Atom(calE(this.startAtomUnit)),false,Type.SHAPE1);
				array.push(au);
				this.startAtomUnit=au;
			}else if(this.arrayMoveD[i].aspect==Aspect.WEST){  
			    var au=null;
			    if(!this.arrayMoveD[i].isPoint)
					au=new AtomUnit(false,Atom(calW(this.startAtomUnit)),false,Type.SHAPE1);
				else
					au=new AtomUnit(true,Atom(calW(this.startAtomUnit)),false,Type.SHAPE1);
				array.push(au);
				this.startAtomUnit=au;
			}else if(this.arrayMoveD[i].aspect==Aspect.NORTH){
				var au=null;
				if(!this.arrayMoveD[i].isPoint)  
					au=new AtomUnit(false,Atom(calN(this.startAtomUnit)),false,Type.SHAPE1);
				else
					au=new AtomUnit(true,Atom(calN(this.startAtomUnit)),false,Type.SHAPE1);
				array.push(au);
				this.startAtomUnit=au;
			}else if(this.arrayMoveD[i].aspect==Aspect.SOUTH){ 
				var au=null;
				if(!this.arrayMoveD[i].isPoint) 
					au=new AtomUnit(false,Atom(calS(this.startAtomUnit)),false,Type.SHAPE1);
				else
					au=new AtomUnit(true,Atom(calS(this.startAtomUnit)),false,Type.SHAPE1);
				array.push(au);
				this.startAtomUnit=au;
			} 
		}
	};
	
	this.drawL=function(){
		for(var i=0;i<this.arrayMoveL.length;i++){
			if(this.arrayMoveL[i].aspect==Aspect.EAST){
				var au=null;
				if(!this.arrayMoveL[i].isPoint)
					au=new AtomUnit(false,Atom(calE(this.startAtomUnit)),false,Type.SHAPE1);
				else
					au=new AtomUnit(true,Atom(calE(this.startAtomUnit)),false,Type.SHAPE1);
				array.push(au);
				this.startAtomUnit=au;
			}else if(this.arrayMoveL[i].aspect==Aspect.WEST){  
				var au=null;
				if(!this.arrayMoveL[i].isPoint)
					au=new AtomUnit(false,Atom(calW(this.startAtomUnit)),false,Type.SHAPE1);
				else
					au=new AtomUnit(false,Atom(calW(this.startAtomUnit)),false,Type.SHAPE1);
				array.push(au);
				this.startAtomUnit=au;
			}else if(this.arrayMoveL[i].aspect==Aspect.NORTH){  
			    var au=null;
			    if(!this.arrayMoveL[i].isPoint)
					au=new AtomUnit(false, Atom(calN(this.startAtomUnit)),false,Type.SHAPE1);
				else 
					au=new AtomUnit(false, Atom(calN(this.startAtomUnit)),false,Type.SHAPE1);
				array.push(au);
				this.startAtomUnit=au;
			}else if(this.arrayMoveL[i].aspect==Aspect.SOUTH){  
			    var au=null;
			    if(!this.arrayMoveL[i].isPoint)
					au=new AtomUnit(false,Atom(calS(this.startAtomUnit)),false,Type.SHAPE1);
				else
					au=new AtomUnit(false,Atom(calS(this.startAtomUnit)),false,Type.SHAPE1);
				array.push(au);
				this.startAtomUnit=au;
			} 
		}
	};
	this.drawR=function(){
		for(var i=0;i<this.arrayMoveR.length;i++){
			if(this.arrayMoveR[i].aspect==Aspect.EAST){ 
				var au=null;
				if(!this.arrayMoveR[i].isPoint)
					au=new AtomUnit(false, Atom(calE(this.startAtomUnit)),false,Type.SHAPE1);
				else
					au=new AtomUnit(true, Atom(calE(this.startAtomUnit)),false,Type.SHAPE1);
				array.push(au);
				this.startAtomUnit=au;
			}else if(this.arrayMoveR[i].aspect==Aspect.WEST){  
				var au=null;
				if(!this.arrayMoveR[i].isPoint)
					au=new AtomUnit(false,Atom(calW(this.startAtomUnit)),false,Type.SHAPE1);
				else
					au=new AtomUnit(true,Atom(calW(this.startAtomUnit)),false,Type.SHAPE1);
				array.push(au);
				this.startAtomUnit=au;
			}else if(this.arrayMoveR[i].aspect==Aspect.NORTH){  
			    var au=null;
			    if(!this.arrayMoveR[i].isPoint)
					au=new AtomUnit(false,Atom(calN(this.startAtomUnit)),false,Type.SHAPE1);
				else
					au=new AtomUnit(true,Atom(calN(this.startAtomUnit)),false,Type.SHAPE1);
				array.push(au);
				this.startAtomUnit=au;
			}else if(this.arrayMoveR[i].aspect==Aspect.SOUTH){  
			    var au=null;
			    if(!this.arrayMoveR[i].isPoint)
					au=new AtomUnit(false,Atom(calS(this.startAtomUnit)),false,Type.SHAPE1);
				else
					au=new AtomUnit(true,Atom(calS(this.startAtomUnit)),false,Type.SHAPE1);
				array.push(au);
				this.startAtomUnit=au;
			} 
		}
	};
}