120行的俄罗斯方块（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 e;}
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>貌似现在流行这个，手痒写了一个，欢迎拍砖

解决方案 »

  1.   


    <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>晕，上面的少替换了一处，这个是正确的的
      

  2.   

    这么牛啊，120行搞掂俄罗斯方块，还是脚本精炼强悍，当年用VC搞了N个120行啊
      

  3.   


    我知道了....是把形状放到一个4x4的大容器里，记录下每个形状的小方块的位置（left，right）。
    1,0,1,1,1,2,2,2：
      

  4.   

    说实话，C#，Java，VB，JS，这个版本比较而已，感觉就这个最爽，因为只需要复制了黏贴到txt中，然后把后最改成.html就可以玩了，体验很棒！
    多谢楼主的分享！
      

  5.   

    shape[i+1]- -y好奇葩的写法，看得我各种蛋疼菊紧。。
    你直接写shape[i+1] + y不就行了吗。。或者shape[i+1] - -y这样也不容易让人产生误解。。
      

  6.   

    想问下：
    旋转里面的
     var newShape=[3-s[1],s[0],3-s[3],s[2],3-s[5],s[4],3-s[7],s[6]];
    是什么原理？
      

  7.   


    4*4矩阵顺时针旋转90度
    x=3-y;
    y=x;
      

  8.   

    表示膜拜，我见过的java语言写的300行，我以为那已经是最精炼的啦
      

  9.   

    批处理实现俄罗斯方块
    http://topic.csdn.net/u/20120306/18/4582640c-a9fb-4448-8ca5-f3daeedac719.html?seed=1633915745&r=77799249#r_77799249