<!doctype html>
<html>
<body>
<canvas id="can" width="360px" height="630px" style="display: block;margin: 0 auto;"></canvas>
<script>
ctx=document.getElementById("can").getContext("2d");
ctx.fillStyle='black';
ctx.fillRect(30,0,300,600);
//保存键盘对应的function
var key={"38":"bian()","40":"down()","37":"move(-1)","39":"move(1)"};
//整个地图
var hh=eval("["+"1,"+new Array(11).join("0,")+"1]");
var gg=eval("["+new Array(12).join("1,")+"1]");
var map=new Array(21);
for(var i=0;i<20;i++)
map[i]=hh.slice(0);
map[20]=gg;
//canvas填充
function ff(x,y,c){
x=x*30;y=y*30;
ctx.fillStyle=c;
ctx.fillRect(x,y,28,28);
}
//随机产生方块
function tatris(){
var block = new Array(4);
var ss= ~~(Math.random()*7);
switch(ss){
case 0:{
block[0] = {x:5, y:0};
block[1] = {x:5, y:1};
block[2] = {x:6, y:0};
block[3] = {x:6, y:1};
break;
}
case 1:{
block[0] = {x:4, y:0};
block[1] = {x:5, y:0};
block[2] = {x:6, y:0};
block[3] = {x:7, y:0};
break;
}
case 2:{
block[0] = {x:6, y:0};
block[1] = {x:5, y:1};
block[2] = {x:6, y:1};
block[3] = {x:5, y:2};
break;
}
case 3:{
block[0] = {x:5, y:0};
block[1] = {x:5, y:1};
block[2] = {x:6, y:1};
block[3] = {x:6, y:2};
break;
}
case 4:{
block[0] = {x:5, y:0};
block[1] = {x:5, y:1};
block[2] = {x:6, y:1};
block[3] = {x:7, y:1};
break;
}
case 5:{
block[0] = {x:5, y:0};
block[1] = {x:5, y:1};
block[2] = {x:5, y:2};
block[3] = {x:6, y:2};
break;
}
case 6:{
block[0] = {x:6, y:0};
block[1] = {x:5, y:1};
block[2] = {x:6, y:1};
block[3] = {x:7, y:1};
break;
}
}
return block;
}
//键盘function
document.onkeydown=function(e){
eval(key[(e?e:event).keyCode]);
}
//移动
function move(t){
for(var i=0;i<4;i++)
lcblock[i].x = lcblock[i].x+t;
if(pan()) return;
xuan1();
llblock=copyBlock(lcblock);
}
//旋转变换
function bian(){
var temp=copyBlock(lcblock);
var x1=Math.round((lcblock[0].x+lcblock[1].x+lcblock[2].x+lcblock[3].x)/4);
var y1=Math.round((lcblock[0].y+lcblock[1].y+lcblock[2].y+lcblock[3].y)/4);
for(var i=0;i<4;i++){
lcblock[i].x = -y1+x1+temp[i].y;
lcblock[i].y = y1-temp[i].x+x1;
}
if(pan()) return;
xuan1();
llblock=copyBlock(lcblock);
}
//检测是否重合
function pan(){
for(var i=0;i<4;i++)
if(map[lcblock[i].y][lcblock[i].x]==1||lcblock[i].y<0)
return lcblock=copyBlock(llblock);
}
//gameover
function over(){
clearInterval(run);
alert("game ovar!");
}
//下落
function down(){
for(var i=0;i<4;i++)//下落
lcblock[i].y++;
if(pan()){
for(var g=0;g<4;g++)
map[lcblock[g].y][lcblock[g].x]=1;//重塑map地图
for(var k=0;k<20;k++){ //消行
for(var j=0;j<12;j++)
if(map[k][j]==0)
break;
if(j==12){
map.splice(k,1);
map.unshift(hh.slice(0));
}
}
for(var nn=0;nn<12;nn++)
if(map[1][nn]!=hh[nn])
break;
if(nn!=12)
return over();
start();
}
else{
xuan1();
llblock=copyBlock(lcblock);
}
}
//备份
function copyBlock(old){
var o = new Array(4);
for(var i=0; i<4; i++)
o[i] = {x:0, y:0};
for(var i=0; i<4; i++){
o[i].x = old[i].x;
o[i].y = old[i].y;
}
return o;
}
//渲染整个map地图
function xuan(){
ctx.fillStyle='black';
ctx.fillRect(30,0,300,600);
for(var i=0;i<20;i++)
for(var j=1;j<=10;j++)
if(map[i][j]==1)
ff(j,i,'Lime');
}
//渲染方块
function xuan1(){
for(var i=0;i<4;i++)
ff(llblock[i].x,llblock[i].y,'black');
for(var i=0;i<4;i++)
ff(lcblock[i].x,lcblock[i].y,'Lime');
}
//开始
function start(){
lcblock=tatris();
llblock=copyBlock(lcblock);
xuan();
xuan1();
}
start();
run=setInterval("down()",600);
</script>
</body>
</html>