俄罗斯方块Javascript源代码
<html> <style>.c {margin :1px;width:19px;height:19px;background:red;position:absolute;} .d {margin :1px;width:19px;height:19px;background:gray;position:absolute;} .f {top:0px;left:0px;background:black;position:absolute;} </style> <body></body><html> <script> var over=false,shapes=("0,1,1,1,2,1,3,1;1,0,1,1,1,2,2,2;2,0,2,1,2,2,1,2;0,1,1,1,1,2,2,2;1,2,2,2,2,1,3,1;1,1,2,1,1,2,2,2;0,2,1,2,1,1,2,2").split(";"); function create(tag,css){ var elm=document.createElement(tag); elm.className = css; document.body.appendChild(elm); return elm;} function Tetris(c, t, x, y){ var c=c?c:"c"; this.divs = [create("div",c),create("div",c),create("div",c),create("div",c)]; this.reset = function(){ this.x = typeof x != 'undefined'?x:3; this.y = typeof y != 'undefined'?y:0; this.shape = t?t:shapes[Math.floor(Math.random()*(shapes.length-0.00001))].split(","); this.show(); if(this.field&&this.field.check(this.shape,this.x,this.y,'v')=='D'){ over=true; this.field.fixShape(this.shape,this.x,this.y); alert('game over');}} this.show = function(){ for(var i in this.divs){ this.divs[i].style.left = (this.shape[i*2]*1+this.x)*20+'px'; this.divs[i].style.top = (this.shape[i*2+1]*1+this.y)*20+'px';}} this.field=null; this.hMove = function(step){ var r = this.field.check(this.shape,this.x- -step,this.y,'h'); if(r!='N'&&r==0){ this.x-=-step; this.show();}} this.vMove = function(){ if(this.field.check(this.shape,this.x,this.y- -1,'v')=='N'){ this.y++; this.show();} else{ this.field.fixShape(this.shape,this.x,this.y); this.field.findFull(); this.reset();}} this.rotate = function(){ var s=this.shape; var newShape=[3-s[1],s[0],3-s[3],s[2],3-s[5],s[4],3-s[7],s[6]]; var r = this.field.check(newShape,this.x,this.y,'h'); if(r=='D')return; if(r==0){ this.shape=newShape; this.show();} else if(this.field.check(newShape,this.x-r,this.y,'h')==0){ this.x-=r; this.shape=newShape; this.show();}} this.reset();} function Field(w,h){ this.width = w?w:10; this.height = h?h:20; this.show = function(){ var f = create("div","f") f.style.width=this.width*20+'px'; f.style.height=this.height*20+'px';} this.findFull = function(){ for(var l=0;l<this.height;l++){ var s=0; for(var i=0;i<this.width;i++){ s+=this[l*this.width+i]?1:0;} if(s==this.width){ this.removeLine(l);}}} this.removeLine = function(line){ for(var i=0;i<this.width;i++){ document.body.removeChild(this[line*this.width+i]);} for(var l=line;l>0;l--){ for(var i=0;i<this.width;i++){ this[l*this.width- -i]=this[(l-1)*this.width- -i]; if(this[l*this.width- -i])this[l*this.width- -i].style.top = l*20+'px';}}} this.check = function(shape, x, y, d){ var r1=0,r2='N'; for(var i=0;i<8;i+=2){ if(shape[i]- -x < 0 && shape[i]- -x <r1) {r1 = shape[i]- -x;} else if(shape[i]- -x>=this.width && shape[i]- -x>r1) {r1 = shape[i]- -x;} if(shape[i+1]- -y>=this.height || this[shape[i]- -x- -(shape[i+1]- -y)*this.width]) {r2='D'}} if(d=='h'&&r2=='N')return r1>0?r1-this.width- -1:r1; else return r2;} this.fixShape = function(shape,x,y){ var d=new Tetris("d",shape,x,y); d.show(); for(var i=0;i<8;i+=2){ this[shape[i]- -x- -(shape[i+1]- -y)*this.width]=d.divs[i/2];}}} var f = new Field(); f.show(); var s = new Tetris(); s.field = f; s.show(); window.setInterval("if(!over)s.vMove();",500); document.onkeydown = function(e){ if(over)return; var e = window.event ? window.event : e; switch(e.keyCode){ case 38: //up s.rotate(); break; case 40: //down s.vMove(); break; case 37: //left s.hMove(-1); break; case 39: //right s.hMove(1); break;}} </script>
