html5简单的俄罗斯方块游戏代码

特效描述：html5 俄罗斯方块 游戏代码，html5带动画效果的俄罗斯方块小游戏代码，代码写的很整齐，是一款不错的h5小游戏。

代码结构
1. html代码
[runcode]<div class="wrap">
            <div class="tips">Good!</div>
            <div class="now"></div>
            <div class="next"></div>
            <div class="score">SCORE: <span>0</span></div>
            <div class="lines">LINES: <span>0</span></div>
            <div class="level">LEVEL: <span>0</span></div>
            <div class="pause">开始</div>
            <div class="refresh">重新开始</div>
        </div>
        <div class="wrap_prompt">
            <div class="prompt">
                <div>×</div>
                <span class="failed">游戏失败</span>
                <span class="restart">重新开始</span>
            </div>
        </div>
        <script type="text/javascript">
            var oWrap = document.body.querySelector('.wrap');
            var oTips = document.body.querySelector('.wrap .tips');
            var oScore = document.body.querySelector('.wrap .score span');
            var oLines = document.body.querySelector('.wrap .lines span');
            var oLevel = document.body.querySelector('.wrap .level span');
            var oBtn = document.body.querySelector('.wrap .pause');
            var oReset = document.body.querySelector('.wrap .refresh');
            var oPrompt = document.body.querySelector('.wrap_prompt');
            var oRestart = document.body.querySelector('.wrap_prompt .restart');
            var cloneDivs = document.getElementsByClassName("clDiv");
            var tetris = {
                // 父容器
                box: null,//document.getElementById('box'),
                // 游戏状态，0未开始，1运行，2终止
                status: 0,
                quick: false,
                // 游戏分数
                line: 0,
                level: 0,
                score: 0,
                // 时间间隔、定时器
                step: 500,
                timer: null,
                // 游戏面板，数组 对应 div
                board: null,
                boardDiv: null,
                // 当前方块
                nowBlock: null,
                // 下一方块
                nextBlock: null,
                // 初始化
                init: function() {
                    this.createBox();
                    this.nowBlock = this.createBlock();
                    this.nextBlock = this.createBlock();
                    // 先显示一次
                    this.drawBlock();
                    this.drawNextBlock();
                    // this.begin();
                },
                // 自动开始
                begin: function() {
                    // 自动下行
                    clearInterval(this.timer);
                    this.timer = setInterval(function() {
                        if(tetris.status==1) tetris.moveDown();
                    }, this.step);
                },
                // 暂停、开始
                pause: function() {
                    if(tetris.status == 0) {
                        oBtn.innerHTML = '暂停';
                        tetris.status = 1;
                        tetris.begin();
                        return true;
                    }
                    oBtn.innerHTML = '继续';
                    tetris.status = 0;
                    clearInterval(tetris.timer);
                },
                // 重新开始
                reStart: function() {
                    for (var i = 0; i < 21; i++) {
                        for (var j = 0; j < 10; j++) {
                            tetris.board[j] = 0;
                            tetris.boardDiv[i*10 + j].style.background = '';
                        }
                    }
                    tetris.eraseNextBlock();
                    tetris.nowBlock = tetris.createBlock();
                    tetris.nextBlock = tetris.createBlock();
                    tetris.drawBlock();
                    tetris.drawNextBlock();
                    oPrompt.style.display = 'none';
                    oBtn.innerHTML = '暂停';
                    tetris.status = 1;
                    tetris.begin();
                },
                // 创建容器
                createBox: function() {
                    var str = '';
                    // 生成父容器
                    this.box = document.createElement('div');
                    this.box.id = 'box';
                    // 生成10*21的游戏矩阵
                    this.board = new Array(21);
                    for (var i = 0; i < 21; i++) {
                        this.board = new Array(10);
                        for (var j = 0; j < 10; j++) {
                            this.board[j] = 0;
                            str += '<div style="left:' + j*26 + 'px;top:' + i*26 + 'px"></div>';
                        }
                    }
                    // 生成4*4的提示矩阵
                    for (var i = 0; i < 4; i++) {
                        for (var j = 0; j < 4; j++) {
                            str += '<div style="left:' + (280+j*26) + 'px;top:' + i*26 + 'px"></div>';
                        }
                    }
                    this.box.innerHTML = str;
                    document.body.appendChild(this.box);
                    this.boardDiv = document.querySelectorAll('#box > div');
                },
                // 创建方块
                createBlock: function() {
                    var block = new Array(4);
                    var num = Math.floor(Math.random()*7);
                    switch(num) {
                        case 0:{
                            block[0] = {x:-2, y:4};//**
                            block[1] = {x:-1, y:4};//**
                            block[2] = {x:-2, y:5};
                            block[3] = {x:-1, y:5};
                            break;
                        }
                        case 1:{
                            block[0] = {x:-1, y:3};//****
                            block[1] = {x:-1, y:4};
                            block[2] = {x:-1, y:5};
                            block[3] = {x:-1, y:6};
                            break;
                        }
                        case 2:{
                            block[0] = {x:-3, y:5};// *
                            block[1] = {x:-2, y:4};//**
                            block[2] = {x:-2, y:5};//*
                            block[3] = {x:-1, y:4};
                            break;
                        }
                        case 3:{
                            block[0] = {x:-3, y:4};//*
                            block[1] = {x:-2, y:4};//**
                            block[2] = {x:-2, y:5};// *
                            block[3] = {x:-1, y:5};
                            break;
                        }
                        case 4:{
                            block[0] = {x:-2, y:4};//*
                            block[1] = {x:-1, y:4};//***
                            block[2] = {x:-1, y:5};
                            block[3] = {x:-1, y:6};
                            break;
                        }
                        case 5:{
                            block[0] = {x:-3, y:4};//*
                            block[1] = {x:-2, y:4};//*
                            block[2] = {x:-1, y:4};//**
                            block[3] = {x:-1, y:5};
                            break;
                        }
                        case 6:{
                            block[0] = {x:-2, y:5};// *
                            block[1] = {x:-1, y:4};//***
                            block[2] = {x:-1, y:5};
                            block[3] = {x:-1, y:6};
                            break;
                        }
                    }
                    return block;
                },
                // 绘制方块
                drawBlock: function() {
                    for (var i = 0; i < 4; i++) {
                        if(this.nowBlock.x < 0) continue;
                        this.board[this.nowBlock.x][this.nowBlock.y] = 1;
                        this.boardDiv[this.nowBlock.x*10+this.nowBlock.y].style.background = 'red';
                    }
                },
                // 清除方块
                eraseBlock: function() {
                    for (var i = 0; i < 4; i++) {
                        if(this.nowBlock.x < 0) continue;
                        this.board[this.nowBlock.x][this.nowBlock.y] = 0;
                        this.boardDiv[this.nowBlock.x*10+this.nowBlock.y].style.background = '';
                    }
                },
                // 绘制预览方块
                drawNextBlock: function() {
                    var nextBlock = this.nextBlock;
                    // 位置修正，取得x坐标、y坐标中最小值，所有x加最小，所有y减最小值，即向左上位置移动到0
                    var x = 10,y = 10;
                    for (var i=0; i<4; i++) {
                        if(nextBlock.x < x) {
                            x = nextBlock.x;
                        }
                        if(nextBlock.y < y) {
                            y = nextBlock.y;
                        }
                    }
                    for (var i=0; i<4; i++) {
                        this.boardDiv[210 + (nextBlock.x-x)*4 + nextBlock.y - y].style.background = 'red';
                    }
                },
                // 清除预览方块
                eraseNextBlock: function() {
                    for (var i = 0; i < 16; i++) {
                        this.boardDiv[210 + i].style.background = '';
                    }
                },
                // 绘制所有
                drawBox: function() {
                    for (var i = 0; i < this.board.length; i++) {
                        for (var j = 0; j < this.board.length; j++) {
                            if(this.board[j]) {
                                this.boardDiv[i*10+j].style.background = 'red';
                            }
                        }
                    }
                },
                // 清除所有
                eraseBox: function() {
                    for (var i = 0; i < 210; i++) {
                        this.boardDiv.style.background = '';
                    }
                },
                // 左移
                // return array
                // 绘制方块
                moveLeft: function() {
                    if(this.tryLeft()) {    // 可以左移
                        this.eraseBlock();
                        for(var i=0; i<4; i++){
                            this.nowBlock.y = this.nowBlock.y - 1;
                        }
                        this.drawBlock();
                    }
                },
                // 尝试左移
                // return boolean(true|false)
                tryLeft: function() {
                    this.eraseBlock();
                    for (var i = 0; i < 4; i++) {
                        if(this.nowBlock.x < 0 && this.nowBlock.y > 0) continue;
                        if(this.nowBlock.y-1==-1 || this.board[this.nowBlock.x][this.nowBlock.y-1]) {
                            this.drawBlock();
                            return false;
                        }
                    }
                    return true;
                },
                // 右移
                // return array
                // 绘制方块
                moveRight: function() {
                    if(this.tryRight()) {   // 可以右移
                        this.eraseBlock();
                        for(var i=0; i<4; i++){
                            this.nowBlock.y = this.nowBlock.y + 1;
                        }
                        this.drawBlock();
                    }
                },
                // 尝试右移
                // return boolean(true|false)
                tryRight: function() {
                    this.eraseBlock();
                    for (var i = 0; i < 4; i++) {
                        if(this.nowBlock.x < 0 && this.nowBlock.y+1 < 10) continue;
                        if(this.nowBlock.y+1==10 || this.board[this.nowBlock.x][this.nowBlock.y+1]) {
                            this.drawBlock();
                            return false;
                        }
                    }
                    return true;
                },
                // 旋转
                // return array
                // 绘制方块
                moveRotate: function() {
                    if(this.tryRotate()) {
                        this.eraseBlock();
                        var dx = Math.round((this.nowBlock[0].x + this.nowBlock[1].x + this.nowBlock[2].x + this.nowBlock[3].x)/4);
                        var dy = Math.round((this.nowBlock[0].y + this.nowBlock[1].y + this.nowBlock[2].y + this.nowBlock[3].y)/4);
                        for (var i = 0; i < 4; i++) {
                            // dx - dy + this.nowBlock.y //旋转之后的新x坐标
                            // dx + dy - this.nowBlock.x //旋转之后的新y坐标
                            var newX = dx - dy + this.nowBlock.y;
                            var newY = dx + dy - this.nowBlock.x;
                            this.nowBlock.x = newX;
                            this.nowBlock.y = newY;
                        }
                        this.drawBlock();
                    }
                },
                // 尝试旋转
                // return boolean(true|false)
                tryRotate: function() {
                    this.eraseBlock();
                    var dx = Math.round((this.nowBlock[0].x + this.nowBlock[1].x + this.nowBlock[2].x + this.nowBlock[3].x)/4);
                    var dy = Math.round((this.nowBlock[0].y + this.nowBlock[1].y + this.nowBlock[2].y + this.nowBlock[3].y)/4);
                    for (var i = 0; i < 4; i++) {
                        // dx - dy + this.nowBlock.y //旋转之后的新x坐标
                        // dx + dy - this.nowBlock.x //旋转之后的新y坐标
                        var newX = dx - dy + this.nowBlock.y;
                        var newY = dx + dy - this.nowBlock.x;
                        if(newX < 0 || newY < 0 || newY > 9 || this.board[newX][newY]) {
                            this.drawBlock();
                            return false;
                        }
                    }
                    return true;
                },
                // 快速下移
                quickDown: function() {
                    if(tetris.quick) return;
                    var timer = setInterval(function() {
                        if(tetris.tryDown())  {
                            tetris.eraseBlock();
                            for(var i=0; i<4; i++){
                                tetris.nowBlock.x = tetris.nowBlock.x + 1;
                            }
                            tetris.drawBlock();
                        }else {
                            clearInterval(timer);
                        }
                    }, 10);
                    tetris.quick = true;
                },
                // 下移
                // return array
                // 绘制方块
                moveDown: function() {
                    if(this.tryDown()) {    // 可以下移
                        this.eraseBlock();
                        for(var i=0; i<4; i++){
                            this.nowBlock.x = this.nowBlock.x + 1;
                        }
                        this.drawBlock();
                    }else { // 不能下移，尝试消行，尝试消行完毕，产生新块
                        if(this.status != 1) return;
                        this.tryDelLine();
                        this.shakeScreen();
                        this.nowBlock = this.nextBlock;
                        this.nextBlock = this.createBlock();
                        // 先显示一次（删除旧的，显示新的）
                        this.eraseBlock();
                        this.drawBlock();
                        this.eraseNextBlock();
                        this.drawNextBlock();
                    }
                },
                // 尝试下移
                // return boolean(true|false)
                tryDown: function() {
                    this.eraseBlock();
                    for (var i = 0; i < 4; i++) {
                        if(this.nowBlock.x < 0) continue;
                        if(this.nowBlock.x+1==21 || this.board[this.nowBlock.x+1][this.nowBlock.y]) {
                            this.drawBlock();
                            for (var j = 0; j < 4; j++) {
                                if(this.nowBlock[j].x == 0) {
                                    oPrompt.style.display = 'block';
                                    this.status = 2;
                                    return false;
                                }
                            }
                            return false;
                        }
                    }
                    return true;
                },
                // 尝试消行
                // 消行成功得分，所有上方的下移（删除当前行），添加空行（数组unshift一个空值）
                tryDelLine: function() {
                    var line = 0;
                    var num = 0;
                    for (var i = 0; i < this.board.length; i++) {
                        for (var j = 0; j < this.board.length; j++) {
                            if(this.board[j]) {
                                num++;
                            }
                        }
                        if(num == 10) {
                            line++;
                            this.bombBlock(i);
                            this.board.splice(i, 1);
                         &[/runcode]