linkGame

linkGame

by superchangme

HTML

<body>
<div id="linkGame">
    <h1>消消乐</h1>
    <div id="controls">
        <button id="restart">重新开始</button>
        <span>得分:<span id="scores">0</span></span>
    </div>
    <div id="container">
        <div id="gameBox"></div>
        <div id="addScore" class="hide"></div>
    </div>
    <div class="extra">
        <h3>玩法：点击格子，消除同样图像的格子。</h3>
    </div>
</div>
</body>
<script>
    var game;
window.addEvent("domready",function(){
    //type: canvas div
    game=new LinkGame($("linkGame"),{
        type:"div",
        controls:$("controls"),
        container:$("container")
    });
});
</script>

CSS

html{
    font-size: 10px!important;
}
#linkGame{
    margin: 0 auto;
}
#container{
    background: #038cf5;/*
    border: 1px solid darkcyan;
*/

    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
#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);
}
.row{
    display: table;
    float: left;
    position: relative;
}
.row div{
    position: relative;
}
.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;
}
.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%;
}
.mobile .grid:before{
}
.grid.apple:before{
    content:"\32";
    color: red;
}
.grid.cookie:before{
    content:"\33";
    color: saddlebrown;
}
.grid.ice-cream:before{
    content:"\34";
    color: chartreuse;
}
.grid.poultry:before{
    content:"\35";
    color: goldenrod;
}
.grid.other:before{
    content:"\36";
    color: goldenrod;
}
@font-face {
    font-family: 'tbhfontregular';
    src: url('../fonts/tbhfont.eot');
    src: url('../fonts/tbhfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/tbhfont.woff') format('woff'),
    url('../fonts/tbhfont.ttf') format('truetype'),
    url('../fonts/tbhfont.svg#tbhfontregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.grid{
    font-family: "tbhfontregular";
    display:inline-block;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    color:white;
    -webkit-font-smoothing: antialiased;
   ...

JavaScript

/**
 * Created by Administrator on 11/13/2014.
 */
(function(zp,w){
    w.LinkGame=(function(){
        var dom=Document,_width=_height=600,_gridSize=60;
        if(window.navigator.userAgent.toLowerCase().indexOf("mobile")>-1
        &&window.navigator.userAgent.toLowerCase().indexOf("pad")==-1){
            _width=_height=300;_gridSize=60;
            $$("body").addClass("mobile");
        }

        var Grids=(function(){
            var _id= 0,gridNames=["apple","ice-cream","poultry","cookie","other"],
                createCount=10;
            return new Class({
                initialize:function(rows,cols){
                    this.grids={};
                    this.map=(function(r,c){
                        var a=[];
                        for(var i= 0;i<rows;i++){
                            a[i]=new Array(cols);
                        }
                        return a;
                    })(rows,cols)
                },
                getGrid:function(id){
                    return this.grids[id];
                },
                delGrid:function(gridOrId){
                    var grid=typeOf(gridOrId)!=="string"?gridOrId:this.getGrid(gridOrId);
                    if(grid){
                        this.map[grid.row][grid.col]=null;
                        grid=null;
                    }
                },
                initParent:function(row,parent){
                    this.map[row].parentNode = parent;
                    this.map[row].top = 0;
                },
                updateGrid:function(){

                },
                produceGrid:function(size,i,j){
                    var grid=new Grid(size,i,j,this.getGridName(i,j));
                    _id++;
                    this.grids[_id]=grid;
                    grid.node.store("id",_id);
                    this.map[i][j]=grid;
                    //记录列

                    return grid;
                },
                preCreate:function(){

                },
          ...