<!DOCTYPE HTML><body> <canvas id="Tetris_canvas" width="100px" height="150px" /> <script type="text/javascript"> function BackGround() { var init = function() { var obj = document.getElementById("Tetris_canvas"); var cxt = obj.getContext("2d"); cxt.fillStyle = "#E8FFFF"; cxt.strokeStyle = "#000000"; cxt.fillRect(0,0,obj.width,obj.height); cxt.strokeRect(0,0,obj.width,obj.height); } init(); } function Tetris() { var self = this; var g_arCurPoint = new Array(); var g_arGame = [ /********0,1,2,3,4,5,6,7,8,9 */ /*00*/ 0,0,0,0,0,0,0,0,0,0, /*01*/ 0,0,0,0,0,0,0,0,0,0, /*02*/ 0,0,0,0,0,0,0,0,0,0, /*03*/ 0,0,0,0,0,0,0,0,0,0, /*04*/ 0,0,0,0,0,0,0,0,0,0, /*05*/ 0,0,0,0,0,0,0,0,0,0, /*06*/ 0,0,0,0,0,0,0,0,0,0, /*07*/ 0,0,0,0,0,0,0,0,0,0, /*08*/ 0,0,0,0,0,0,0,0,0,0, /*09*/ 0,0,0,0,0,0,0,0,0,0, /*10*/ 0,0,0,0,0,0,0,0,0,0, /*11*/ 0,0,0,0,0,0,0,0,0,0, /*12*/ 0,0,0,0,0,0,0,0,0,0, /*13*/ 0,0,0,0,0,0,0,0,0,0, /*14*/ 0,0,0,0,0,0,0,0,0,0 ]; this.curGraph; this.makeGarph = function(){ var n = parseInt(Math.random()*6); self.curGraph = n; var flag = 0; switch(n){ case 0:{//横条 4格 //记录图形所占区域位置 if(g_arGame[3]==1 || g_arGame[4]==1 || g_arGame[5]==1 || g_arGame[6]==1 )flag=1; g_arCurPoint[0] = 3; g_arCurPoint[1] = 4; g_arCurPoint[2] = 5; g_arCurPoint[3] = 6; };break; case 1:{//一点 1格 if(g_arGame[5]==1)flag=1; g_arCurPoint[1] = 5; g_arCurPoint[0] = -1; g_arCurPoint[2] = -1; g_arCurPoint[3] = -1; };break; case 2:{//1+3组合(轴对称) 4格 if(g_arGame[5]==1 || g_arGame[14]==1 || g_arGame[15]==1 || g_arGame[16]==1 )flag=1; g_arCurPoint[0] = 5; g_arCurPoint[1] = 15; g_arCurPoint[2] = 14; g_arCurPoint[3] = 16; };break; case 3:{//1+3组合(非对称) 4格 if(g_arGame[4]==1 || g_arGame[14]==1 || g_arGame[15]==1 || g_arGame[16]==1 )flag=1; g_arCurPoint[0] = 4; g_arCurPoint[1] = 14; g_arCurPoint[2] = 15; g_arCurPoint[3] = 16; };break; case 4:{//1+3 (点对称) 4格 if(g_arGame[4]==1 || g_arGame[5]==1 || g_arGame[15]==1 || g_arGame[16]==1 )flag=1; g_arCurPoint[0] = 4; g_arCurPoint[1] = 5; g_arCurPoint[2] = 15; g_arCurPoint[3] = 16; };break; case 5:{//2+2 (点对称) 4格 if(g_arGame[5]==1 || g_arGame[6]==1 || g_arGame[15]==1 || g_arGame[16]==1 )flag=1; g_arCurPoint[0] = 5; g_arCurPoint[1] = 6; g_arCurPoint[2] = 15; g_arCurPoint[3] = 16; };break; } if(flag == 1){ alert("游戏结束"); window.clearInterval(self.id); } } this.moveLeft = function(){ var minLeft = 9; for(var i=0;i<g_arCurPoint.length;i++){ var temp = parseInt(g_arCurPoint[i]%10); if(temp < minLeft)minLeft = temp; } if(minLeft == 0)return; for(var i=0;i<4;i++){ if(g_arCurPoint[i] != -1)g_arCurPoint[i] = g_arCurPoint[i]-1; } } this.moveRight = function(){ var maxRight = 0; for(var i=0;i<4;i++){ if(g_arCurPoint[i] != -1){ var temp = parseInt(g_arCurPoint[i]%10); if(temp > maxRight)maxRight = temp; } } if(maxRight == 9)return; for(var i=0;i<4;i++){ if(g_arCurPoint[i] != -1)g_arCurPoint[i]++; } } this.cnt = 1; this.moveDown = function(){ //alert(self.cnt++); var flag = 0; for(var i=0;i<4;i++){ if(g_arCurPoint[i] != -1){ var nx = parseInt(g_arCurPoint[i]%10); var ny = parseInt(g_arCurPoint[i]/10); if(g_arGame[(ny+1)*10+nx] == 1 || ny == 14){ flag = 1; break; } } } if(flag == 0){//向下移动 for(var i=0;i<4;i++){ if(g_arCurPoint[i] != -1){ var nx = parseInt(g_arCurPoint[i]%10); var ny = parseInt(g_arCurPoint[i]/10); g_arCurPoint[i] = (ny+1)*10+nx; } } }else{//停止移动了 for(var i=0;i<4;i++){ if(g_arCurPoint[i] != -1){ g_arGame[g_arCurPoint[i]] = 1; } } //消除已经完成的行 self.clear(); //新物体出现 self.makeGarph(); } //绘制图形 var obj=document.getElementById("Tetris_canvas"); var cxt = obj.getContext("2d"); for(var i=0;i<g_arGame.length;i++){ var x = parseInt(i%10); var y = parseInt(i/10); if(g_arGame[i] == 1){ cxt.fillStyle = "#00FF00"; cxt.strokeStyle = "#000000"; }else{ cxt.fillStyle = "#E8FFFF"; cxt.strokeStyle = "#E8FFFF"; } cxt.fillRect(x*10,y*10,10,10); cxt.strokeRect(x*10,y*10,10,10); cxt.strokeStyle = "#000000"; cxt.strokeRect(0,0,obj.width,obj.height); } for(var i=0;i<4;i++){ if(g_arCurPoint[i] != -1){ var nx = parseInt(g_arCurPoint[i]%10); var ny = parseInt(g_arCurPoint[i]/10); cxt.fillStyle = "#FF0000"; cxt.strokeStyle = "#000000"; cxt.fillRect(nx*10,ny*10,10,10); cxt.strokeRect(nx*10,ny*10,10,10); } } window.onkeydown = function(event){ var code = event.keyCode; switch(code){ case 37:self.moveLeft();break; case 39:self.moveRight();break; case 40:self.moveDown();break; case 38:self.turn();break; } } } this.clear = function(){ for(var i=15;i>=1;){ var count = 0; for(var j=0;j<10;j++){ if(g_arGame[i*10+j] == 1)count++; } if(count == 10){ for(var k=i;k>=1;k--){ for(var s=0;s<10;s++){ g_arGame[k*10+s] = g_arGame[(k-1)*10+s]; } } }else{ i--; } } } this.turn = function(){ var maxRight = 0; var minLeft = 9; for(var i=0;i<4;i++){ if(g_arCurPoint[i] != -1){ var temp = parseInt(g_arCurPoint[i]%10); if(temp > maxRight)maxRight = temp; } } for(var i=0;i<g_arCurPoint.length;i++){ var temp = parseInt(g_arCurPoint[i]%10); if(temp < minLeft)minLeft = temp; } if(maxRight == 9 || minLeft == 0)return; switch(self.curGraph){ case 0:{//横条 var bY = false; var nx = parseInt(g_arCurPoint[1]%10);//第二点X坐标 var ny = parseInt(g_arCurPoint[1]/10);//第二点Y坐标 if(g_arCurPoint[0]%10 == g_arCurPoint[1]%10)bY = true; if(bY){//竖向 if(nx < 2 || ny < 1) return; for(var i=0;i<4;i++){ if(g_arCurPoint[i] != -1) g_arGame[g_arCurPoint[i]] = 0; } g_arCurPoint[0] = ny*10 + nx-1; g_arCurPoint[1] = ny*10 + nx; g_arCurPoint[2] = ny*10 + nx+1; g_arCurPoint[3] = ny*10 + nx+2; g_arGame[ny*10 + nx-1] = 2; g_arGame[ny*10 + nx] = 2; g_arGame[ny*10 + nx+1] = 2; g_arGame[ny*10 + nx+2] = 2; }else{//横向 for(var i=-1;i<=2;i++){ for(var j=-1;j<=2;j++){ if(g_arGame[(ny+i)*10+nx+j] == 1)return; } } g_arCurPoint[0] = (ny-1)*10 + nx; g_arCurPoint[1] = ny*10 + nx; g_arCurPoint[2] = (ny+1)*10 + nx; g_arCurPoint[3] = (ny+2)*10 + nx; } };break; case 2:{//1+3 轴对称 var nx = parseInt(g_arCurPoint[1]%10);//第二点X坐标 var ny = parseInt(g_arCurPoint[1]/10);//第二点Y坐标 for(var i=-1;i<2;i++){ for(var j=-1;j<2;j++){ if(g_arGame[(ny+j)*10+(nx+i)]==1)return; } } var x,y; if(g_arCurPoint[0]%10 == g_arCurPoint[1]%10){ x = nx; if(g_arCurPoint[0]/10 > g_arCurPoint[1]/10)y=ny-1; else y=ny+1; }else{ y = ny; if(g_arCurPoint[0]%10 > g_arCurPoint[1]%10)x=nx-1; else x=nx+1; } var temp = g_arCurPoint[0]; g_arCurPoint[0] = g_arCurPoint[3]; g_arCurPoint[1] = g_arCurPoint[1]; g_arCurPoint[2] = temp; g_arCurPoint[3] = y*10+x; };break; case 3:{//1+3 var nx = parseInt(g_arCurPoint[1]%10);//第二点X坐标 var ny = parseInt(g_arCurPoint[1]/10);//第二点Y坐标 for(var i=-2;i<=2;i++){ for(var j=-2;j<=2;j++){ if(g_arGame[(ny+j)*10+(nx+i)]==1)return; } } var x,y,x1,y1; if(g_arCurPoint[1]%10 == g_arCurPoint[0]%10){ x = nx; x1 = nx; if(g_arCurPoint[1]/10 > g_arCurPoint[0]/10){ y=ny+1; y1 = ny+2; }else{ y = ny-1; y1 = ny-2; } }else{ y = ny; y1 = ny; if(g_arCurPoint[1]%10 > g_arCurPoint[0]%10){ x=nx+1; x1 = nx+2; }else{ x=nx-1; x1 = nx-2; } } g_arCurPoint[0] = g_arCurPoint[2]; g_arCurPoint[1] = g_arCurPoint[1]; g_arCurPoint[2] = (y*10+x); g_arCurPoint[3] = (y1*10+x1); };break; case 4:{ if(minLeft == 1)return; var nx = parseInt(g_arCurPoint[1]%10);//第二点X坐标 var ny = parseInt(g_arCurPoint[1]/10);//第二点Y坐标 for(var i=-1;i<2;i++){ for(var j=-1;j<2;j++){ if(g_arGame[(ny+j)*10+(nx+i)]==1)return; } } var x1,y1,x2,y2,x3,y3; if(g_arCurPoint[0]%10 == g_arCurPoint[1]%10){ if(g_arCurPoint[1]/10 > g_arCurPoint[0]/10){ x1 = nx+1; y1 = ny; x2 = nx-1; y2 = ny-1; }else{ x1 = nx-1; y1 = ny; x2 = nx+1; y2 = ny+1; } }else{ if(g_arCurPoint[1]%10 > g_arCurPoint[0]%10){ x1 = nx; x2 = nx-1; y1 = ny-1; y2 = ny+1; }else{ x1 = nx; x2 = nx+1; y1 = ny+1; y2 = ny-1; } } g_arCurPoint[2] = g_arCurPoint[0] g_arCurPoint[0] = (y1*10+x1); g_arCurPoint[1] = g_arCurPoint[1]; g_arCurPoint[3] = (y2*10+x2); };break; } } self.makeGarph(); this.id = setInterval(self.moveDown,500); } var bk = new BackGround(); var TetRis = new Tetris(); //setInterval(TetRis.moveDown(),500); </script></body>
