應該看得懂吧?
沒時間寫注釋。。。:(
這個差不多美的啦!只要向Block裏面添加或修改就能改變方塊的形狀。:)
<!-- http://dwin.net http://dewin.tk
Copyright(c) 1998-2004 dewin all rights reserved
Start 2002-09-20 14:45 Finish 2002-10-31 23:50 Last Edit 2003-08-14 01:25 --> <body> <script>
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 += "<span style='width:"+ObjW+";height:"+ObjH+";border:"+BlockBW+" "+BlockBS+" "+BlockBC+";overflow:hidden;visibility:hidden;'></span>"; } } } 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 "<span style='position:absolute;left:"+x*ObjW+";top:"+y*ObjH+";width:"+ObjW+";height:"+ObjH+";background:"+Block[k].color+";border:"+BlockBW+" "+BlockBS+" "+BlockBC+";overflow:hidden;'></span>" }
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 += "<font color=red>press \"s\" button to Star or Stop<br>press \"0\" button to Change Quadrel into Another Shape<br>press \"Page Up\" to Speed up<br>press \"Page Down\" to Speed down</font><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;'><span style='position:absolute;left:0;top:0;width:"+BaseWidth+";height:"+BaseHeight+";filter:glow(color="+GlowColor+",strength="+GlowStrength+");'><span id='BaseDiv' style='position:absolute;left:0;top:0;width:"+BaseWidth+";height:"+BaseHeight+";filter:flipv;'></span></span><span id=SkinDiv style='position:absolute;'></span><span id='ReadyBlockDiv' style='position:absolute;left:"+MainMapWidth+";top:0;'></span><span id=ScoreDiv style='position:absolute;left:"+(MainMapWidth+50)+";top:"+(MainMapHeight-20)+";'>"+Scores+"</span></span>"; for(var i=0,k=Cells*Rows;i<k;i++){iHtml += "<span style='width:"+ObjW+";height:"+ObjH+";border:"+BlockBW+" "+BlockBS+" "+BlockBC+";overflow:hidden;visibility:hidden;'></span>"} 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>

|