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

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

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;
}
}
};
}

大小: 2.8 KB



大小: 3.1 KB



大小: 3.2 KB



大小: 3.1 KB



大小: 2.8 KB

查看图片附件