JavaScript canvas实现俄罗斯方块游戏

第JavaScriptcanvas实现俄罗斯方块游戏俄罗斯方块是个很经典的小游戏，也尝试写了一下。不过我想用尽量简洁逻辑清晰的代码实现。不用过多的代码记录下落方块的模型，或者记录每一个下落方块的x,y。想了下面的思路，然后发现这样很写很简明。

俄罗斯方块的7种基本模型：

要记录这些模型有很多种办法，可以用记录其相对位置，记录每一个方块的x,y坐标等。自己想了一种思路来记录这7种模型，很简洁，在写左移，右移，旋转功能的时候也方便使用。下面这个数组记录了这些模型。

varcubeArr=[[6,7,12,13],[7,8,11,12],[6,7,11,12],[7,12,17,8],[7,12,16,17],[7,12,17,22],[7,11,12,13]];

一个5*5的表格，从0开始标号。标号为12的点即是中心点。模型每个用其标号记录下来，比如第一种模型就为[6,7,12,13]。

以表格的左上角为参考点，有这样的规律，假设表格中的数为value，有value除以5的余数就是该点相对于参考点x的偏移，value除以5的整数部分就是该点相对于参考点的y偏移。旋转的时候也很简单，以中心12旋转，也可以找到一些规律。

varmovex=cubeNow[i]%5;

varmovey=Math.floor(cubeNow[i]/5);

用一个循环绘制一个模型

functiondrawEle(color)

ctx.fill'#fff';

for(vari=0;ii++)

varmovex=downInfor.cubeNow[i]%5;

varmovey=Math.floor(downInfor.cubeNow[i]/5);

ctx.fillRect(cubeW*(downInfor.point[0]+movex),cubeW*(downInfor.point[1]+movey),cubeW,cubeW);

ctx.strokeRect(cubeW*(downInfor.point[0]+movex),cubeW*(downInfor.point[1]+movey),cubeW,cubeW)

}

旋转模型：

当前位子和下一个旋转位置之间的关系，通过这个数组可以很方便的实现模型的旋转。比如说标号为0的位子，按顺时针旋转，下一个位子是4。标号为6的位子，下一个位子是8.下面这个数组可以由前一个位子找到下一个位子。

varrotateArr=[4,9,14,19,24,3,8,13,18,23,2,7,12,17,22,1,6,11,16,21,0,5,10,15,20];

代码：

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

title俄罗斯方块/title

/head

body

div

div

canvasid="can"height="480"width="300"/canvas

/div

divid="info"

span得分:/spanspanid="score"0/span

/div

/div

scripttype="text/javascript"

varcubeW=20;

varcubeArr=[[6,7,12,13],[7,8,11,12],[6,7,11,12],[7,12,17,8],[7,12,16,17],[7,12,17,22],[7,11,12,13]];

varcolorArr=['#ffc0cb','#dda0dd','#9370db','#6495ed','#fa8072','#ff8c00','#008000'];

varrotateArr=[4,9,14,19,24,3,8,13,18,23,2,7,12,17,22,1,6,11,16,21,0,5,10,15,20];

varcanvas=document.getElementById('can');

varctx=canvas.getContext('2d');

varscore=document.getElementById('score');

varcanWidth=canvas.width;

varcanHeight=canvas.height;

vardownInfor={},staticCube=[];

varmyinter;

window.οnlοad=function()//初始化

drawline();

for(vari=0;i(canWidth/cubeW);i++)

staticCube[i]=[];

for(varj=0;j(canHeight/cubeW);j++)

staticCube[i][j]=0;

initCube();

myinter=setInterval('movedown()',200);//第一个参数要加引号

functiondrawline()

ctx.lineWidth=1;

ctx.stroke;

for(vari=0;i(canWidth/cubeW);i++)

ctx.moveTo(cubeW*i,0);

ctx.lineTo(cubeW*i,canHeight);

ctx.stroke();

for(varj=0;j(canHeight/cubeW);j++)

ctx.moveTo(0,cubeW*j);

ctx.lineTo(canHeight,cubeW*j);

ctx.stroke();

functioninitCube()

varindex=Math.floor(Math.random()*cubeArr.length);//随机生成

downInfor.cubeNow=cubeArr[index].concat();

downInfor.index=index;

downInfor.prepoint=[5,-1];

downInfor.point=[5,-1];

drawEle(colorArr[downInfor.index]);

functionmovedown()

//判断下一个位置是否合理

varlength,isempty=true,px,py,movex,movey,max=0;

for(vari=0;ii++)

if(maxdownInfor.cubeNow[i])

max=downInfor.cubeNow[i];

length=Math.ceil(max/5);

for(vari=0;ii++)

px=downInfor.point[0]+downInfor.cubeNow[i]%5;

py=downInfor.point[1]+1+Math.floor(downInfor.cubeNow[i]/5);

if(staticCube[px][py]==1)

isempty=false;

break;

if((downInfor.point[1]+length)(canHeight/cubeW)isempty)

downInfor.prepoint=downInfor.point.concat();//注意引用类型

downInfor.point[1]=downInfor.point[1]+1;

clearEle();

drawEle(colorArr[downInfor.index]);

else//不能移动的时候

for(vari=0;ii++)

px=downInfor.point[0]+downInfor.cubeNow[i]%5;

py=downInfor.point[1]+Math.floor(downInfor.cubeNow[i]/5);

staticCube[px][py]=1;

drawEle('#555');

checkfullLine();

functionmoveLeft()

varleftroom=4,isempty=true,px,py,movex,movey;

for(vari=0;ii++)

px=downInfor.point[0]-1+downInfor.cubeNow[i]%5;

py=downInfor.point[1]+Math.floor(downInfor.cubeNow[i]/5);

if((downInfor.cubeNow[i]%5)leftroom)

leftroom=downInfor.cubeNow[i]%5;

if(staticCube[px][py]==1)

isempty=false;

break;

if((downInfor.point[0]+leftroom)=0isempty)

downInfor.prepoint=downInfor.point.concat();

downInfor.point[0]=downInfor.point[0]-1;

clearEle();

drawEle(colorArr[downInfor.index]);

functionmoveRight()

varrightroom=0,isempty=true,px,py,movex,movey;

for(vari=0;ii++)

px=downInfor.point[0]+1+downInfor.cubeNow[i]%5;

py=downInfor.point[1]+Math.floor(downInfor.cubeNow[i]/5);

if((downInfor.cubeNow[i]%5)rightroom)

rightroom=downInfor.cubeNow[i]%5;

if(staticCube[px][py]==1)

isempty=false;

break;

if((downInfor.point[0]+rightroom+1)(canWidth/cubeW)isempty)

downInfor.prepoint=downInfor.point.concat();

downInfor.point[0]=downInfor.point[0]+1;

clearEle();

drawEle(colorArr[downInfor.index]);

functionmoverotate()//处理旋转

varisempty=true,px,py,movex,movey,tempRotate=[0,0,0,0];

for(vari=0;ii++)

tempRotate[i]=rotateArr[downInfor.cubeNow[i]];

for(vari=0;ii++)

px=downInfor.point[0]+tempRotate[i]%3;

py=downInfor.point[1]+Math.floor(tempRotate[i]/3);

if(staticCube[px][py]==1)

isempty=false;

break;

if(isempty)

downInfor.prepoint=downInfor.point.concat();

clearEle();

downInfor.cubeNow=tempRotate.concat();

drawEle(colorArr[downInfor.index]);

functiondrawEle(color)

ctx.fill'#fff';

for(vari=0;ii++)

varmovex=downInfor.cubeNow[i]%5;

varmovey=Math.floor(downInfor.cubeNow[i]/5);

ctx.fillRect(cubeW*(downInfor.point[0]+movex),cubeW*(downInfor.point[1]+movey),cubeW,cubeW);

ctx.strokeRect(cubeW*(downInfor.point[0]+movex),cubeW*(downInfor.point[1]+movey),cubeW,cubeW)

functionclearEle()

ctx.lineWidth=1;

ctx.stroke;

for(vari=0;ii++)

varmovex=downInfor.cubeNow[i]%5;

varmovey=Math.floor(downInfor.cubeNow[i]/5);

ctx.clearRect(cubeW*(downInfor.prepoint[0]+movex),cubeW*(downInfor.prepoint[1]+movey),cubeW,cubeW);

ctx.strokeRect(cubeW*(downInfor.prepoint[0]+movex),cubeW*(downInfor.prepoint[1]+movey),cubeW,cubeW)

functioncheckfullLine()//检测是否有一行满了

varisFullLine=true,index=0,changeScore=false;

for(vari=0;icanWidth/cubeW;i++)

if(staticCube[i][0]==1)

alert('游戏结束!');

clearInterval(myinter);

return;

for(vari=canHeight/cubeW-1;ii--)

isFullLine=true;

for(varj=0;j(canWidth/cubeW);j++)

if(staticCube[j][i]==0)

isFullLine=false;

if(isFullLine)//加一分

score.innerHTML=parseInt(score.innerText)+1;

changeScore=true;

for(vars=i;ss--){

for(varj=0;j(canWidth/cubeW)