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实现俄罗斯方块代码

俄罗斯方块 body{ width:530px; background:#006030; margin:20px auto} table#gameBoard{ border:1...
  • OnlyOneCoder
  • OnlyOneCoder
  • 2012年12月06日 19:41
  • 2058

童年经典小游戏,俄罗斯方块,让我们一起用javascript来制作自己的童年吧

这个是我们小时候经常玩的小游戏,现在玩的人很少了,不过确实是很好玩的,这个效果是用了200多行javascript来完成的,除了画面和颜色之外,其他的和小时候玩的没区别哦。...
  • qq_39345165
  • qq_39345165
  • 2017年10月30日 21:56
  • 325

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

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

JS写俄罗斯方块完美注释版

JS写俄罗斯方块完美注释版/************************************************************* JS俄罗斯方块完美注释版 v 1.01* 作者:...
  • sunxing007
  • sunxing007
  • 2008年11月19日 00:35
  • 15188

Dlib:shape_predictor 与 full_object_detection

dlib::shape_predictor , dlib::full_object_detection 是dlib里面的两个两个类,最近在做一个人脸的项目的时候需要用到它们,也是第一次使用Dlib,感...
  • iamzhangzhuping
  • iamzhangzhuping
  • 2016年06月16日 21:55
  • 3789

SAFEARRAY使用实例

 SAFEARRAY使用实例目录:SAFEARRAY使用实例... 1目录:... 1前言:... 1何谓SAFEARRAY:... 1创建SAFEARRAY:2方法一:使用SafeArrayAllo...
  • whw6_faye
  • whw6_faye
  • 2008年04月02日 18:32
  • 1197

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

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

JavaScript jQuery实现Tetris(俄罗斯方块)游戏代码

原文:JavaScript jQuery实现Tetris(俄罗斯方块)游戏代码 源代码下载地址:http://www.zuidaima.com/share/1882054152457216....
  • yaerfeng
  • yaerfeng
  • 2016年12月15日 10:17
  • 1413

读写ESRI Shapefile格式的C#代码

using System;using System.Collections.Generic;using System.Text;using System.IO;using System.Data.Od...
  • aureate820
  • aureate820
  • 2009年06月09日 09:07
  • 3067

童年经典小游戏,俄罗斯方块,让我们一起用javascript来制作自己的童年吧

这个是我们小时候经常玩的小游戏,现在玩的人很少了,不过确实是很好玩的,这个效果是用了200多行javascript来完成的,除了画面和颜色之外,其他的和小时候玩的没区别哦。...
  • qq_39345165
  • qq_39345165
  • 2017年10月30日 21:56
  • 325
收藏助手
不良信息举报
您举报文章:JavaScript实现俄罗斯方块代码
举报原因:
原因补充:

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