javascript版的俄罗斯方块

[tianma630]

实在是厌倦了每天写增删改查，想试着写写游戏，最近也迷上了javascript和html5，试着写了个俄罗斯方块，有bug的话请多见谅，有意见也可以提出来，互相学习啊
最近也发现，要想写出漂亮的东西，数学是非常重要的，准备吧概论啊、几何啊学习一下
给有兴趣的同学推荐个博客：http://www.matrix67.com/blog
还有个本人的博客：http://1.tianma630.duapp.com/
我博客里还有个贪吃蛇例子，有兴趣的同学也可以看看
不说废话了，上图上代码

一、效果图


二、代码

<script type="text/javascript" src="jquery-1.7.1.js"></script>
<style type="text/css">
#map{width:700px; height:400px; border:0px solid #CCC; overflow:hidden;}
.maps{width:10px; height:10px; float:left; overflow:hidden;border:1px solid red;}
.back{background:black;}
</style>
<script type="text/javascript">
     
    //得分
    var score = 0;
     
    // 定时器
    var gameInt
     
    // 定义方格
    function Point(x,y){
        this.x = x;
        this.y = y;
    }
     
    // 下落的方块
    var fallingBox;
     
    // 下落方块的方向
    var fallingBoxDirection = 0;
     
    // 已经下落的方块
    var falledBox = [];
     
    // 横向位移
    var xMove = 0;
     
    // 纵向位移
    var yMove = 0;
     
    // 下落的方块种类
    var fallingBoxTypes = [
            /*
                #
                #
                #
                #
            */
        [
            [new Point(1,5),new Point(2,5),new Point(3,5),new Point(4,5)],
            [new Point(1,4),new Point(1,5),new Point(1,6),new Point(1,7)],
            [new Point(1,5),new Point(2,5),new Point(3,5),new Point(4,5)],
            [new Point(1,4),new Point(1,5),new Point(1,6),new Point(1,7)]
        ],
            /*
                ##
                ##
            */
        [
            [new Point(1,5),new Point(1,6),new Point(2,5),new Point(2,6)],
            [new Point(1,5),new Point(1,6),new Point(2,5),new Point(2,6)],
            [new Point(1,5),new Point(1,6),new Point(2,5),new Point(2,6)],
            [new Point(1,5),new Point(1,6),new Point(2,5),new Point(2,6)]
        ],
            /*
                #
               ###
            */
        [
            [new Point(1,5),new Point(2,4),new Point(2,5),new Point(2,6)],
            [new Point(1,5),new Point(2,5),new Point(2,6),new Point(3,5)],
            [new Point(1,4),new Point(1,5),new Point(1,6),new Point(2,5)],
            [new Point(1,6),new Point(2,5),new Point(2,6),new Point(3,6)]
        ],
            /*
                ##
                 #
                 #
            */
        [
            [new Point(1,5),new Point(1,6),new Point(2,6),new Point(3,6)],
            [new Point(1,7),new Point(2,5),new Point(2,6),new Point(2,7)],
            [new Point(1,5),new Point(2,5),new Point(3,5),new Point(3,6)],
            [new Point(1,5),new Point(1,6),new Point(1,7),new Point(2,5)]
        ],
            /*
                ##
                #
                #
            */
        [
            [new Point(1,5),new Point(1,6),new Point(2,5),new Point(3,5)],
            [new Point(1,5),new Point(1,6),new Point(1,7),new Point(2,7)],
            [new Point(1,6),new Point(2,6),new Point(3,6),new Point(3,5)],
            [new Point(1,5),new Point(2,5),new Point(2,6),new Point(2,7)]
        ],
            /*
                #
                ##
                 #
            */
        [
            [new Point(1,5),new Point(2,5),new Point(2,6),new Point(3,6)],
            [new Point(1,5),new Point(1,6),new Point(2,4),new Point(2,5)],
            [new Point(1,5),new Point(2,5),new Point(2,6),new Point(3,6)],
            [new Point(1,5),new Point(1,6),new Point(2,4),new Point(2,5)]
        ],
            /*
                 #
                ##
                #
            */
        [
            [new Point(1,6),new Point(2,5),new Point(2,6),new Point(3,5)],
            [new Point(1,5),new Point(1,6),new Point(2,6),new Point(2,7)],
            [new Point(1,6),new Point(2,5),new Point(2,6),new Point(3,5)],
            [new Point(1,5),new Point(1,6),new Point(2,6),new Point(2,7)]
        ]
    ];
     
    // 下落方块种类数量
    var fallingBoxTypesNum = fallingBoxTypes.length;
     
    // 下落方块种类下标
    var fallingBoxTypesIdx = 0;
         
    // 初始化地图
    function initMap(){
        for(var i=1;i<=30;i++){
            for(var j=1;j<=10;j++){
                $("<div id=map_"+i+"_"+j+" class='maps'></div>").appendTo($('#map'));
                if(j==10){
                    $('<div style="clear:both;"></div>').appendTo($('#map'));
                }
            }
        }
    }
     
    // 创建下落方块
    function createFallingBox(){
        // 随机获取下落方块的种类
        fallingBoxTypesIdx = Math.round(Math.random()*(fallingBoxTypesNum-1));
        // 随机获取下落方块的方向
        fallingBoxDirection = Math.round(Math.random()*3);
        fallingBox = fallingBoxTypes[fallingBoxTypesIdx][fallingBoxDirection];
        drawBox(fallingBox);
    }
     
    // 绘制方块
    function drawBox(fallingBox){
        for(var i=0;i<fallingBox.length;i++){
            var point = fallingBox[i];          
            $("#map_"+point.x+"_"+point.y).addClass('back');
        }
         
    }
     
    // 清除方块
    function clearBox(fallingBox){
        for(var i=0;i<fallingBox.length;i++){
            var point = fallingBox[i];          
            $("#map_"+point.x+"_"+point.y).removeClass('back');
        }
    }
     
    // 方块下落
    function falling(){
        // 获取下落一格后的方块
        var initFallingBox = fallingBoxTypes[fallingBoxTypesIdx][fallingBoxDirection];
        var fallingBoxTmp = [
            new Point(initFallingBox[0].x + xMove + 1,initFallingBox[0].y + yMove),
            new Point(initFallingBox[1].x + xMove + 1,initFallingBox[1].y + yMove),
            new Point(initFallingBox[2].x + xMove + 1,initFallingBox[2].y + yMove),
            new Point(initFallingBox[3].x + xMove + 1,initFallingBox[3].y + yMove)
        ];
         
      

[tianma630]

不好意思，超字数了，吧余下的代码补上

  // 判断方块是否下落到底部
        if(isFinishFall(fallingBoxTmp)){
            // 停止下落
            clearInterval(gameInt);
            // 将该方块添加到以下落方块中
            falledBox = falledBox.concat(fallingBox);
            // 删除已经满行的方块
            removeFullRow();
            // 判断游戏是否结束
            if(isGameOver()){
                alert('game over!');
                return ;
            }
            // 重新创建一个下落方块
            createFallingBox();
            // 初始化x轴位移和y轴位移
            xMove = 0;
            yMove = 0;
            // 启动定时器
            gameInt = setInterval(function(){
                falling();
            },300);
            // 否
        }else{
            // 清楚原下落方块
            clearBox(fallingBox);
            // x轴位移+1
            xMove ++;
            //var initFallingBox = fallingBoxTypes[fallingBoxTypesIdx][fallingBoxDirection];
            // 获取下落一格后的方块
            fallingBox = [
                new Point(initFallingBox[0].x + xMove,initFallingBox[0].y + yMove),
                new Point(initFallingBox[1].x + xMove,initFallingBox[1].y + yMove),
                new Point(initFallingBox[2].x + xMove,initFallingBox[2].y + yMove),
                new Point(initFallingBox[3].x + xMove,initFallingBox[3].y + yMove)
            ];  
            // 重新绘制该下落方块
            drawBox(fallingBox);
            // 判断游戏是否结束
            if(isGameOver()){
                clearInterval(gameInt);
                alert('game over!');
                return ;
            }
        }
         
    }
     
    // 判断游戏是否结束 ：地图的第一行是否已经占有方块
    function isGameOver(){
        var flag = false;
        for(var i=1;i<=10;i++){
            if($("#map_1_"+i).hasClass('back')){
                flag = true;
                break;
            }
        }
        return flag;
    }
     
    // 检查方块是否越界 true:是 false:否
    function isOverBoder(fallingBox){
        var flag = false;
        // 左边界
        for(var i=0;i<fallingBox.length;i++){
            if(fallingBox[i].y < 1){
                flag = true;
                break;
            }
        }
        // 右边界
        for(var i=0;i<fallingBox.length;i++){
            if(fallingBox[i].y > 10){
                flag = true;
                break;
            }
        }
        // 上边界
        for(var i=0;i<fallingBox.length;i++){
            if(fallingBox[i].x < 1){
                flag = true;
                break;
            }
        }       
        //下边界
        for(var i=0;i<fallingBox.length;i++){
            if(fallingBox[i].x > 30){
                flag = true;
                break;
            }
        }
        // 已经下落的方块
        for(var i=0;i<falledBox.length;i++){
            //alert(falledBox[i].y);
            for(var j=0;j<fallingBox.length;j++){
                if(fallingBox[j].x == falledBox[i].x && fallingBox[j].y == falledBox[i].y){
                    flag = true;
                    break;
                }
            }               
        }
        return flag;
    }
     
    // 判断下落的方块是否触碰到底部或已经下落的方块
    function isFinishFall(fallingBox){
        var flag = false;
        // 底部
        for(var i=0;i<fallingBox.length;i++){
            if(fallingBox[i].x > 30){
                flag = true;
                break;
            }
        }
         
        // 已经下落的方块
        for(var i=0;i<falledBox.length;i++){
            //alert(falledBox[i].y);
            for(var j=0;j<fallingBox.length;j++){
                if(fallingBox[j].x == falledBox[i].x && fallingBox[j].y == falledBox[i].y){
                    flag = true;
                    break;
                }
            }               
        }
         
        return flag;        
    }
     
    // 移出在已经下落的方块中存在满行的方块
    function removeFullRow(){
        var lineNum = 0;
        var falledBoxTmp = falledBox;
        falledBox = [];
        clearBox(falledBoxTmp);
        for(var i=30;i>=1;i--){
            var num = 0;
            for(var j=0;j<falledBoxTmp.length;j++){
                if(falledBoxTmp[j].x == i) num ++ ;
            }
            if(num == 10){
                lineNum ++ ;
                score = score + 100;
                $('#score').html('您的得分：'+score);
                for(var m=1;m<=10;m++){
                    $("#map_"+i+"_"+m).removeClass('back');
                }
            }else{
                for(var m=0;m<falledBoxTmp.length;m++){
                    if(falledBoxTmp[m].x == i){
                        falledBox.push(new Point(falledBoxTmp[m].x+lineNum,falledBoxTmp[m].y));                         
                    }
                }
            }
        }
        drawBox(falledBox);
    }
     
    $(function(){
        // 初始化地图
        initMap();
         
        // 创建下落方块
        createFallingBox();
         
        // 启动定时器    
        gameInt = setInterval(function(){
            falling();
        },300);
         
        // 监控键盘
        $(document).keydown(function(e){            
            switch(e.which){      
                case 37:// 左移 <-键
                    var initFallingBox = fallingBoxTypes[fallingBoxTypesIdx][fallingBoxDirection];
                    var fallingBoxTmp = [
                        new Point(initFallingBox[0].x + xMove,initFallingBox[0].y + yMove - 1),
                        new Point(initFallingBox[1].x + xMove,initFallingBox[1].y + yMove - 1),
                        new Point(initFallingBox[2].x + xMove,initFallingBox[2].y + yMove - 1),
                        new Point(initFallingBox[3].x + xMove,initFallingBox[3].y + yMove - 1)
                    ];
                    if(!isOverBoder(fallingBoxTmp)){
                        yMove --;
                    }                                                           
                    break;     
                case 39: // 右移 ->键
                    var initFallingBox = fallingBoxTypes[fallingBoxTypesIdx][fallingBoxDirection];
                    var fallingBoxTmp = [
                        new Point(initFallingBox[0].x + xMove,initFallingBox[0].y + yMove + 1),
                        new Point(initFallingBox[1].x + xMove,initFallingBox[1].y + yMove + 1),
                        new Point(initFallingBox[2].x + xMove,initFallingBox[2].y + yMove + 1),
                        new Point(initFallingBox[3].x + xMove,initFallingBox[3].y + yMove + 1)
                    ];
                    if(!isOverBoder(fallingBoxTmp)){
                        yMove ++;
                    }                                                           
                    break;     
                case 32: // 更改方向 空格键
                    var directionTmp = fallingBoxDirection + 1;
                    if(directionTmp == 4){
                        directionTmp = 0;
                    }
                    var initFallingBox = fallingBoxTypes[fallingBoxTypesIdx][directionTmp];
                    var fallingBoxTmp = [
                        new Point(initFallingBox[0].x + xMove,initFallingBox[0].y + yMove),
                        new Point(initFallingBox[1].x + xMove,initFallingBox[1].y + yMove),
                        new Point(initFallingBox[2].x + xMove,initFallingBox[2].y + yMove),
                        new Point(initFallingBox[3].x + xMove,initFallingBox[3].y + yMove)
                    ];                  
                    if(!isOverBoder(fallingBoxTmp)){
                        fallingBoxDirection = directionTmp;
                    }
                    break;    
            }    
        }); 
         
    });
</script>
<div id="map"></div>
<div id="score"></div>

[tianma630]

引用 3 楼 u011234222 的回复:

佩服，， 自己写的思路吗？ 呵呵 我完全没思路。。。。。唉

呵呵 确实写东西思路比较重要 其实也不是很复杂 也就几百行代码 稍微花点时间就能看明白

[lidongmao00]

我也弄了两个html5游戏 http://html5games.sinaapp.com

[DaiGangCsdn]

太牛了，代码很详细啊

[2016买车]

佩服，， 自己写的思路吗？ 呵呵 我完全没思路。。。。。唉

[tianma630]

引用 5 楼 lidongmao00 的回复:

我也弄了两个html5游戏 http://html5games.sinaapp.com

呵呵 很不错啊 能共享下就更好了 互相学习学习