JavaScript 寫遊戲 : 俄羅斯方塊

應該看得懂吧？

沒時間寫注釋。。。:(

這個差不多美的啦！只要向Block裏面添加或修改就能改變方塊的形狀。:)

<!--

http://dwin.net

http://dewin.tk

Start 2002-09-20 14:45

Finish 2002-10-31 23:50

Last Edit 2003-08-14 01:25

-->

<body>

var Rows = 17;

var Cells = 10;

var ObjW = ObjH = 20;

var Scores= 0;

var Marks = [100,400,900,1600];

var BaseBW = 5;

var BaseBGColor = 'white';

var BlockBW = 2;

var BlockBS = 'inset';

var BlockBC = 'orange';

var GlowColor = '#ffff00';

var GlowStrength = 5;

var oSpeed = 151;

//方塊數據

Block = [];

Block[0]=[

' ',

' 1',

'111']

Block[0].change = 4;

Block[0].color = 'red';

Block[1]=[

' ',

'1 ',

'111']

Block[1].change = 4;

Block[1].color = 'green';

Block[2]=[

' ',

' 1 ',

'111']

Block[2].change = 4;

Block[2].color = 'orange';

Block[3]=[

' 11',

'11 ']

Block[3].change = 2;

Block[3].color = 'fuchsia';

Block[4]=[

'11 ',

' 11']

Block[4].change = 2;

Block[4].color = 'yellow';

Block[5]=[

'1111']

Block[5].change = 2;

Block[5].color = 'lime';

Block[6]=[

'11',

'11']

Block[6].change = 1;

Block[6].color = 'blue';

Block[7]=[

'1']

Block[7].change = 1;

Block[7].color = 'gold';

Block[8]=[

' ',

'1 1',

'111']

Block[8].change = 4;

Block[8].color = 'pink';

Block[9]=[

'111',

' 1 ',

' 1 ']

Block[9].change = 4;

Block[9].color = 'black';

//方塊准備下落

function ReadyForDown(obj1,obj2){

obj1.k = parseInt(Math.random()*Block.length);

if(!NewBlock[obj1.k].length){

switch(Block[obj1.k].change){

case 1:Change0(obj1.k);break;

case 2:Change0(obj1.k);Change1(obj1.k);break;

case 4:Change0(obj1.k);Change1(obj1.k);Change2(obj1.k);break;

}

obj1.Change = parseInt(Math.random()*Block[obj1.k].change);

obj2.innerHTML = NewBlock[obj1.k][obj1.Change].iHtml;

obj1.GapX = parseInt(NewBlock[obj1.k][obj1.Change][0].length/2);

CheckObjGapY(obj1,NewBlock[obj1.k][obj1.Change].length);

obj1.X = parseInt(Cells/2);

obj1.Y = 0;

}

function CheckObjGapY(obj,k){

if(!NewBlock[obj.k][obj.Change][k-1].join('').match(/\d+/)){

obj.GapY = 1-k;

CheckObjGapY(obj,k-1);

}

else obj.GapY = -k;

}

//改變方塊形狀

function ChangeBlock(){

if(Block[Obj1.k].change > 1){

Obj1.TestChange = (Obj1.Change+1 >= Block[Obj1.k].change)?0:Obj1.Change+1;

Obj1.TestGapX = parseInt(NewBlock[Obj1.k][Obj1.TestChange][0].length/2);

Obj1.TestGapY = -NewBlock[Obj1.k][Obj1.TestChange].length;

Obj1.TestL = Obj1.X-Obj1.TestGapX;

Obj1.TestT = Obj1.Y+Obj1.TestGapY;

var k1 = k2 = Areas;

for(var i=Obj1.TestL;i>=0 && i>Obj1.TestL-NewBlock[Obj1.k][Obj1.TestChange].lg;i--){if((k1=CheckChangeBlock(i))!=Areas)break}

for(var i=Obj1.TestL+1;i<Cells && i<Obj1.TestL+NewBlock[Obj1.k][Obj1.TestChange].lg;i++){if((k2=CheckChangeBlock(i))!=Areas)break}

if(k1 == k2) return;

Obj1.L = (Math.abs(Obj1.TestL-k1)>Math.abs(Obj1.TestL-k2))?k2:k1;

Obj1.T = Obj1.TestT;

Obj1.GapX = Obj1.TestGapX;

Obj1.GapY = Obj1.TestGapY;

Obj1.X = Obj1.L+Obj1.GapX;

Obj1.Y = Obj1.T-Obj1.GapY;

Obj1.Change = Obj1.TestChange;

SkinDiv.style.left = Obj1.L*ObjW;

SkinDiv.style.top = Obj1.T*ObjH;

SkinDiv.innerHTML = NewBlock[Obj1.k][Obj1.Change].iHtml;

}

檢測改變後，方塊相對於左邊的值。

function CheckChangeBlock(lefts){

for(var y=0;y<NewBlock[Obj1.k][Obj1.TestChange].length;y++){

for(var x=0;x<NewBlock[Obj1.k][Obj1.TestChange][0].length;x++){

if(NewBlock[Obj1.k][Obj1.TestChange][y][x]==1){

try{if(Map[Obj1.TestT+y][lefts+x] != ' ') return Areas}

catch(e){}

}

return lefts;

}

//方向控制

function Dir(xx,yy){

var special = false

if(NewBlock[Obj1.k][Obj1.Change].length==1 && NewBlock[Obj1.k][Obj1.Change][0]==1)

for(var y=Obj1.T+1;y<Rows-1;y++)

if(Map[y+yy][Obj1.L]==" "){

special = true

break;

}

for(var y=NewBlock[Obj1.k][Obj1.Change].length-1;y>=0;y--){

for(var x=NewBlock[Obj1.k][Obj1.Change][0].length-1;x>=0;x--){

if(NewBlock[Obj1.k][Obj1.Change][y][x]==1){

try{

if(yy==0 && (Obj1.L+x+xx<0 || Obj1.L+x+xx>=Cells || Map[Obj1.T+y][Obj1.L+x+xx]==1)) return;//橫

if(Obj1.T+y+yy>=Rows || (!special && Map[Obj1.T+y+yy][Obj1.L+x+xx]==1)) return CreateBlockInMap();//豎

}

catch(e){}

}

SkinDiv.style.left = (Obj1.L=(Obj1.X+=xx)-Obj1.GapX)*ObjW;

SkinDiv.style.top = (Obj1.T=(Obj1.Y+=yy)+Obj1.GapY)*ObjH;

}

//開始創造地圖啦。

function CreateBlockInMap(){

for(var y=0;y<NewBlock[Obj1.k][Obj1.Change].length;y++){

for(var x=0;x<NewBlock[Obj1.k][Obj1.Change][0].length;x++){

try{

if(NewBlock[Obj1.k][Obj1.Change][y][x]==1){

Map[Obj1.T+y][Obj1.L+x] = NewBlock[Obj1.k][Obj1.Change][y][x];

BaseDiv.childNodes[Areas-(Obj1.T+y)*Cells+Obj1.L+x].style.background = Block[Obj1.k].color;

BaseDiv.childNodes[Areas-(Obj1.T+y)*Cells+Obj1.L+x].style.visibility = 'visible';

}

catch(e){return GameOver()}

}

CheckBlockAppear();

ReadyForDown(Obj2,ReadyBlockDiv);

}

function CheckBlockAppear(){

clearInterval(GoTime2);

GoTime2=0

var NewMap = [];

var iHtml = '';

var k = Rows-1;

var kk = -1;

for(var y=Rows-1;y>=0;y--){

if(Map[y].join('') != FullString){NewMap[k--] = Map[y]}

else{

kk++;

for(var x=0;x<Cells;x++){

BaseDiv.childNodes[Areas-(y+kk)*Cells].removeNode(true);

iHtml += "";

}

for(;k>=0;k--){

NewMap[k] = [];

for(var x=0;x<Cells;x++){

NewMap[k][x] = ' ';

}

if(kk!=-1) ScoreDiv.innerHTML = (Scores+=Marks[kk]);//Cal the Scores

for(var i=0;i<Rows;i++){Map[i]=NewMap[i]}

BaseDiv.innerHTML += iHtml;

for(i in Obj2){Obj1[i] = Obj2[i]}//Obj2 => Obj1

SkinDiv.innerHTML = NewBlock[Obj1.k][Obj1.Change].iHtml;

SkinDiv.style.left = (Obj1.L = Obj1.X-Obj1.GapX)*ObjW;

SkinDiv.style.top = (Obj1.T = Obj1.GapY)*ObjH;

}

function GameOver(){

if(confirm('Game Over , ReStart ?')) window.location.reload();

else window.close();

}

//初始化方塊的變形數組

function Change0(k){

NewBlock[k] = [];

NewBlock[k][0] = [];

NewBlock[k][0].iHtml = '';

for(var y=0;y<Block[k].length;y++){

NewBlock[k][0][y] = [];

for(var x=0;x<Block[k][0].length;x++){

NewBlock[k][0].iHtml += ((NewBlock[k][0][y][x]=Block[k][y].charAt(x)) == 1)?BlockHtml(x,y,k):"";

}

CheckBlockLong(k,0);

}

function Change1(k){

NewBlock[k][1] = [];

NewBlock[k][1].iHtml = '';

for(var y=0;y<Block[k][0].length;y++){

NewBlock[k][1][y] = [];

for(var x=0;x<Block[k].length;x++){

NewBlock[k][1].iHtml += ((NewBlock[k][1][y][x]=Block[k][Block[k].length-x-1].charAt(y)) == 1)?BlockHtml(x,y,k):"";

}

CheckBlockLong(k,1);

}

function Change2(k){

NewBlock[k][2] = [];

NewBlock[k][3] = [];

NewBlock[k][2].iHtml = '';

NewBlock[k][3].iHtml = '';

for(var y=0;y<Block[k].length;y++){

NewBlock[k][2][y] = [];

for(var x=0;x<Block[k][0].length;x++){

NewBlock[k][2].iHtml += ((NewBlock[k][2][y][x]=Block[k][Block[k].length-y-1].charAt(Block[k][0].length-x-1)) == 1)?BlockHtml(x,y,k):"";

}

for(var y=0;y<Block[k][0].length;y++){

NewBlock[k][3][y] = [];

for(var x=0;x<Block[k].length;x++){

NewBlock[k][3].iHtml += ((NewBlock[k][3][y][x]=Block[k][x].charAt(Block[k][0].length-y-1)) == 1)?BlockHtml(x,y,k):"";

}

CheckBlockLong(k,2);

CheckBlockLong(k,3);

}

function BlockHtml(x,y,k){

return ""

}

function CheckBlockLong(k,i){

for(var y=0;y<NewBlock[k][i].length;y++){

NewBlock[k][i][y].lg = (NewBlock[k][i][y].toString().match(/\d+/)==null)?0:NewBlock[k][i][y].join('').match(/\d+/).toString().length;

}

NewBlock[k][i].lg = 1;

for(var y=0;y<NewBlock[k][i].length;y++){

NewBlock[k][i].lg = Math.max(NewBlock[k][i][y].lg,NewBlock[k][i].lg);

}

function document.onkeydown(){

switch(event.keyCode){

case 34:clearInterval(GoTime);oSpeed+=10;if(GoTime>0){Dir(0,1);GoTime=setInterval('Dir(0,1)',oSpeed)};break;//page up

case 33:if(oSpeed-10>0){clearInterval(GoTime);oSpeed-=5};if(GoTime>0){Dir(0,1);GoTime=setInterval('Dir(0,1)',oSpeed);};break;//page down

case 38:if(GoTime>0)GoTime2=setInterval("Dir(0,1)",1);break;//up

case 37:CheckKeyDown(-1,0,150,20);break;//left

case 39:CheckKeyDown(1,0,150,20);break;//right

case 40:CheckKeyDown(0,1,150,20);break;//down

case 96:if(GoTime>0)ChangeBlock();break;//0

case 83:CheckStart();break;

}

function document.onkeyup(){

DoKeyDown=false

}

function CheckKeyDown(x,y,t1,t2){

if(GoTime>0 && !DoKeyDown){

Dir(x,y)

DoKeyDown=true

setTimeout("if(DoKeyDown)KeyDownAgain("+x+","+y+","+t2+");",t1)

}

function KeyDownAgain(x,y,t2){

if(GoTime>0 && DoKeyDown){

Dir(x,y)

setTimeout("KeyDownAgain("+x+","+y+","+t2+")",t2)

}

function CheckStart(){

if(GoTime == -1){

CheckBlockAppear();

GoTime = 0;

ReadyForDown(Obj2,ReadyBlockDiv);

}

if(!GoTime){

Dir(0,1);

GoTime = setInterval('Dir(0,1)',oSpeed);

}

else{

clearInterval(GoTime);

GoTime = 0;

}

var Map = [];

var NewBlock = [];

var Areas = 0;

var GoTime = -1, GoTime2;

var FullString = '';

var Obj1 = new Object();

var Obj2 = new Object();

var DoKeyDown=false

window.focus();

var iHtml = '';

var BaseWidth = Cells*ObjW;

var BaseHeight = Rows*ObjH;

var MainMapWidth = 2*BaseBW+Cells*ObjW;

var MainMapHeight = 2*BaseBW+Rows*ObjH;

document.body.innerHTML += "press \"s\" button to Star or Stop press \"0\" button to Change Quadrel into Another Shape press \"Page Up\" to Speed up press \"Page Down\" to Speed down<span style='position:absolute;left:"+(document.body.clientWidth-MainMapWidth)/2+";top:"+(document.body.clientHeight-MainMapHeight)/2+";width:"+MainMapWidth+";height:"+MainMapHeight+";overflow:visible;border:"+BaseBW+" inset #0000CC;'>"+Scores+"";

for(var i=0,k=Cells*Rows;i<k;i++){iHtml += ""}

for(var i=0;i<Block.length;i++) NewBlock[i]=[]

FullString = new Array(Cells+1).join("1")

for(var y=0;y<Rows;y++){

Map[y] = [];

for(var x=0;x<Cells;x++) Map[y][x]=' ';

}

Areas = Cells*(Rows-1);

BaseDiv.innerHTML = iHtml;

ReadyForDown(Obj2,ReadyBlockDiv);

</script>