120行的俄罗斯方块(Javascript)

转载 2012年03月09日 15:34:03
<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>


 

原帖地址http://topic.csdn.net/u/20120303/23/7833A660-8C36-4E2D-BE7C-CEADAFAD0722.html

纯js实现俄罗斯方块详解与源码

对于小白来说用js实现俄罗斯方块还是有难度的,网上找了很多代码看,有的很长难懂,有的短小精悍,但不只用到了js还用到了框架,对于还未接触框架的小白宝宝,也只能无奈自己是小白了,自己写不出来那就找一篇纯...
  • d1105260363
  • d1105260363
  • 2017年08月23日 17:54
  • 369

非常经典的俄罗斯方块源码!HTML5,可直接运行!

整理自己的360仓库时发现的,非常经典,HTML5,可直接运行,强力推荐!!
  • sinat_22657459
  • sinat_22657459
  • 2015年02月12日 15:25
  • 2768

JS版俄罗斯方块第二版

和第一版无差别,主要调整了下代码 (function () { var Cell = { status: ...
  • xxb2008
  • xxb2008
  • 2014年01月08日 01:38
  • 1185

JS写怀旧小游戏系列(一)俄罗斯方块

这年头这么多用JS写怀旧小游戏的,我来做个总结,做个系列,今天第一天,俄罗斯方块! body { background:#000; font:25px/25px 宋体;} #box { flo...
  • tigerdsh
  • tigerdsh
  • 2013年04月26日 14:36
  • 2028

Html5+js实现俄罗斯方块

代码测试地址:测试 1、使用的知识点 html5 javascript 2、需要实现的功能 俄罗斯方块普通玩法 3、分析功能实现 (1)组合方块,共7中形状,可静态指定(由4个方块组合)      ...
  • yixi524
  • yixi524
  • 2014年01月14日 23:40
  • 1661

HTML+CSS+JS 俄罗斯方块小游戏 参考教材练习

TETRIS body>div { font-size:13pt; padding-bottom:8px; } span{ font-size:20pt; color:green...
  • Bingo_12345
  • Bingo_12345
  • 2015年08月19日 21:50
  • 874

俄罗斯方块Tetris (javascript+HTML+CSS)

贪吃蛇倒是编写过很多次,但却是第一次编写俄罗斯方块。我没有参考任何其他代码,写了120行左右。 Tetris .dot{width:23px;height:23px;marg...
  • jupeizhong
  • jupeizhong
  • 2016年01月28日 14:35
  • 599

JS编写的俄罗斯方块

俄罗斯方块BODY{}.MB{    BACKGROUND-COLOR: firebrick;    CURSOR: default;    HEIGHT: 22px;    WIDTH: 22px}...
  • good9006
  • good9006
  • 2007年06月04日 23:01
  • 398

[前端 3]纯Js制作俄罗斯方块游戏

导读:在别人文章里看到了,然后写了一遍。结果出错了,然后调出来了,然后理解了一下,加了点注释,有一些想法。忘了在 哪一篇上面看的了,就贴不出来链接地址。原谅。呃,真没自己的东西,权当练打字了吧。其实,...
  • u013034889
  • u013034889
  • 2016年04月10日 00:08
  • 1938

史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码

史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码,代码下载地址:http://www.zuidaima.com/share/1759652641295360.htm...
  • yaerfeng
  • yaerfeng
  • 2014年04月28日 09:52
  • 52104
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:120行的俄罗斯方块(Javascript)
举报原因:
原因补充:

(最多只允许输入30个字)