JavaScript实现俄罗斯方块代码

原创 2012年12月06日 19:41:13

补张图:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head> 
<title>俄罗斯方块</title> 
<style type="text/css"> 
    body{ width:530px; background:#006030; margin:20px auto} 
    table#gameBoard{ border:1px solid black; border-collapse: collapse; float:left;} 
    table#gameBoard td{ width:30px; height:30px; border: 1px dotted #0cc;} 
    div#gameControl{ widows:160; float:right; height: 200px;; line-height: 200px;} 
    .font{
	font-family:'微软雅黑';
	font-size:18px;
	text-align:center;
	} 
    div input { width: 60px; height:25px; } 
 
</style> 
<script type="text/javascript"> 
    var T = TETRIS = { 
        aBoardGrids : [], 
        aShapes: [ 
            [0xCC00],  
            [0x8888, 0xF00],  
            [0x8C40, 0x6C00],  
            [0x4C80, 0xC600],  
            [0x44C0, 0x8E00, 0xC880, 0xE200],  
            [0x88C0, 0xE800, 0xC440, 0x2E00],  
            [0x4E00, 0x8C80, 0xE400, 0x4C40] 
        ],     
		//代表所有方块的形状数 
        init : function(){ 
            this.oDomBoard = document.getElementById("gameBoard"); 
            this.oDomScore = document.getElementById("score"); 
            this.aBoardGrids = new Array(18); 
            for (var rows = 0 ; rows < 18 ; rows++){ 
                this.aBoardGrids[rows] = new Array(10); 
                var oDomTr = this.oDomBoard.insertRow(-1); 
                for (var cols = 0 ; cols < 10 ; cols++){ 
                    this.aBoardGrids[rows][cols] = 0; 
                    oDomTr.insertCell(cols); 
                } 
            } 
 
            document.onkeydown = function(keyEvent){ 
                keyEvent = keyEvent || window.event; 
                var ikeyNum = keyEvent.which || keyEvent.keyCode; 
                switch(ikeyNum){ 
                    case 37://← 
                        T.oBlock.move("left"); 
                        break; 
                    case 38://↑  
                        T.oBlock.rotate((function (){ 
                            var vShape      = T.aShapes[T.iShapeIdx][ (++T.index)%T.aShapes[T.iShapeIdx].length]; 
                            var sShape      = vShape.toString(2);                                
                            sShape          = new Array(17 - sShape.length).join(0) + sShape;    
                            T.matrix        = sShape.match(/\d{4}/g);    
                            return T.matrix; 
                        })());  //变形 
                        break; 
                    case 39://→ 
                        T.oBlock.move("right"); 
                        break; 
                    case 40://↓ 
                        T.oBlock.move("down"); 
                        break; 
                } 
            } 
        }, 
        next : function (){ 
             
            this.iShapeIdx  = parseInt(Math.random() * this.aShapes.length); 
            this.index      = 0; 
            var vShape      = this.aShapes[this.iShapeIdx][this.index]; 
            var sShape      = vShape.toString(2);                               //将16进制转换为二进制 
            sShape          = new Array(17 - sShape.length).join(0) + sShape;   //不够16位,在前面用0补全  
            this.matrix     = sShape.match(/\d{4}/g);                           //利用正则表达式匹配 
 
            this.oBlock = new TETRIS.Block(this.matrix); 
                     
            clearInterval(T.timer); 
            //注册定时器 
            T.timer = setInterval(function (){ 
                T.oBlock.move("down"); 
            }, 1000); 
             
             
            if( !T.oBlock.checkBlock() ){ 
                alert("Game Over~"); 
                clearInterval(T.timer); 
             
            } 
             
        }, 
        updateBoard : function (){      //更新面板 
            for(var i = 0 ; i < 4 ; i++){ 
                this.aBoardGrids[T.oBlock.shape[i].y][T.oBlock.shape[i].x] = 1; 
            } 
        }, 
        eraseLines : function (){ 
            var iLines = 0; 
            for(var j = 17 ; j >= 0 ; j--){ 
                var num = 0; 
                for(var i = 0 ; i< 10 ; i++){ 
                    if(this.aBoardGrids[j][i] == 1) 
                        num ++; 
                } 
                if(num == 10){ 
                    iLines ++; 
                    for(var m = 0 ; m < i ; m++){ 
                        for(var n = j ; n > 0 ; n--){ 
                            this.aBoardGrids[n][m] = this.aBoardGrids[n-1][m]; 
                            T.oDomBoard.rows[n].cells[m].style.background = T.oDomBoard.rows[n-1].cells[m].style.background; 
                        } 
                        this.aBoardGrids[0][m] = 0; 
                    } 
                    j++; 
                } 
            } 
            return iLines; 
        }, 
        setScore : function (iLines){ 
            var iScore = parseInt(this.oDomScore.innerHTML); 
            if(iLines == 1){ 
                iScore += 100; 
            } else if(iLines == 2){ 
                iScore += 300; 
            } else if(iLines == 3){ 
                iScore += 500; 
            } else if(iLines == 4){ 
                iScore += 1000; 
            } 
            this.oDomScore.innerHTML = iScore; 
        } 
    } 
     
    TETRIS.Block = function (matrix){ 
 
        this.shape = (function(){ 
             
            var aShape = []; 
            for(var i = 0 ; i < matrix.length ; i++){ 
                var sValue = matrix[i]; 
                for(var j = 0 ; j < sValue.length ; j++){ 
                    if(sValue.charAt(j) == "1"){ 
                        aShape.push({ x : j+3 , y : i }); 
                    }   
                } 
            } 
             
            return aShape; 
             
        })(); 
        this.draw(); 
    } 
     
    TETRIS.Block.prototype.move = function (direction){//移动 
        if(this.checkBlock(this.shape,direction)){ 
            this.draw("clear"); 
            for(var i = 0 ; i < 4 ; i++){ 
                switch(direction){ 
                    case "left"://←  
                        this.shape[i].x--; 
                        break; 
                    case "right": 
                        this.shape[i].x++; 
                        break; 
                    case "down": 
                        this.shape[i].y++; 
                        break; 
                } 
            } 
            this.draw(); 
        } else { 
            if(direction == "down"){ 
                this.draw(); 
                T.updateBoard();    //更新面板 
                var iLines = T.eraseLines(); 
                 
                if(iLines > 0){ 
                 
                    T.setScore(iLines); 
                     
                } 
                 
                T.next();           //再生成一个新的方块 
            } 
        } 
         
    } 
    TETRIS.Block.prototype.rotate = function (matrix){//变形 
         
        this.shape = (function(oBlock){ 
             
            var aX = []; 
            var aY = []; 
 
            for(var i = 0 ; i < 4 ; i++){ 
                aX.push(oBlock.shape[i].x); 
                aY.push(oBlock.shape[i].y); 
            } 
            var iMinX = aX.getMin(); 
            var iMinY = aY.getMin(); 
             
             
            var aShape = []; 
            for(var i = 0 ; i < matrix.length ; i++){ 
                var sValue = matrix[i]; 
                for(var j = 0 ; j < sValue.length ; j++){ 
                    if(sValue.charAt(j) == "1"){ 
                        aShape.push({ x : j+iMinX , y : i+iMinY }); 
                    }   
                } 
            } 
            if( !( oBlock.checkBlock(aShape)) ) 
                return oBlock.shape; 
            oBlock.draw("clear"); 
            return aShape; 
             
        })(this); 
 
        this.draw(); 
    } 
 
    TETRIS.Block.prototype.draw = function (opt){//绘图 
        for(var i = 0 ; i < this.shape.length ; i++){ 
            var oShape = this.shape[i]; 
            T.oDomBoard.rows[oShape.y].cells[oShape.x].style.background = (opt==undefined?"#09F":""); 
        } 
    } 
    TETRIS.Block.prototype.checkBlock = function (shape, direction){ 
        shape = shape || this.shape; 
        for(var i = 0 ; i < 4 ; i++){ 
            if(direction == "left"){ 
                    if(shape[i].x == 0 || T.aBoardGrids[shape[i].y][shape[i].x - 1] == 1){ 
                        return false; 
                    } 
            } else if(direction == "right"){ 
                    if(shape[i].x == 9 || T.aBoardGrids[shape[i].y][shape[i].x + 1] == 1){ 
                        return false; 
                    } 
            } else if(direction == "down"){ 
                    if(shape[i].y == 17 || T.aBoardGrids[shape[i].y + 1][shape[i].x] ==1){ 
                        return false; 
                    } 
            } 
            if(shape[i].x < 0 || shape[i].x > 9 || shape[i].y < 0 || shape[i].y > 17) 
                return false; 
            if(T.aBoardGrids[shape[i].y][shape[i].x] == 1){ 
                return false; 
            } 
        } 
        return true; 
         
    } 
    Array.prototype.getMin = function (){ 
        var iMin = this[0]; 
        for(var i = 0 ; i < this.length ; i++){ 
            if(this[i] < iMin) 
                iMin = this[i]; 
        } 
        return iMin; 
    } 
    window.onload = function(){ 
     
        T.init(); 
         
        var oBtnPlay = document.getElementById("btnPlay"); 
        oBtnPlay.onclick = function(){ 
            if(this.value == "begin"){ 
                T.next(); 
                this.value = "over"; 
            } else { 
                this.value = "begin"; 
                alert("Game Over~"); 
                clearInterval(T.timer); 
            }  
         
        }    
        var oBtnPause = document.getElementById("btnPause"); 
        oBtnPause.onclick = function (){ 
            if(this.value == "pause"){ 
                clearInterval(T.timer); 
                this.value = "resume"; 
            } else { 
                T.timer = setInterval(function (){ 
                    T.oBlock.move("down"); 
                }, 1000); 
                this.value = "pause"; 
            } 
        } 
 
    } 
 
</script> 


</head> 
 
<body> 
    <table id="gameBoard"></table> 
    <div id="gameControl"> 
        Score : <span id="score">0</span><br /> 


      <input type="button" id="btnPlay" value="begin" /> 
      <input type="button" id="btnPause" value="pause" /><br/> 


        <span>俄罗斯方块</span> 
    </div> 
</body> 
</html>


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

史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码,代码下载地址:http://www.zuidaima.com/share/1759652641295360.htm...
  • yaerfeng
  • yaerfeng
  • 2014年04月28日 09:52
  • 52103

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

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

新手向!超详细!Java俄罗斯方块程序面向对象编程全记录

零、写在开始之前 新人,Java学习中,文章中遗漏错误之处,欢迎斧正 个人博客,完全原创 转载请注明出处。 项目全代码地址:GitHub 一、从面向对象的开始,将对象抽象成类面对...
  • sinat_32660629
  • sinat_32660629
  • 2016年10月22日 13:43
  • 17904

俄罗斯方块代码——c++实现

用codeblock实现不了,缺少库函数,windows的kpi。555 现在还么解决办法,不过代码挺好的,贴吧大神多。 2017-5-2#include #include #include#de...
  • qq_35781950
  • qq_35781950
  • 2017年05月02日 23:59
  • 2204

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

原创整理不易,转载请注明出处:史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码 代码下载地址:http://www.zuidaima.com/share/17596526...
  • oMingZi12345678
  • oMingZi12345678
  • 2014年05月08日 13:16
  • 733

【C语言】实现俄罗斯方块

学习了C语言,写一个俄罗斯方块,代码绝对可以运行 大神勿笑,只适合初学者 本人也是菜鸟1、考虑怎么存储俄罗斯方块俄罗斯方块的形状一共有19种类型,如果拿数组来表示的话,可能会比较会浪费空间(网...
  • wenqiang1208
  • wenqiang1208
  • 2017年05月05日 22:10
  • 1720

C#实现俄罗斯方块

C#实现俄罗斯方块
  • Qian_F
  • Qian_F
  • 2014年02月23日 19:24
  • 10327

VC++ 6.0 C语言实现俄罗斯方块教程

今天把我之前写的大作业分享一下吧,并教你们如何实现,希望你们看了前面的教程也能自己写一个。 1.要先下载一个 graphics.h 的头文件来绘图。 2.初始化窗口:initgraph(x, y);这...
  • ZengAMing
  • ZengAMing
  • 2015年08月19日 20:29
  • 9524

Python俄罗斯方块改进版

1.加了方块预览部分 2.加了开始按钮 在公司实习抽空写的,呵呵。觉得Python还不错,以前觉得像个玩具语言。希望能够用它做更多大事吧!!!加油。 截图如下: 代码如下: #codin...
  • rongyongfeikai2
  • rongyongfeikai2
  • 2013年05月07日 09:43
  • 2278

windows下实现win32俄罗斯方块练手,编程的几点心得

编程珠玑2阅读笔记: 1.使用c语言性能监视器,完成对代码的调优工作 2.关联数组:  拓扑排序算法,可以用于当存在遮挡的时候决定三维场景的绘制顺序。 3.小型算法中的测试与调试工具 脚手...
  • wangyaninglm
  • wangyaninglm
  • 2016年03月05日 22:23
  • 3471
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript实现俄罗斯方块代码
举报原因:
原因补充:

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