Tetris

Tetris Game

by superchangme

HTML

<div id="tetrisGame">
<!--
    <h1>俄罗斯方块</h1>
-->

    <div id="container">
        <div id="gameBox"></div>
        <div id="addScore" class="hide"></div>
    </div>
    <div id="controls">
        <div class="leftGroup">
            <button id="restart">重新开始</button>
            <span>得分:<span id="scores">0</span></span>
            <span>方块提示:</span>
            <div id="tipBox">

            </div>
            <button id="pauseOrStart">暂停</button>
        </div>
        <div id="handleBar">
            <button class="left">向左</button>
            <button class="rotate">旋转</button>
            <button class="right">向右</button>
            <button class="down">加速</button>
        </div>
    </div>

    <div class="extra">
        <h3>玩法：键盘箭头操作，上旋转，下加速，左右平移 -_-#!</h3>
    </div>
        <audio src="http://erge.manmankan.com/MusciSite/mp3/ling/1/527.mp3?" id="victory"></audio>

</div>

CSS

html {
  font-size: 10px!important;
}
#linkGame {
  margin: 0 auto;
  /*
      border: 1px solid darkcyan;
  */
}
#linkGame #container {
  background: #038cf5;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
#linkGame #gameBox {
  height: 100%;
  width: 100%;
  -webkit-transform: translate3d(0, -100%, 0);
  -moz-transform: translate3d(0, -100%, 0);
  -ms-transform: translate3d(0, -100%, 0);
  -o-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}
#linkGame .row {
  display: table;
  float: left;
  position: relative;
}
#linkGame .row div {
  position: relative;
}
#linkGame .grid {
  position: relative;
  float: right;
  padding: 2px;
  box-sizing: border-box;
  display: table-cell;
  vertical-align: middle;
  -webkit-box-shadow: 1px 1px 1px 1px  lightblue;
  -moz-box-shadow: 1px 1px 1px 1px  lightblue;
  box-shadow: 1px 1px 1px 1px  lightblue;
}
#linkGame .grid:before {
  content: " \e001";
  display: block;
  text-align: center;
  font-size: 5rem;
  line-height: 1;
  left: 0;
  top: 0;
  position: relative;
  height: 100%;
  width: 100%;
}
#linkGame .grid.apple:before {
  content: "\e001";
  color: red;
}
#linkGame .grid.cookie:before {
  content: "\e030";
  color: saddlebrown;
}
#linkGame .grid.ice-cream:before {
  content: "\e016";
  color: chartreuse;
}
#linkGame .grid.poultry:before {
  content: "\e008";
  color: goldenrod;
}
#linkGame .grid.other:before {
  content: "\e009";
  color: goldenrod;
}
#linkGame .grid {
  font-family: "tbhfontregular";
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: 'tbhfontregular';
  src: url('../fonts/tbhfont.eot');
  src: url('../fonts/tbhfont.eot?#iefix') format('embedded-opentype'), url('../fonts/tbhfont.woff2') format('woff2'), url('../fonts/tbhfont.ttf') format('truetype'), url('../fonts/tbhfont.svg#tbhfontregular')...

JavaScript

var game;
(function(zp,w){
    var _width=360,_height=600,_size=40,ISMOBILE=false,winSize=window.getSize(),
        _maxCols=10,_maxRows=18;
    if(/Android|webOS|iPhone|iPod|BlackBerry|iPad/i.test(window.navigator.userAgent)){
        ISMOBILE=true;
        $$("body").addClass("mobile");
        var rows=Math.floor((winSize.y-180)/32),cols=Math.floor(winSize.x/32)*32;
        _size=32;
        _width=(cols>_maxCols?_maxCols:cols)*32;
        _height=(rows>_maxRows?_maxRows:rows)*32;
    }
    w.TetrisGame=(function(){
        var gridsArr=[
            [
                [[1,1],[1,1]]
            ],
            [
                [[1,0,0],[1,1,1]],
                [[1,1],[1,0],[1,0]],
                [[1,1,1],[0,0,1]],
                [[0,1],[0,1],[1,1]]
            ],
            [
                [[0,0,1],[1,1,1]],
                [[1,0],[1,0],[1,1]],
                [[1,1,1],[1,0,0]],
                [[1,1],[0,1],[0,1]]
            ],
            [
                [[0,1,0],[1,1,1]],
                [[1,0],[1,1],[1,0]],
                [[1,1,1],[0,1,0]],
                [[0,1],[1,1],[0,1]]
            ],
            [
                [[1,1,1,1]],
                [[1],[1],[1],[1]]
            ],
            [
                [[1,1,0],[0,1,1]],
                [[0,1],[1,1],[1,0]]
            ],
            [
                [[0,1,1],[1,1,0]],
                [[1,0],[1,1],[0,1]]
            ]
        ];
        var GridMap=(function(){
            var _isFill= 1;
            return new Class({
                Implements:[Events,Chain],
                initialize:function(rows,cols){
                    this.rows=rows;
                    this.cols=cols;
                    this.data=(function(r,c){
                        var a=[];
                        for(var i= 0;i<r;i++){
                            a[i]=new Array(c);
                            for(var j=0;j<c;j++){
                                a[i][j]=!_isFill;
                            }
             ...